PS：本文轉(zhuǎn)載自黑馬測(cè)試高贊知乎文章

鏈接： https://www.zhihu.com/question/280030160/answer/2489224153

前端項(xiàng)目也叫web端項(xiàng)目（通俗講就是網(wǎng)頁上的功能）是我們能夠在屏幕上看到并產(chǎn)生交互的體驗(yàn)。

前端項(xiàng)目如何做測(cè)試？

要講清楚這個(gè)問題，先需要你對(duì)測(cè)試流程現(xiàn)有一個(gè)全局的了解，先上一張測(cè)試流程圖：

接下來下面我們從需求階段-開發(fā)階段-測(cè)試階段-發(fā)布階段 共四個(gè)環(huán)節(jié)來還原一次完整的測(cè)試過程。

備注：前端項(xiàng)目如何測(cè)試，在以上四個(gè)環(huán)節(jié)中的"測(cè)試階段"有詳細(xì)闡述

一、需求階段

在項(xiàng)目開始后，產(chǎn)品同學(xué)提出了若干需求，經(jīng)過需求評(píng)審之后，最終給出了產(chǎn)品需求計(jì)劃和迭代文檔。

在這個(gè)階段，測(cè)試跟開發(fā)同學(xué)要參與需求評(píng)審，在需求評(píng)審的過程中，開發(fā)同學(xué)會(huì)開始思考怎么做。

作為測(cè)試，有哪些不理解的，要及時(shí)提出來，讓產(chǎn)品經(jīng)理給出更清晰的解答。

最終，經(jīng)過需求評(píng)審和澄清，我們了解了需求的細(xì)節(jié)，有哪些功能，要測(cè)哪幾個(gè)點(diǎn)，要做到大概心里有數(shù)。

二、開發(fā)階段

需求已經(jīng)清楚了，開發(fā)同學(xué)就要進(jìn)入開發(fā)了。同時(shí)呢，我們開始確定測(cè)試方案（工期評(píng)估、人力安排），根據(jù)需求編寫測(cè)試用例（一般使用xmind或excel，根據(jù)自己習(xí)慣和團(tuán)隊(duì)規(guī)范來選擇）。

為了防止測(cè)試用例遺漏，我們要做一次用例評(píng)審，邀請(qǐng)開發(fā)和產(chǎn)品經(jīng)理參加，拉齊各方對(duì)需求的理解，最終產(chǎn)出一份完整的測(cè)試用例。

三、測(cè)試階段

在測(cè)試階段，分為后端測(cè)試和前端測(cè)試，劃分如下：

1. 前端測(cè)試部分（用戶在前端的操作，包含前端樣式，交互效果等）

2. 后端測(cè)試部分（前端對(duì)后端的接口請(qǐng)求，包含增刪改查、數(shù)據(jù)處理的邏輯等）

說明：有些公司前后端測(cè)試分別由不同的團(tuán)隊(duì)或測(cè)試同學(xué)跟進(jìn)，有些公司前后端測(cè)試都由同一個(gè)團(tuán)隊(duì)或同一個(gè)人跟進(jìn)。

后端測(cè)試一般會(huì)先于前端測(cè)試介入，為啥要后端測(cè)試先開始呢？

來看一個(gè)小片段（下例中，前后端測(cè)試不是同一個(gè)人）：

開始測(cè)試了，前端測(cè)試同學(xué)一看，頁面沒有展示預(yù)期的數(shù)據(jù)。好家伙，順手給前端小哥提了一個(gè)bug。
前端開發(fā)經(jīng)過排查發(fā)現(xiàn)直喊冤：后端沒返回?cái)?shù)據(jù)，臣妾也做不到吶?；仡^便將bug指給后端研發(fā)小哥了。
后端小哥一看：這個(gè)bug剛剛已經(jīng)有后端測(cè)試同學(xué)提了 ，別著急哈，正在解決。
前端測(cè)試同學(xué)心想：敢情我這是白忙活了呀，怎么避免這個(gè)問題呢？
后來，經(jīng)過大家的討論決定：后端測(cè)試先開始，保證接口基本功能正常后前端測(cè)試再介入，避免重復(fù)勞動(dòng)，提高工作效率。

首先開始的是后端測(cè)試，后端的測(cè)試范圍如下：

1、功能測(cè)試

輸入（入?yún)ⅲ┑臏y(cè)試：必傳和非必傳、參數(shù)長(zhǎng)度、數(shù)值類型、正常和異常、有、無和為空，以及參數(shù)組合。
輸出（返回）的測(cè)試：主要看正常返回的響應(yīng)內(nèi)容，和異常返回的響應(yīng)碼和提示語。

2、異常測(cè)試

重復(fù)提交：多次重復(fù)提交，連續(xù)重復(fù)提交，特別是涉及到支付、交易金額相關(guān)。
并發(fā)：兩個(gè)以上用戶操作同一場(chǎng)景，爭(zhēng)奪資源、死鎖等情況。
事務(wù)測(cè)試：多個(gè)連續(xù)步驟才能完成的業(yè)務(wù)流程。

3、性能測(cè)試（一般來說新接口需要做，老接口根據(jù)實(shí)際需求來定）

主要看響應(yīng)時(shí)間、吞吐量、并發(fā)數(shù)、服務(wù)器資源使用率、cpu、內(nèi)存、io、network等

這些測(cè)試內(nèi)容基本都可以通過接口測(cè)試來完成，接口測(cè)試的工具推薦Postman。

接口穩(wěn)定之后，可以寫成自動(dòng)化測(cè)試，方便后續(xù)的回歸測(cè)試。

這里用到的自動(dòng)化測(cè)試框架，小編使用的是java中的Testng（常用的還有JUnit4），不同的語言有各自的測(cè)試框架（比如python中的Unittest和Pytest）【本文最后會(huì)分享他們的區(qū)別】。

后端測(cè)試完成一遍冒煙測(cè)試之后，前端測(cè)試就可以開始了（重點(diǎn)來了，重點(diǎn)來了）

前端的測(cè)試范圍如下：

1、UI測(cè)試

驗(yàn)證所有頁面字體的風(fēng)格是否一致
背景顏色應(yīng)該與字體顏色和前景顏色相搭配
圖片的大小和質(zhì)量是否正常

2、功能測(cè)試（也稱為e2e測(cè)試）

基本的功能是否符合預(yù)期
模擬用戶操作，交互流程是否正確

3、兼容性測(cè)試

平臺(tái)兼容性，使用用不同的 操作系統(tǒng)平臺(tái)對(duì)網(wǎng)站進(jìn)行測(cè)試。最常見的有 Windows、macOS、 Linux 等。
瀏覽器兼容性， 查看不同瀏覽器中的兼容性問題。
分辨率測(cè)試，在不同分辨率下的顯示效果，避免分辨率低時(shí)界面文字顯示太大，而分辨率高時(shí)又有些文字顯示時(shí)太小。

4、性能測(cè)試

頁面首次打開的耗時(shí)
頁面加載時(shí)間
頻繁操作是否奔潰

5、穩(wěn)定性測(cè)試

頁面是否白屏
掉電重啟,斷網(wǎng)重連后是否正常
長(zhǎng)時(shí)間運(yùn)行是否會(huì)奔潰

6、易用性測(cè)試

常用快捷鍵 （刷新，關(guān)閉等）
常用習(xí)慣性操作（回車搜索）
便捷性功能（記住密碼等）

在測(cè)試的過程中，要對(duì)照測(cè)試用例來執(zhí)行，避免遺漏。

每執(zhí)行完一個(gè)測(cè)試用例，要記錄實(shí)際的效果，不符合預(yù)期的要在禪道（或其它項(xiàng)目管理平臺(tái)）記錄bug，并指給對(duì)應(yīng)的開發(fā)同學(xué)。

等所有的bug都解完了，需要完整的流程走一遍（回歸測(cè)試）。

四、發(fā)布階段

前后端的測(cè)試case都執(zhí)行完了，bug也修改好了，就可以發(fā)送測(cè)試報(bào)告了。

一切妥當(dāng)之后，就等一個(gè)良辰吉日將項(xiàng)目發(fā)布上線。

所謂吉日，一般要避免周五或節(jié)假日的前幾天，因?yàn)槿f一上線后有問題，研發(fā)小哥們都在休息，找不到人修復(fù)，影響到用戶體驗(yàn)可就要挨老板批了。

所謂良辰，一般是在夜黑風(fēng)高的晚上，因?yàn)檫@個(gè)時(shí)候用戶基本休息了，萬一上線后有問題及時(shí)回滾就行了，不會(huì)影響到用戶體驗(yàn)。煞費(fèi)苦心，一切都是為了用戶著想！

上線后，一般會(huì)通過灰度放量，觀察線上效果，沒有問題再逐步放量，最終完成項(xiàng)目的全量發(fā)布。

現(xiàn)在，題主的有關(guān)“『前端項(xiàng)目』是如何做測(cè)試的?”已經(jīng)有了答案。

接下來回復(fù)下題主的補(bǔ)充問題

1、前端測(cè)試覆蓋率基本上很少有100%的,那么哪些代碼需要測(cè)試?

沒錯(cuò)，前端測(cè)試覆蓋率幾乎不可能到100%。

正因?yàn)槿绱耍瑸榱吮ＷC項(xiàng)目質(zhì)量，不僅需要測(cè)試前端代碼的展示效果，也要測(cè)試后端代碼的處理邏輯。

2、有沒有e2e測(cè)試?

e2e全稱 end-to-end，其實(shí)就是模擬用戶行為，屬于是前端測(cè)試的內(nèi)容。可以通過編寫腳本或手動(dòng)來完成，幾乎所有的項(xiàng)目，業(yè)務(wù)都在不斷更新的。業(yè)務(wù)變了，模擬用戶行為也會(huì)隨之改變。因此編寫腳本性價(jià)比不高，所以通常是由人工來完成這項(xiàng)測(cè)試工作。

3、前端項(xiàng)目有專業(yè)的測(cè)試人員嗎？

大廠有細(xì)分，會(huì)分為前端測(cè)試和后端測(cè)試（也叫服務(wù)端測(cè)試），分別保障前端和后端的質(zhì)量。

前端測(cè)試人員主要負(fù)責(zé)頁面展示和交互的正確性。

后端測(cè)試人員主要負(fù)責(zé)接口請(qǐng)求的正確性。

4、測(cè)試框架是什么？

小編自己在公司用的是java中的TestNG。

如果是使用python語言，也有對(duì)應(yīng)的測(cè)試框架，下面分別說一下Java和Python的測(cè)試框架。

Java常用的測(cè)試框架

有JUnit和TestNG，二者的對(duì)比如下圖：

相對(duì)于JUnit4來說，TestNG功能更加豐富。

從實(shí)際使用的角度來說，參數(shù)化的設(shè)置及功能，以及處理有上下依賴關(guān)系的測(cè)試時(shí)，JUnit測(cè)試框架有著明顯的不足。因此，一般都會(huì)使用TestNG（推薦）。

python常用的測(cè)試框架

常用的有Unittest、Pytest它們的區(qū)別如下，各有特色，可以根據(jù)自己的業(yè)務(wù)需求來選擇。

python測(cè)試框架學(xué)習(xí)視頻推薦：

至于java和python哪個(gè)更適合做測(cè)試？

建議結(jié)合自己的基礎(chǔ)能力和公司的語言習(xí)慣來選擇。

如果還是糾結(jié)，推薦移步下面的貼子，相信你看了會(huì)有啟發(fā)

《Python 和Java 哪個(gè)更適合做自動(dòng)化測(cè)試？189 贊同 · 32 評(píng)論回答》

https://www.zhihu.com/question/264353399/answer/2453360401

若你是對(duì)測(cè)試不太了解的測(cè)試小萌新，有太多太多對(duì)測(cè)試的疑惑（前途、薪資、技術(shù)含量、男生是否可以干.....），強(qiáng)烈推薦你觀看《測(cè)試小白必看：學(xué)習(xí)軟件測(cè)試必問的100個(gè)問題，從此貼開始》，相信能掃除掉你心目中90%以上的常見問題。

《100個(gè)常見問題鏈接》：http://bbs.itheima.com/thread-507947-1-1.html

最后，為方便大家自學(xué)軟件測(cè)試，特意給大家準(zhǔn)備了一份13G的超實(shí)用干貨學(xué)習(xí)資源，涉及的內(nèi)容非常全面。

包括軟件學(xué)習(xí)路線圖，黑馬50多天的上課視頻、16個(gè)突擊實(shí)戰(zhàn)項(xiàng)目，80余個(gè)軟件測(cè)試用軟件，37份測(cè)試文檔，70個(gè)軟件測(cè)試相關(guān)問題，40篇測(cè)試經(jīng)驗(yàn)級(jí)文章，上千份測(cè)試真題分享,還有2020軟件測(cè)試面試寶典，還有軟件測(cè)試求職的各類精選簡(jiǎn)歷，希望對(duì)大家有所幫助…..?

《2022黑馬測(cè)試學(xué)習(xí)路線圖鏈接》：http://bbs.itheima.com/thread-405757-1-1.html