從實習(xí)到入職，轉(zhuǎn)眼已經(jīng)在網(wǎng)頁端測試了將近2年的時間。
偶爾跟一些客戶端的同學(xué)溝通和學(xué)習(xí)的時候，他們很好奇網(wǎng)頁端測試是怎么進行測試的，需要注意哪些問題，這里稍微總結(jié)下，希望對自己和其他小伙伴都有一定程度的提升。
網(wǎng)頁端的測試：
目前網(wǎng)頁端的測試，主要是指針對?Web、H5端的測試。
功能測試：
比對交互稿、需求稿，設(shè)計測試用例，進行用例評審、BugBash等，完成功能測試。功能測試是保證項目正常運行的第一要求。
兼容性測試：
兼容性測試可以從瀏覽器兼容性、屏幕兼容性、系統(tǒng)兼容性 三個方面去考慮。
1、瀏覽器兼容性（包含設(shè)備）：
在正常使用中，用戶會使用千差萬別的瀏覽器，包括不同機型的不同瀏覽器型號的瀏覽器，可謂是各種排列組合。不同的瀏覽器內(nèi)核會造成不同的兼容性問題，有的兼容性問題會影響主功能的進行，所以網(wǎng)頁端的兼容性測試是非常重要的一環(huán)。
Web瀏覽器兼容：Chrome、Safari、360瀏覽器、QQ瀏覽器、IE8、IE9、IE10、IE11、Edge等
H5瀏覽器兼容：qq瀏覽器（android、iOS）、uc瀏覽器、safari（iOS8、IOS10）、百度瀏覽器、手機百度、搜狗搜索、小米瀏覽器、魅族瀏覽器等
2、屏幕兼容性：
Web?端：大屏幕（20寸）——?小屏幕（13寸）
H5?端：iphone5——iPhoneX，iPad?mini——iPad4、3寸android——5寸android機
3、系統(tǒng)兼容：
iOS8-iOS11?，android 4.2-android 8.0。有的時候新出的系統(tǒng)和老系統(tǒng)會有兼容性的問題。
如何判斷?一個Bug是來自前端開發(fā)還是后端開發(fā)的？
1、頁面數(shù)據(jù)不對。用fiddler、Charles等輔助工具查看接口返回值，如果返回值錯誤，造成的前端顯示的數(shù)據(jù)不正確，則是后端的問題，反之，就是前端的顯示問題。
2、頁面顯示兼容性問題，由css造成的兼容性問題，屬于前端問題。
3、前后端結(jié)合，例如：分享增加1次抽獎機會。針對前后端結(jié)合的問題，要具體問題具體分析
常見網(wǎng)頁端測試工具：
1、Chrome開發(fā)者工具
常用于模擬手機端頁面、查看接口返回值、修改元素顯示的數(shù)據(jù)、模擬網(wǎng)速、清除或篡改Cookies等。
2、Fiddler或Charles
數(shù)據(jù)抓包工具，常用于攔截、篡改請求，查看接口返回。
常見問題類型分析：
1、功能性缺陷
由于邏輯失誤、文案錯誤等導(dǎo)致的跟功能性直接相關(guān)的缺陷。
2、?CSS屬性?不支持。
常見bug：頁面的部分元素?zé)o視覺效果，或樣式錯亂的明顯可見。舉個例子，flex布局在android4.3的機型上就不支持，這時需要開發(fā)監(jiān)控在android4.3系統(tǒng)的時候，換另外一種實現(xiàn)方式。
***相比較而言H5端的兼容性問題相對少一些，主要是Web端的IE兼容性問題較多。
2、js報錯
從Chrome開發(fā)者工具的Console可以直接看到的報錯
3、元素布局適配不同屏幕大小，造成的影響。
常見bug：某個機型上的按鈕點擊后無效果，原因很可能是頁面的其他元素占屏的寬高?跟隨屏幕大小變動，覆蓋了想要點擊的元素。
4、并發(fā)
常見bug：提交表單或發(fā)送請求的時候，快速點擊按鈕，造成并發(fā)現(xiàn)象。
這里第一個要查看請求是否有發(fā)送兩次，前端是否有做快速點擊的防護。第二個查看后端面對并發(fā)處理，是否正確。
網(wǎng)頁端?測試同學(xué)目前的技術(shù)提升方向：
1、前端WEB?UI自動化
selenium?+webdriver+TestNG或selenium?+webdriver+Unittest等，屬于常見的組合，用于UI自動化工程的搭建。
2、性能測試
遠程連接+抓包分析，工具諸如：fiddler，Charles，網(wǎng)頁端性能測試在線測試工具：Page?Speed、Chrome開發(fā)者工具等。相比于客戶端測試，網(wǎng)頁端主要關(guān)注的是響應(yīng)時間和頁面元素的渲染時間。
3、接口測試
測試工具postman等或者利用（Java的?httpClent，Python的?requests）編寫測試腳本。
4、單元測試、壓力測試、安全性測試等接觸的比較少，就不做解釋了。
除了一些代碼、工程方面的方向的提升外，善于總結(jié)測試過程中的問題，改進測試流程，督促開發(fā)質(zhì)量，能夠更好的推動產(chǎn)品質(zhì)量，也是一種提升方向。
