Web端測試以及發展方向（人羣皆宜）

入行測試一段時間了，說下Web端測試注意的地方和我的發展方向。今天分享一些心得，一部分是我面試碰到一個面試官分享個人資料，但願對你們有用。

網頁端的測試：
目前網頁端的測試，主要是指針對 Web、H5端的測試。
功能測試：
比對原型、需求，設計測試用例，進行用例評審，完成功能測試。功能測試是保證項目正常運行的第一要求。
兼容性測試：
兼容性測試能夠從瀏覽器兼容性、屏幕兼容性、系統兼容性 三個方面去考慮。
一、瀏覽器兼容性（包含設備）：
在正常使用中，用戶會使用千差萬別的瀏覽器，包括不一樣機型的不一樣瀏覽器型號的瀏覽器，可謂是各類排列組合。不一樣的瀏覽器內核會形成不一樣的兼容性問題，有的兼容性問題會影響主功能的進行，因此網頁端的兼容性測試是很是重要的一環。
Web瀏覽器兼容：Chrome、Safari、火狐、360瀏覽器、QQ瀏覽器、IE八、IE九、IE十、IE十一、Edge等
H5瀏覽器兼容：qq瀏覽器（android、iOS）、uc瀏覽器、safari（iOS八、IOS10）、百度瀏覽器、手機百度、搜狗搜索、小米瀏覽器、魅族瀏覽器等
二、屏幕兼容性：
Web 端：大屏幕（20寸）—— 小屏幕（13寸）
H5 端：iphone5——iPhoneX，iPad mini——iPad四、3寸android——5寸android機
三、系統兼容：
iOS8-iOS11 ，android 4.2-android 9.0。有的時候新出的系統和老系統會有兼容性的問題。

如何判斷 一個Bug是來自前端開發仍是後端開發的？
一、頁面數據不對。用fiddler、Charles等輔助工具查看接口返回值，若是返回值錯誤，形成的前端顯示的數據不正確，則是後端的問題，反之，就是前端的顯示問題。
二、頁面顯示兼容性問題，由css形成的兼容性問題，屬於前端問題。
三、先後端結合，根據本身的經驗去判斷。針對先後端結合的問題，要具體問題具體分析。

四、在看接口報錯時學會看HTTP響應值，40四、500、200、400、502等，看響應是否有數據。若是有數據前端沒有渲染，即前端問題，反之。

常見網頁端測試工具：
一、Chrome開發者工具
經常使用於模擬手機端頁面、查看接口返回值、修改元素顯示的數據、模擬網速、清除或篡改Cookies等。
二、Fiddler或Charles
數據抓包工具，經常使用於攔截、篡改請求，查看接口返回。一些登陸請求頁面抓不到接口，須要用抓包工具。

常見問題類型分析：
一、功能性缺陷
因爲邏輯失誤、文案錯誤等致使的跟功能性直接相關的缺陷。
二、 CSS屬性 不支持。
常見bug：頁面的部分元素無視覺效果，或樣式錯亂的明顯可見。
相比較而言H5端的兼容性問題相對少一些，主要是Web端的IE兼容性問題較多。
三、js報錯
從Chrome開發者工具的Console能夠直接看到的報錯
四、元素佈局適配不一樣屏幕大小，形成的影響。
常見bug：某個機型上的按鈕點擊後無效果，緣由極可能是頁面的其餘元素佔屏的寬高 跟隨屏幕大小變更，覆蓋了想要點擊的元素。
五、併發
常見bug：提交表單或發送請求的時候，快速點擊按鈕，形成並發現象。
這裏第一個要查看請求是否有發送兩次，前端是否有作快速點擊的防禦。第二個查看後端面對併發處理，是否正確。

 

控件類測試：（面試大殺器，如下拉框爲例，後續更新...）

下拉框通常多個一塊兒出現，實現篩選功能。須要注意篩選後是否當即生效，以及組合篩選的狀況結果是否符合預期。常見測試點以下：

一、 默認顯示是否正確，好比有的顯示所有，有的默認選中某一項，有的顯示「請選擇」。

二、 切換item，下拉框顯示項內容和排序是否正確，不一樣瀏覽器，下拉框顯示是否有變形等。

三、 下拉框中選項超出設定值的，是否有滑動條，上下滑動，仍是左右滑動等。

四、 下拉框彈出時，鼠標點擊控件外區域/選項/下拉框，下拉框可否收回。

五、 當下拉框選項不少時，是否有被底層覆蓋的狀況。

六、 下拉框數據被存儲後，其餘地方顯示時，傳遞的數據正確性檢查。好比下拉框選項按數字傳遞，而其餘頁面顯示時應該顯示對應的文字。

七、 組合篩選的狀況，有級聯操做的，只有選擇了前一個數據後，才能進行下一個的選擇。好比省市之間，只有選擇了省份，才能繼續選擇市，不然市不可選。

八、 組合下拉框實現的篩選功能正確性檢查。

 

網頁端 測試同窗目前的技術提高方向：
一、前端WEB UI自動化
selenium +webdriver+Java/selenium + webdriver +python，屬於不用的語言，java學習成本比較大點，不過java的maven項目配置pom.xml很方便，不須要下載各類包，直接引入就行;Python語法簡單，不過我還沒學會，哈哈。
二、性能測試
遠程鏈接+抓包分析，工具諸如：fiddler，Charles，網頁端性能測試在線測試工具：Page Speed、Chrome開發者工具等。相比於客戶端測試，網頁端主要關注的是響應時間和頁面元素的渲染時間。
三、接口測試
測試工具postman、jmeter等或者利用（Java的 httpClent，Python的 requests）編寫自動化測試腳本。
四、單元測試、壓力測試、安全性測試等接觸的比較少，就不作解釋了。

 

寄語：
1.測試仍是要學代碼的，不能渾渾噩噩的過日子。

2.除了一些代碼、工程方面的方向的提高外，善於總結測試過程當中的問題，改進測試流程，督促開發質量，可以更好的推進產品質量，也是一種提高方向。

3.感受軟件行業溝通交流仍是最重要，開發也好，測試也罷，產品也行，溝通佔首位吧。