web手工測(cè)試的經(jīng)驗(yàn)總結(jié)

web手工測(cè)試的經(jīng)驗(yàn)總結(jié)

前言

本文主要是闡述個(gè)人的web手工黑盒測(cè)試的工作經(jīng)驗(yàn)測(cè)試目的

測(cè)試并不僅僅是為了找出錯(cuò)誤，通過分析錯(cuò)誤產(chǎn)生的原因和錯(cuò)誤的分布特征，可以幫助項(xiàng)目管理者（開發(fā)人員）發(fā)現(xiàn)當(dāng)前所采用的軟件過程的缺陷，以便改進(jìn)；從而提高軟件的質(zhì)量，更體現(xiàn)了測(cè)試的重要性。工作經(jīng)歷1、工作環(huán)境介紹

09年3月剛?cè)肼�，也是�?xiàng)目初建階段，項(xiàng)目組6個(gè)人在一個(gè)小房間，5臺(tái)臺(tái)式機(jī)1個(gè)人用筆記本（領(lǐng)導(dǎo)）；2張桌子比較擠，工作的地方是比較簡(jiǎn)陋；剛開始熟悉需求，然后是和同事一起部署項(xiàng)目，不過就是看看表結(jié)構(gòu)，學(xué)習(xí)下怎么把數(shù)據(jù)入庫(kù)Oralce數(shù)據(jù)庫(kù)，后臺(tái)Oracle存儲(chǔ)過程開發(fā)，在前臺(tái)配置業(yè)務(wù)指標(biāo)配置展現(xiàn)，給用戶做個(gè)什么小需求等等，都是瑣碎的事。不過項(xiàng)目初建比較累，加班較多，事情也多，大概到8、9月份才開始正常上下班。10年過完年大概3月份左右吧，二期的項(xiàng)目要測(cè)試（公司給我們項(xiàng)目組劃了一片辦公地方，挺好的），項(xiàng)目組人手不夠，老大讓我轉(zhuǎn)測(cè)試，問我同不同意，我想了想自己的工作內(nèi)容比較雜，專注一件事情也是好事，就同意了！開始真正的測(cè)試工作。

然后老大從別個(gè)項(xiàng)目組調(diào)了一個(gè)有測(cè)試經(jīng)理級(jí)別的人，過來協(xié)助測(cè)試，我跟著他學(xué)習(xí)了一點(diǎn)東西。比如測(cè)試用例的撰寫，用戶驗(yàn)收UAT用例和測(cè)試報(bào)告的輸出。記得他說過做測(cè)試要細(xì)心，提出的bug要跟蹤，注意頁(yè)面的美觀性，按鈕、字體大小、字體顏色，風(fēng)格要保存一致等，雖然他教的少，不過還是挺感謝滴！

二期項(xiàng)目上線之后，測(cè)試工作告一段落，我又恢復(fù)了以前的工作，沒有了測(cè)試工作就做業(yè)務(wù)需求開發(fā)寫寫Oracle存儲(chǔ)過程，前臺(tái)配置展現(xiàn)，維護(hù)下測(cè)試環(huán)境和線上的環(huán)境等等。

做了測(cè)試之后感覺自己挺喜歡這行滴，因?yàn)楣ぷ鞯氖虑楸容^雜想學(xué)不到什么東西，個(gè)人想專注測(cè)試，201*年動(dòng)搖了要離職的念頭，不過老大找我談了好幾次話，也主動(dòng)給我加了工資，就留下了，遇到這種老大，挺不容易的，對(duì)我們組員很好。

11年項(xiàng)目三期測(cè)試；輸出測(cè)試策略，按照計(jì)劃的時(shí)候輸出相應(yīng)的文檔，比如測(cè)試用例的輸出，然后全員參加用例評(píng)審（開發(fā)、測(cè)試和PM），會(huì)上提出用例的不足或者、與需求不符或者不完善的地方；修改了之后發(fā)送PM，通過后執(zhí)行測(cè)試。測(cè)試的時(shí)候每天晚上郵件反饋當(dāng)天的工作進(jìn)度，采用迭代測(cè)試的形式測(cè)試，測(cè)試環(huán)境我自己維護(hù)，一輪測(cè)試完成后，開發(fā)把bug修復(fù)完成，在提供一個(gè)發(fā)布包，然后驗(yàn)證，沒有新bug產(chǎn)生后，就輸出一份系統(tǒng)測(cè)試報(bào)告和缺陷報(bào)告（針對(duì)開發(fā)人員）。如果客戶要求做壓力測(cè)試，需要輸出一個(gè)壓力測(cè)試方案（包括場(chǎng)景、測(cè)試模塊、測(cè)試環(huán)境等），當(dāng)然方案也要評(píng)審，評(píng)審?fù)ㄟ^后開始LoadRunner壓力測(cè)試，測(cè)試完成后輸出壓力測(cè)試報(bào)告。然后是一個(gè)用戶驗(yàn)收UAT測(cè)試用例的輸出。最后上線完成。并輸出一個(gè)上線總結(jié)文件！

在工作期間帶了3個(gè)新同事，Ta們3個(gè)都不同，也許是剛開始接觸測(cè)試，慢慢的成長(zhǎng)！有一個(gè)女同事很…..我給她定了個(gè)學(xué)習(xí)系統(tǒng)和業(yè)務(wù)的計(jì)劃，人家自己不做反而在那里看開發(fā)的代碼，問她的時(shí)候她也總是沒問題，偷懶很嚴(yán)重，如果她不是女生就和老大說不用她了……

介紹下以前公司的測(cè)試流程：

……………………

查看全文請(qǐng)點(diǎn)擊下載：-844176.html2.4數(shù)據(jù)驗(yàn)證

1）前后臺(tái)數(shù)據(jù)一致：前臺(tái)正確錄入信息保存后，后臺(tái)數(shù)據(jù)庫(kù)相對(duì)應(yīng)的表正常記錄（與前臺(tái)輸入一致）比如：注冊(cè)一個(gè)用戶信息提交成功后，用戶表users中是否正常保存了當(dāng)前的錄入信息。

2）存儲(chǔ)過程驗(yàn)證：oracleF8編譯通過，F(xiàn)8執(zhí)行后對(duì)應(yīng)的數(shù)據(jù)表正常錄入數(shù)據(jù)，無(wú)鎖表現(xiàn)象（當(dāng)目標(biāo)表B表從另外一長(zhǎng)表A表取值，當(dāng)A表數(shù)據(jù)過大時(shí)要借助臨時(shí)表，避免死鎖、耗費(fèi)資源的現(xiàn)象）2.5根據(jù)開發(fā)習(xí)慣找錯(cuò)誤

1）同一個(gè)開發(fā)人員開發(fā)的模塊，在不同的模塊犯了錯(cuò)誤，其他的模塊也有類似的錯(cuò)誤

比如A開發(fā)人員主要負(fù)責(zé)用戶、權(quán)限模塊，在測(cè)試用戶模塊時(shí)發(fā)現(xiàn)用戶名可以重復(fù)，現(xiàn)象用戶名重復(fù)：注冊(cè)了兩個(gè)相同的帳號(hào)，但是用戶狀態(tài)不同，一個(gè)是不可用狀態(tài)，一個(gè)是可用狀態(tài)，但是登錄的時(shí)候兩個(gè)都不能登錄，提示“帳號(hào)不可用”。然后再去驗(yàn)證權(quán)限模塊，角色名稱也可以重復(fù)，看似小問題，但對(duì)于用戶來說可能就是大問題了，因?yàn)檎�常狀態(tài)的用戶不能登錄。所以開發(fā)人員的習(xí)慣也是不能忽視的！2.6LR壓力測(cè)試

選擇好錄制協(xié)議，錄制腳本，根據(jù)需要添加事物和集合點(diǎn)，使用參數(shù)化，設(shè)置runtime-setting，在場(chǎng)景執(zhí)行的時(shí)候注意觀察主機(jī)CPU和內(nèi)存使用率。個(gè)人觀點(diǎn)

1）立項(xiàng)前的需求分析很重要，與開發(fā)人員的溝通也很重要；對(duì)需求理解程度越深，對(duì)開發(fā)的思想理解越透徹，撰寫的測(cè)試用例就越全面，漏測(cè)的幾率也會(huì)減少。

2）關(guān)注用戶的需求，注重細(xì)節(jié)，盡可能找出系統(tǒng)中隱藏的缺陷。3）總結(jié)測(cè)試過程中發(fā)現(xiàn)的問題，做好漏測(cè)記錄，避免相同的錯(cuò)誤發(fā)生。

擴(kuò)展閱讀：Web開發(fā)經(jīng)驗(yàn)總結(jié)

1，不要認(rèn)為Struts已經(jīng)過時(shí)了，也不要盲目的去追隨JSF以及更新的MVC框架，在目前Struts仍舊是最為優(yōu)秀的MVC框架，尤其是后來與Spring、Hibernate（或者Ibatis）的結(jié)合，使得Struts的應(yīng)用得到了進(jìn)一步的發(fā)展，也許你認(rèn)為Webwork2、SpringMVC或者JSF更為優(yōu)秀和實(shí)用，那么也沒有關(guān)系，其實(shí)只要對(duì)你或你的公司適用，那么就可以了。

2，你知道Javascript中的typeof和instanceof操作嗎，如果不知道，勸你還是看看這方面的知識(shí)吧，typeof返回的是對(duì)象的類型，例如string、number、object等等，而instanceof判斷的是一個(gè)對(duì)象是否是某個(gè)類的實(shí)例，例如：vararr=newArray();

vartype=typeof(arr);//返回objectvarflag=arrinstanceofArray;//返回truevarflag2=arrinstanceofObject;//返回true;

在實(shí)際使用過程中，你會(huì)發(fā)現(xiàn)instanceof是更為強(qiáng)大的，當(dāng)然了許多時(shí)候typeof用起來很方便，但是對(duì)于復(fù)雜的場(chǎng)合typeof就不太適用了，尤其是對(duì)于自定義對(duì)象以及對(duì)象之間有著復(fù)雜的繼承關(guān)系時(shí)，使用instanceof可以方便的對(duì)這些進(jìn)行判斷。

3，雖然你可能知道javascript中typeof的用法，但是如果你不能做對(duì)下面的題，說明你對(duì)typeof的理解還是不夠的，例如：vara;

varrs=typeof(a);//請(qǐng)問rs的值是什么？

（A）object（B）variable（C）undefined(D)string（E）null（F）以上答案全不正確

如果你選擇A還算對(duì)JS有一些了解，如果選擇B則基本上是亂猜的，如果選擇D什么也說明不了，如果選擇E則說明你對(duì)于Java和Javascript有些東西還沒有分清楚，選擇F也是不正確的。答案是C，記住在Javascript之中，如果一個(gè)變量沒有初始化，那么該變量的類型為undefined。

4，也許你一直在抱怨Javascript之中沒有列表、哈西表以及堆棧、隊(duì)列等數(shù)據(jù)結(jié)構(gòu)，如果真的在抱怨，那么也不是你的錯(cuò)，畢竟包括我自己在內(nèi)，我們對(duì)JS的了解太少了，其實(shí)在JS之中，數(shù)組對(duì)象自身完全支持上面的那些數(shù)據(jù)結(jié)構(gòu)，例如：varlist=newArray();//列表list[0]="a";list[100]="b";

varmap=newArray();//哈西表map["001"]="a";

map["username"]="zhangsan";

varstack=newArray();//堆棧，即后進(jìn)先出stack.push("a");stack.pop();

varqueue=newArray();//隊(duì)列，即先進(jìn)先出queue.unshift("a");queue.shift();

可見JS是非常強(qiáng)大的，關(guān)鍵是我們知道的太少了，關(guān)于Javascript對(duì)于數(shù)組的操作，你也可以參考《Javascript對(duì)數(shù)組的操作》。

5，作為一個(gè)web開發(fā)人員，我們不能指望美工在完成漂亮的效果圖之后，還要為我們將圖切分，最后生成html文件后再給我們，然后我們對(duì)這些html文件，再修改轉(zhuǎn)換為jsp、asp或者php文件。我一直認(rèn)為效果圖的切分應(yīng)該或者最好由我們程序員自己來做，因?yàn)槊拦ぷ龅男Ч麍D實(shí)際上是要應(yīng)用到我們的產(chǎn)品或者項(xiàng)目中的，而具體的產(chǎn)品和項(xiàng)目，對(duì)效果圖中哪些部分是需要輸入文字的，哪些地方是需要背景的，哪些地方是需要可以自動(dòng)伸縮的，而哪些地方又是必須保證大小的，是有很嚴(yán)格的要求的，尤其是我們的產(chǎn)品或項(xiàng)目中如果使用了類似sitemesh等的模板技術(shù)，那么切圖的工作就更要由我們自己來做了。這樣并不是說美工不需要懂得html、css等技術(shù)，也不是說美工切出的圖，會(huì)不符合我們的要求，我們知道，一張效果圖，可以有n種切法，但是要能夠滿足實(shí)際的需求，往往只有一種最合適的切法，而這個(gè)切法一般來說美工是不太清楚的，開發(fā)人員也是不清楚的，只有既是開發(fā)人員，又懂得美工切圖的人，才能夠找到最為合適的切分方法，而這樣的人才是非常奇缺的！

6，不要過于癡迷Ajax技術(shù)，也不要過于追捧web2.0這個(gè)時(shí)髦的詞匯，并不是說什么東西粘上ajax或者web2.0，就能夠火起來或者對(duì)我們的實(shí)際發(fā)展有利的，如果你是做公網(wǎng)網(wǎng)站的，那么要注意，不合適的ajax使用，會(huì)使得網(wǎng)站被搜索引擎收錄的信息大幅度減少，但是ajax或者Flex2等技術(shù)對(duì)于用戶體驗(yàn)而言，還是相當(dāng)不錯(cuò)的，因此是否使用ajax等技術(shù)，一要看對(duì)你們的解決方案宣傳是否有作用，另外一點(diǎn)就是要看，它是否真正的改進(jìn)了我們的應(yīng)用。

7，對(duì)于ajax的post提交方式，可能你有些問題要問，例如post的方式是不是只要在open時(shí)指定method就可以了，為什么我將大數(shù)據(jù)放到url后面，而沒有被完全傳遞過去，為什么我后臺(tái)使用類似jsp中的request.getParamter方法接收不到數(shù)據(jù)，我們通過一個(gè)例子看一下ajax發(fā)送/接受大數(shù)據(jù)的方式：

1）send.jsp:（我舉的例子使用的是Javascript開源框架JsJava的ajax類庫(kù)，該類庫(kù)對(duì)IE和Firefox等的XMLHttpRequest等對(duì)象進(jìn)行了易用性的封裝，不像prototype.js默認(rèn)對(duì)傳遞的數(shù)據(jù)進(jìn)行urlencode編碼）

varajaxRequest=newAjaxRequest();ajaxRequest.setRequestMethod("post");

ajaxRequest.setRequestURL("ajaxresponse.jsp");ajaxRequest.setAsync(true);

ajaxRequest.setMethodOnSuccess(onSuccess,[ajaxRequest]);

ajaxRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");

ajaxRequest.send("content=這是一篇幾千字的文檔...在此省略");要注意設(shè)置發(fā)送方式為post，設(shè)置頭信息的內(nèi)容類型為

application/x-www-form-urlencoded，charset是否設(shè)置要看內(nèi)容的編碼情況，另外大數(shù)據(jù)就放到send之中，記住大數(shù)據(jù)不是放在url的參數(shù)之中的。

2）receive.jsp

InputStreamstream=request.getInputStream();

InputStreamReaderisr=newInputStreamReader(stream);BufferedReaderbr=newBufferedReader(isr);Stringstr=br.readLine();System.out.println(str);br.close();

要知道，對(duì)于ajaxpost方式提交的數(shù)據(jù)，在服務(wù)器端如果是jsp不是簡(jiǎn)單使用getParameter就能取得到的，需要從輸入流中去取，這和附件上傳有些類似的地方。當(dāng)然要注意編碼和解碼的問題。

8，我們?cè)诮缑嬷薪?jīng)常會(huì)通過setTimeout方法來實(shí)現(xiàn)定時(shí)或者異步操作，例如：setTimeout(myfunc,201*);//兩秒后執(zhí)行myfunc函數(shù)

但是要注意setTimeout方法并不能阻止后面js代碼邏輯的執(zhí)行，例如：vara=8;

setTimeout(myfunc,3000);document.write("wait...");

上面的代碼中，document.write("wait...");邏輯并不會(huì)等到3秒后才執(zhí)行，而是立即執(zhí)行的，其實(shí)這一點(diǎn)可能大部分開發(fā)人員都知道，但是如果不注意，就很容易犯下面的錯(cuò)誤，如下面代碼所示：varajax2HasExecuted=false;varajaxRequest1;functionajax1Func(){if(!ajax2HasExecuted){setTimeout(ajax1Func,200);}

vartext=ajaxRequest1.getResponseText();...}

varajaxRequest2;functionajax2Func(){vartext=ajaxRequest2.getResponseText();...

ajax2HasExecuted=true;}

上面的代碼是一個(gè)頁(yè)面中同時(shí)發(fā)送了兩個(gè)ajax異步請(qǐng)求，分別有兩個(gè)對(duì)應(yīng)的接收操作，而業(yè)務(wù)邏輯要求，這兩個(gè)操作是要有先后順序的，其中第一個(gè)接收操作，需要等待第二個(gè)接收操作完成之后，才能進(jìn)行處理，于是第一個(gè)操作中就采用setTimeout的方式，本意是在執(zhí)行第一個(gè)操作的開始的地方，先判斷第二個(gè)操作是否已經(jīng)執(zhí)行完畢，如果沒有執(zhí)行完畢，則等待200毫秒后，重新執(zhí)行第二個(gè)操作，然后由于setTimeout并不能組織后續(xù)的邏輯繼續(xù)執(zhí)行，所以實(shí)際上不管第二個(gè)操作是否完成，第一個(gè)操作都會(huì)一直往下執(zhí)行下去，從而導(dǎo)致業(yè)務(wù)上的錯(cuò)誤。解決方法要么是在if后面加上else，或者在setTimeout之后直接return，例如：if(!ajax2HasExecuted){setTimeout(ajax1Func,200);return;}

9，window.open和window.showModalDialog方法相信你已經(jīng)用到過許多次了，但是總是出現(xiàn)這樣或那樣的問題，問題主要是以下幾個(gè)方面：

1）showModalDialog這個(gè)函數(shù)名經(jīng)常被寫錯(cuò)，例如經(jīng)常被寫成showModelDialog，使得不能執(zhí)行打開窗口的操作。

2）控制打開窗口的屬性，例如尺寸、滾動(dòng)條、菜單、狀態(tài)欄等，是我們經(jīng)常會(huì)碰到的情況，但是我們經(jīng)常會(huì)將這兩種打開方式的屬性名稱以及屬性之間的分隔符混用，使得屬性執(zhí)行不正確，例如我舉下面的例子，要求彈出一個(gè)寬200高300的窗口，你看哪些方式是對(duì)的？

（A）window.open("about:blank","","width=200,height=300");（B）window.open("about:blank","","width:200,height:300");（C）window.open("about:blank","","width=200;height=300");（D）window.open("about:blank","","width:200;height:300");（E）window.showModalDialog("about:blank","","dialogWidth:200px;dialogHeight:300px");（F）

window.showModalDialog("about:blank","","dialogWidth=200px;dialogHeight=300px");（G）window.showModalDialog("about:blank","","dialogWidth:200;dialogHeight:300");再多的選項(xiàng)就不寫了，正確答案是A和E，通過上面的問題我們需要記住一下幾點(diǎn)：

window.open控制屬性之間的分隔符是逗號(hào)“,”，屬性和值之間用等于號(hào)"="連接window.showModalDialog控制屬性之間的分隔符是分號(hào)“;”，屬性之間的用冒號(hào)“:”

連接

window.open控制屬性中長(zhǎng)度和寬度尺寸可以直接寫數(shù)字，也可以加上度量，例

如px，但是對(duì)于window.showModalDialog的長(zhǎng)度和寬度則必須帶上px，否則尺寸無(wú)效，這一點(diǎn)是很重要的。

10，對(duì)于數(shù)據(jù)庫(kù)中的varchar型字段，是有長(zhǎng)度限制的，例如oracle10g中varchar2字段的最大長(zhǎng)度為4000字符,在mysql中varchar最長(zhǎng)為255字符，要注意這里面的限制值是單字節(jié)字符值，而漢字屬于雙字節(jié)字符，因此對(duì)于漢字存儲(chǔ)而言，varchar2字段最多可以存儲(chǔ)201*個(gè)漢字，由此引申出來的一個(gè)問題，就是web開發(fā)過程中的表單提交驗(yàn)證問題，因?yàn)閷?duì)于中國(guó)用戶而言，輸入的內(nèi)容有可能是漢字和英文字符的組合，因此判斷輸入字符串的長(zhǎng)度需要注意，Javascript中判斷一個(gè)字符串的長(zhǎng)度的方法為：varstr="abcdef";varlength=str.length;

但是字符串的這個(gè)屬性，計(jì)算的是獨(dú)立字符的長(zhǎng)度，例如一個(gè)中文字符按長(zhǎng)度1計(jì)算，因此如下：varstr="你好";varlength=str.length;

其長(zhǎng)度的值為2，而不是4，那么如何計(jì)算含有漢字或者說是雙字節(jié)字符的真實(shí)長(zhǎng)度呢？通過搜索可以很快找到方法，就是先將雙子節(jié)字符替換為兩個(gè)單字節(jié)字符，然后計(jì)算替換后的字符的長(zhǎng)度，當(dāng)然了JsJava中提供了對(duì)于雙字節(jié)字符串真實(shí)長(zhǎng)度的計(jì)算支持，你可以查看其中的StringUtils類。11，如果你不能默寫出常用顏色的英文表示值和16進(jìn)制表示值，那么說明你的HTML基本功還是需要練的，例如白色是white，十六進(jìn)制是FFFFFF，紅色是red，十六進(jìn)制是FF0000，藍(lán)色是blue，十六進(jìn)制是0000FF，紫色是purple，橙色是orange，網(wǎng)頁(yè)中常用的灰色一般都是EEEEE，或者再淺一些EFEFEF，當(dāng)然說這些并不是讓你去背大量的顏色和十六進(jìn)制值，但掌握一些常用的，還是很有必要的。

12，Javascript支持多維數(shù)組，但是沒有構(gòu)造函數(shù)可以直接生成多維數(shù)組，例如一維數(shù)組可以通過Array生成，例如：vararr=newArray(12);

生成多維數(shù)組，雖然沒有構(gòu)造函數(shù)支持，但是可以通過另外一種方式實(shí)現(xiàn)，例如實(shí)現(xiàn)一個(gè)12x5的二維數(shù)組：vararr=newArray(12);for(vari=0;i

再看加入align=left的情況：

4）將事件加入到事件隊(duì)列中，即：IE中window.attachEvent("onload",myfunc)

Firefox中window.addEventListener("load",myfunc,false)

建議大家使用第四種方式，因?yàn)橹挥械谒姆N方式，可以避免將其它的同類事件覆蓋，第四種方式是將該事件加入到同類的事件的隊(duì)列之中，不會(huì)覆蓋其它的同類事件，這在web開發(fā)過程種，是需要特別注意的，尤其我們自己定義一些界面框架或者組建的時(shí)候，經(jīng)常需要定義onload事件，這個(gè)時(shí)候最好是使用第四種方式，因?yàn)橐�用界面框架和組建的用戶，可能在頁(yè)面上也想使用onload邏輯，當(dāng)然用戶自己使用第四種方式也不會(huì)有問題，但是做為一個(gè)負(fù)責(zé)任的界面高手，是不應(yīng)該這樣想得，我們應(yīng)該嚴(yán)于律己，而寬以待人。

15，并不只是body（或者說window）有onload事件，中也可以定義onload事件，還有也可以定義onload事件，例如當(dāng)圖片加載完畢后，在window的狀態(tài)欄種顯示加載成功的字樣：

這是一段格式化文本，里面的文字直接將格式輸出顯示結(jié)果為：

這是一段格式化文本，里面的文字直接將格式輸出

那么如何才能將含有HTML的內(nèi)容也原樣輸出呢？實(shí)際上在HTML規(guī)范種有標(biāo)簽，可以實(shí)現(xiàn)這種效果，例如：

這是一段格式化文本，里面的文字直接將格式輸出顯示結(jié)果為：

這是一段格式化文本，里面的文字直接將格式輸出17，如何獲取某個(gè)對(duì)象區(qū)域的尺寸以及坐標(biāo)，是我們界面開發(fā)過程種經(jīng)常會(huì)遇到的一個(gè)問題，一般我們都采用getBoundingClientRect方法來獲取對(duì)象的區(qū)域，進(jìn)而得到該區(qū)域的尺寸和坐標(biāo)，但是該方法只能在IE中使用，當(dāng)然Firefox也有類似的方法，相信大多數(shù)開發(fā)人員不知道，該方法就是getBoxObjectFor，為了不想為跨瀏覽器而操心，你可以直接下載JsJava，使用其中的DocumentUtils類的getElementRectangle靜態(tài)方法，例如：

varelemObj=document.getElementById("div1");//div1是一個(gè)div的id

varrect=DocumentUtils.getElementRectangle(elemObj);//返回的rect是JsJava中的Rectangle對(duì)象varx=rect.getX();vary=rect.getY();varwidth=rect.getWidth();varheight=rect.getHeight();

JsJava的類和方法都是經(jīng)過IE和Firefox測(cè)試的，使用起來很方便。

18，在界面中對(duì)象的位置的計(jì)算與理解是比較麻煩的一件事情，例如clientHeight、clientTop、scrollHeight、scrollTop、offsetHeight、offsetTop，這些該怎么區(qū)分，又分別代表什么意思，對(duì)位置屬性的深入理解，非常有助于對(duì)HTML界面布局本質(zhì)的理解，是成為高手的必由之路，下面就簡(jiǎn)單介紹一下：

1）clientHeight，代表對(duì)象區(qū)域的屏幕高度，不包含區(qū)域的border尺寸，但包含padding的尺寸

2）clientTop，對(duì)象區(qū)域offsetHeight與clientHeight的差的一半3）scrollHeight，代表對(duì)象區(qū)域內(nèi)容的底部距區(qū)域最上邊的距離

4）scrollTop，代表對(duì)象區(qū)域滾動(dòng)部分的高度，即區(qū)域的最上邊距離該區(qū)域可見部分的最上邊的距離

5）offsetHeight，代表對(duì)象區(qū)域的屏幕高度，包含border和padding尺寸6）offsetTop，代表對(duì)象區(qū)域距離上一個(gè)對(duì)象高度

上面的解釋如果沒有實(shí)際的經(jīng)驗(yàn)，多少會(huì)有些迷糊，沒有關(guān)系，我給你一個(gè)示意圖：

因此，scrollHeight并非總是大于或等于clientHeight，實(shí)際上確實(shí)有一些開發(fā)人員認(rèn)為一個(gè)區(qū)域沒有滾動(dòng)時(shí)scrollHeight和clientHeight相等，有滾動(dòng)時(shí)scrollHeight＝clientHeight+scrollTop，這種認(rèn)識(shí)是不對(duì)的或者說是不準(zhǔn)確的。上面的圖的html源碼為：functionpos(){

debug(test1.clientHeight);debug(test1.clientTop);debug(test1.scrollHeight);debug(test1.scrollTop);debug(test1.offsetHeight);debug(test1.offsetTop);debug("--------------");debug(test2.clientHeight);debug(test2.clientTop);debug(test2.scrollHeight);debug(test2.scrollTop);debug(test2.offsetHeight);debug(test2.offsetTop);debug("--------------");}

functiondebug(str){info.value+=str+"\\n";}

區(qū)域1，高100區(qū)域2，高50

區(qū)域4，高1顯示結(jié)果為：701528010015--------------50018050115--------------

19，網(wǎng)上許多人都問，如何將一個(gè)RGB顏色轉(zhuǎn)換為HTML中的十六進(jìn)制顏色，我看到了一些網(wǎng)友的實(shí)現(xiàn)，例如定義一個(gè)長(zhǎng)度為256的數(shù)組，并按照十六進(jìn)制的規(guī)律將其全部初始化，還有的利用了HTML標(biāo)簽的一些特點(diǎn)，不過有一定的局限性，其實(shí)我們只要理解了RGB顏色的基本知識(shí)，轉(zhuǎn)換起來是很方便的，RGB分別代表紅（Red）、綠（Green）、藍(lán)（Blue）三種基色，其中每一種基色從淺到深又可以定義256色，這樣RGB總共可以表示256x256x256種顏色，而對(duì)于十六進(jìn)制顏色來說，其實(shí)就是用十六進(jìn)制數(shù)字來表示RGB，例如FFFFFF代表rgb(256,256,256)，換算起來也很簡(jiǎn)單，就是十進(jìn)制與十六進(jìn)制之間的表示方法的轉(zhuǎn)換，例如對(duì)于RGB顏色rgb(132,216,12)，用十六進(jìn)制顏色表示的計(jì)算方式為：

132轉(zhuǎn)換為十六進(jìn)制數(shù)字為84216轉(zhuǎn)換為十六進(jìn)制數(shù)字為D812轉(zhuǎn)換為十六進(jìn)制數(shù)字為0C因此rgb(132,216,12)的十六進(jìn)制顏色就是84D80C，我們可以看一下兩者的效果：

顯示為：

那么Javascript之中是否提供了十進(jìn)制數(shù)與十六進(jìn)制數(shù)的轉(zhuǎn)換呢，Javascript沒有提供內(nèi)置的函數(shù)來進(jìn)行這種轉(zhuǎn)換，不過你可以下載JsJava，使用其中Integer類的靜態(tài)方法：toHexString方法，例如

varhex=Integer.toHexString(253);document.write(""+hex);//顯示為FD

或者你直接使用JsJava種的Color對(duì)象：varcolor=newColor(132,216,12);

varhex=color.toHexValue();//hex的值為84d80c

20，web開發(fā)過程中，經(jīng)常會(huì)遇到原頁(yè)面與彈出頁(yè)面之間進(jìn)行交互的問題，如果只是簡(jiǎn)單的變量傳遞，還是不難的，而我們經(jīng)常遇到的一個(gè)實(shí)際場(chǎng)景是：例如有一個(gè)用戶列表頁(yè)面，點(diǎn)擊“新建”按鈕，彈出一個(gè)創(chuàng)建用戶的頁(yè)面，填寫完信息后要提交表單并關(guān)閉窗口，同時(shí)列表頁(yè)面中要列出新建的用戶，這個(gè)時(shí)候我們一些開發(fā)人員喜歡使用的方式為：userForm.submit();

opener.location.reload();//或者有些開發(fā)人員喜歡用opener.location=列表頁(yè)面的請(qǐng)求url

window.close();上面的代碼有一個(gè)很明顯的問題，就是如果表單提交給后臺(tái)，后臺(tái)還在處理，而此時(shí)原頁(yè)面已經(jīng)執(zhí)行了重載，那么等新用戶在后臺(tái)存儲(chǔ)后了，也不會(huì)反映到列表頁(yè)面中了，當(dāng)然刷新一個(gè)就有了，但是就達(dá)不到我們所要的效果了。下面給你介紹一種比較穩(wěn)妥的方式（ajax方式就不介紹了）：

先讓表單提交，提交后還是回到彈出的那個(gè)頁(yè)面，或者一個(gè)其它的頁(yè)面，然后在該頁(yè)面中做判斷，如果后臺(tái)信息處理成功，那么就執(zhí)行原頁(yè)面的重載，然后關(guān)閉窗口。當(dāng)然有些開發(fā)人員說，前面的那種方式，一直在項(xiàng)目中使用沒有發(fā)現(xiàn)什么問題，那我告訴你，那是因?yàn)槟惚容^幸運(yùn)，后臺(tái)處理速度很快，列表重載的時(shí)候，后臺(tái)已經(jīng)處理完了，但是一旦后臺(tái)處理慢了，客戶就該找麻煩了。

21，界面問題是當(dāng)前web開發(fā)領(lǐng)域（不要認(rèn)為只是asp、jsp和或者php等的開發(fā)，大的說可以包括ASP.NET以及J2EE等）最為棘手的問題之一，而且大部分開發(fā)人員，不懂得該如何去解決界面問題，而且經(jīng)常會(huì)遇到一些不可思議的問題。其實(shí)我告訴你，界面問題的確有一些是非常奇怪的，但是不要因?yàn)檫@樣，就不去深究問題的原因所在，我在這些年的開發(fā)中，遇到了不少的離奇的界面問題，包括自己碰到的和別人讓我去解決的，不過我發(fā)現(xiàn)，在這些離奇的問題背后，體現(xiàn)的卻是我們大部分開發(fā)人員，在界面能力和素養(yǎng)方面的一些問題，例如有些人就是太粗心，而有些人則是缺乏界面基礎(chǔ)知識(shí)等等。成為界面高手不是目的，培養(yǎng)解決界面問題的能力和素養(yǎng)才是最關(guān)鍵的。

22，在連接標(biāo)簽中加入onclick操作是很常用的一種方式，例如：人員管理

一般情況，這種方式是沒有問題，但是如果頁(yè)面內(nèi)容比較長(zhǎng)，出現(xiàn)了上下滾動(dòng)條的時(shí)候，這種方式就會(huì)出一些問題，主要是由于href的#造成的，我們知道錨的作用就是讓頁(yè)面定位并移動(dòng)到錨處，上面的代碼開發(fā)人員的意圖主要是想點(diǎn)擊的時(shí)候不要執(zhí)行鏈接href，所以寫一個(gè)#，但是#對(duì)于滾動(dòng)的頁(yè)面，會(huì)在執(zhí)行onclick的同時(shí)，頁(yè)面出現(xiàn)移動(dòng)定位行為，這樣的用戶體驗(yàn)是很不好，解決方式有如下幾種：

人員管理人員管理

建議使用void0方式，因?yàn)閞eturn方式，有時(shí)會(huì)影響click事件的傳播，尤其是returnfalse的時(shí)候。23，在WindowXP系統(tǒng)中，我們經(jīng)常奇怪為什么我們使用的Javascript控制窗口尺寸和位置的一些操作，而IE竟然沒有全部支持呢，例如下面的代碼：

window.open("about:blank","","width=10000,height=15000");

按道理應(yīng)該彈出一個(gè)10000x15000的大窗口，然后實(shí)際上IE給我們彈出的不過是一個(gè)和瀏覽器尺寸大小一致的窗口，為什么會(huì)這樣呢？其實(shí)我們理解微軟，如果不這樣限制，系統(tǒng)可能會(huì)因?yàn)榇罅康倪@種代碼而最終崩潰，當(dāng)然微軟的IE也提供了配置入口，配置是否進(jìn)行限制，具體入口為：

對(duì)一般站點(diǎn)類說，默認(rèn)都是禁用的，只要打開就可以了。

24，我們頁(yè)面中經(jīng)常會(huì)以post方式提交表單數(shù)據(jù)，提交之后，如果我們刷新頁(yè)面，IE中一般都會(huì)提示如下圖所示的信息：

如果避免這種提示出現(xiàn)，一種是編程上去解決，即表單提交后，不要從其它窗口對(duì)該窗口繼續(xù)執(zhí)行l(wèi)ocation的reload方法等等，最好是使用location的href屬性或者assign、replace等方法），在IE的高級(jí)選項(xiàng)中，也有一個(gè)條目可以設(shè)置重定向表單提交時(shí)是否給出提示信息，但是設(shè)置了之后，沒有什么效果，因此也就不過多介紹了。

25，現(xiàn)在很流行div+css方式的布局，的確這樣做界面框架的靈活性大為增加，可以說什么布局都能出的來，而且目前的ajax方式的輕量級(jí)portal框架基本上都采用的是div+css的布局方式，但是也不要過度的使用，或者什么場(chǎng)合下都使用，例如對(duì)于一個(gè)中大型的項(xiàng)目而言，要考慮的不僅僅是布局這樣的事情，還要考慮界面框架的許多東西，在這種情況下，還是使用模板的方式比較好，事實(shí)上div+css是一種布局，而模板是一種“框架”，兩者可以結(jié)合使用，至于能結(jié)合到什么程度，就看你的實(shí)際本領(lǐng)了。

26，做為一個(gè)項(xiàng)目經(jīng)理、產(chǎn)品經(jīng)理或者是技術(shù)總監(jiān)，你應(yīng)該要重視界面方面的問題了，想想吧我們現(xiàn)在的開發(fā)人員，大都能很快的完成后臺(tái)邏輯的開發(fā)，但是到了界面展現(xiàn)卻是捉襟見肘，界面效果和易用性做的都不到位，界面方面都調(diào)整好了，需要的時(shí)間往往并不比后臺(tái)邏輯開發(fā)用的時(shí)間少多少，相信你見到過吧，為了調(diào)試一個(gè)界面中的奇怪的問題，往往會(huì)用掉一個(gè)人一兩天的時(shí)間，如果再不重視界面技術(shù)的學(xué)習(xí)和素養(yǎng)的培養(yǎng)，我們的路還能走多遠(yuǎn)。

又七七八八的為大家總結(jié)了一下我在web開發(fā)尤其是界面開發(fā)上的一些經(jīng)驗(yàn)，這些都是摸爬滾打出來的，可以算作是經(jīng)驗(yàn)，但不一定就特別的正確，許多東西還需要你自己去實(shí)踐、檢驗(yàn)和再總結(jié)，如果我寫的這些東西，對(duì)你而言哪怕只是有一點(diǎn)的用處，我都是很欣慰的，另外一點(diǎn)我需要說的，就是我們應(yīng)該逐步走出大師崇拜的陰影，不要再津津樂道于敏捷開發(fā)、極限編程等等，面對(duì)那些國(guó)外的大師，我們更為重要的是學(xué)習(xí)他們身上的精神和品質(zhì)，而不是做一個(gè)忠實(shí)的傳道士，對(duì)于這些精神和品質(zhì)，我們中華民族實(shí)際上很早就有了，只是到現(xiàn)在已經(jīng)少的可憐的，但并不是說我們就沒有希望了，看看當(dāng)今科學(xué)界和各個(gè)行業(yè)的民族精英們，看看他們骨子里面的那種精神，是很值得我們崇敬和學(xué)習(xí)的。

友情提示：本文中關(guān)于《web手工測(cè)試的經(jīng)驗(yàn)總結(jié)》給出的范例僅供您參考拓展思維使用，web手工測(cè)試的經(jīng)驗(yàn)總結(jié)：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《web手工測(cè)試的經(jīng)驗(yàn)總結(jié)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://www.hmlawpc.com/gongwen/673092.html

• 上一篇：webService基礎(chǔ)總結(jié)
• 下一篇：BBS論壇開發(fā)經(jīng)驗(yàn)總結(jié)