1. e2e到底在解決什么問(wèn)題——從“開(kāi)發(fā)自測(cè)”到“真實(shí)鏈路驗(yàn)證”做軟件開(kāi)發(fā)這幾年我越來(lái)越覺(jué)得有個(gè)詞被大家聊得很多但真正聊透的很少這個(gè)詞就是e2e。業(yè)內(nèi)全稱(chēng)叫end-to-end也就是端到端測(cè)試。我第一次接觸e2e還是在一家做電商中臺(tái)的公司當(dāng)時(shí)團(tuán)隊(duì)里單元測(cè)試覆蓋率已經(jīng)做到60%以上接口測(cè)試也有一批穩(wěn)定的用例按理說(shuō)質(zhì)量保障體系不算差可每次上線(xiàn)前回歸測(cè)試依然要拉上五六個(gè)人手動(dòng)點(diǎn)一遍頁(yè)面一測(cè)就是一整天。后來(lái)我才慢慢想明白單元測(cè)試和接口測(cè)試驗(yàn)證的都是“某個(gè)函數(shù)對(duì)不對(duì)”“某個(gè)接口返回正不正?！钡脩?hù)根本不在乎這些。用戶(hù)在乎的是打開(kāi)頁(yè)面能不能看到商品、加購(gòu)按鈕點(diǎn)了有沒(méi)有反應(yīng)、提交訂單之后能不能跳到支付頁(yè)。這條鏈路從瀏覽器地址欄輸入網(wǎng)址開(kāi)始到用戶(hù)在頁(yè)面上完成一系列操作再到后端返回?cái)?shù)據(jù)、前端渲染結(jié)果中間經(jīng)過(guò)了多少個(gè)環(huán)節(jié)、多少個(gè)服務(wù)、多少次網(wǎng)絡(luò)請(qǐng)求單元測(cè)試完全覆蓋不到接口測(cè)試也只能覆蓋其中一部分。而e2e測(cè)試恰恰就是用來(lái)填補(bǔ)這個(gè)空白的——它模擬真實(shí)用戶(hù)的操作從瀏覽器層面把整條鏈路完整走一遍。我在實(shí)際項(xiàng)目里最深的感受是e2e測(cè)試的本質(zhì)不是“多寫(xiě)幾個(gè)測(cè)試用例”而是把“驗(yàn)證對(duì)象”從代碼層面提升到了產(chǎn)品層面。同一個(gè)功能開(kāi)發(fā)自測(cè)時(shí)可能只驗(yàn)證“邏輯能跑通”但e2e要驗(yàn)證的是“用戶(hù)能不能順暢地用起來(lái)”。舉個(gè)例子注冊(cè)流程涉及前端表單校驗(yàn)、短信驗(yàn)證碼接口、用戶(hù)中心創(chuàng)建賬號(hào)、歡迎郵件發(fā)送、前端路由跳轉(zhuǎn)任何一個(gè)環(huán)節(jié)出問(wèn)題用戶(hù)就會(huì)卡住。這種問(wèn)題靠代碼review看不出來(lái)靠單測(cè)也測(cè)不出來(lái)只有e2e能把整條鏈路從上到下壓一遍。那e2e適合誰(shuí)來(lái)學(xué)、誰(shuí)來(lái)用我的建議是只要你的項(xiàng)目有用戶(hù)界面前端、后端、測(cè)試、甚至運(yùn)維都值得了解。前端寫(xiě)e2e用例來(lái)驗(yàn)證自己負(fù)責(zé)的頁(yè)面功能后端通過(guò)e2e看清接口在真實(shí)鏈路中的表現(xiàn)測(cè)試同學(xué)可以用e2e把重復(fù)的回歸工作自動(dòng)化掉運(yùn)維則可以拿e2e做發(fā)布后的冒煙驗(yàn)證。我自己就是從測(cè)試崗轉(zhuǎn)開(kāi)發(fā)崗的過(guò)程中徹底把e2e吃透的這一套東西對(duì)我的幫助遠(yuǎn)超預(yù)期。2. 方案設(shè)計(jì)與技術(shù)選型不追逐潮流先看團(tuán)隊(duì)與業(yè)務(wù)2.1 先搞清楚你要用e2e守哪條防線(xiàn)很多團(tuán)隊(duì)一上來(lái)就急著選工具、寫(xiě)用例結(jié)果寫(xiě)到一半發(fā)現(xiàn)方向就錯(cuò)了。我接觸過(guò)不少項(xiàng)目e2e測(cè)試用例寫(xiě)了一兩百條跑一次要四十多分鐘還經(jīng)常因?yàn)楦鞣N隨機(jī)因素掛掉最后整個(gè)團(tuán)隊(duì)對(duì)e2e失去信心測(cè)試資產(chǎn)淪為擺設(shè)。問(wèn)題出在哪出在大家沒(méi)想明白e2e應(yīng)該守的是“核心業(yè)務(wù)主流程”不是所有功能細(xì)節(jié)。我在做方案設(shè)計(jì)時(shí)第一步從來(lái)不是選工具而是先梳理業(yè)務(wù)鏈路。拿電商項(xiàng)目舉例核心主流程就是“搜索商品→查看詳情→加入購(gòu)物車(chē)→提交訂單→支付→查看訂單狀態(tài)”這幾個(gè)環(huán)節(jié)串起來(lái)就是用戶(hù)最常走的那條路也是出問(wèn)題影響最大的那條路。至于后臺(tái)管理系統(tǒng)里的某個(gè)列表排序功能、某個(gè)表單校驗(yàn)的邊界情況這些交給單元測(cè)試和接口測(cè)試去覆蓋就夠了強(qiáng)行寫(xiě)成e2e只會(huì)讓維護(hù)成本爆炸。這里有個(gè)比例我用了很久覺(jué)得比較合理單測(cè)覆蓋底層邏輯和工具函數(shù)接口測(cè)試覆蓋API的入?yún)⒊鰠⒑彤惓７种2e只覆蓋端到端的核心業(yè)務(wù)鏈路和關(guān)鍵用戶(hù)場(chǎng)景。三層各司其職e2e用例數(shù)量不用很多但每條都要能代表一類(lèi)真實(shí)用戶(hù)行為。寧可少而精不要多而爛這是我踩過(guò)坑之后總結(jié)的第一條經(jīng)驗(yàn)。2.2 主流框架橫評(píng)Cypress、Playwright、Selenium怎么選等到真正要選框架的時(shí)候我發(fā)現(xiàn)市面上的選擇其實(shí)不少但差異還是很大的。這里把我這兩年用過(guò)的幾個(gè)主流方案做個(gè)橫向?qū)Ρ确奖愦蠹疑僮邚澛贰？蚣苷Z(yǔ)言支持運(yùn)行速度調(diào)試體驗(yàn)社區(qū)活躍度適合場(chǎng)景SeleniumJava/Python/JS等較慢一般很高兼容性測(cè)試、老項(xiàng)目維護(hù)CypressJavaScript/TypeScript快優(yōu)秀很高純前端項(xiàng)目、單頁(yè)應(yīng)用PlaywrightJS/Java/Python/.NET快優(yōu)秀增長(zhǎng)很快多瀏覽器、多語(yǔ)言項(xiàng)目Selenium是最老牌的方案生態(tài)成熟什么語(yǔ)言都能寫(xiě)但它有幾個(gè)老毛病讓我很難受一是運(yùn)行速度確實(shí)慢因?yàn)樗腔赪ebDriver協(xié)議每次命令都要經(jīng)過(guò)一層網(wǎng)絡(luò)通信二是等待策略寫(xiě)起來(lái)很繁瑣為了處理頁(yè)面異步加載我見(jiàn)過(guò)有人把Thread.sleep()寫(xiě)得到處都是用例穩(wěn)定性全靠運(yùn)氣。Selenium適合什么場(chǎng)景呢我的判斷是歷史包袱重的老項(xiàng)目或者必須用Java技術(shù)棧統(tǒng)一語(yǔ)言的團(tuán)隊(duì)否則不建議從零開(kāi)始選它。Cypress的優(yōu)勢(shì)在于它的架構(gòu)很新直接在瀏覽器內(nèi)運(yùn)行所以速度快、調(diào)試體驗(yàn)好time-travel調(diào)試功能是真的好用——測(cè)試失敗時(shí)可以看到每一步操作前頁(yè)面長(zhǎng)什么樣。但Cypress有個(gè)限制讓我最終沒(méi)選它它是綁定JavaScript生態(tài)的而且對(duì)多標(biāo)簽頁(yè)、跨域場(chǎng)景的處理比較弱。如果你的項(xiàng)目里有第三方登錄跳轉(zhuǎn)、微前端這種架構(gòu)Cypress用起來(lái)會(huì)有點(diǎn)憋屈。Playwright是我目前的主力選擇。它是微軟開(kāi)源的API設(shè)計(jì)得很現(xiàn)代最大特點(diǎn)是通過(guò)CDPChrome DevTools Protocol協(xié)議直接控制瀏覽器既保留了速度優(yōu)勢(shì)又不像Cypress那樣限制在瀏覽器內(nèi)運(yùn)行。它天生支持多標(biāo)簽頁(yè)、多瀏覽器Chromium、Firefox、WebKit、多語(yǔ)言還有自動(dòng)等待機(jī)制——你不必手動(dòng)寫(xiě)sleep它會(huì)持續(xù)輪詢(xún)直到元素可操作。最讓我滿(mǎn)意的是它的trace viewer功能可以錄制整個(gè)測(cè)試過(guò)程的所有網(wǎng)絡(luò)請(qǐng)求、DOM快照、控制臺(tái)日志排查問(wèn)題效率直接翻倍。2.3 我的推薦組合Playwright TypeScript GitHub Actions選型這件事沒(méi)有絕對(duì)標(biāo)準(zhǔn)但你得有一個(gè)默認(rèn)組合然后再根據(jù)項(xiàng)目情況調(diào)整。我目前在用的這套組合是Playwright TypeScript GitHub Actions或Jenkins。為什么用TypeScript而不是純JavaScript因?yàn)閑2e用例一旦多了頁(yè)面元素的定位符、接口返回的數(shù)據(jù)結(jié)構(gòu)、不同測(cè)試環(huán)境之間的配置這些都是有明確類(lèi)型約束的。用TypeScript寫(xiě)用例編輯器能幫你提前擋住低級(jí)錯(cuò)誤比如選擇器寫(xiě)錯(cuò)、配置字段拼錯(cuò)這類(lèi)問(wèn)題在純JS里只能等跑的時(shí)候才發(fā)現(xiàn)在TS里編譯階段就暴露了。為什么用GitHub Actions而不是其他CI工具因?yàn)榕渲煤?jiǎn)單、和GitHub倉(cāng)庫(kù)天然集成。push代碼時(shí)自動(dòng)觸發(fā)e2e測(cè)試PR時(shí)也能跑測(cè)試報(bào)告直接上傳到Actions的artifact里團(tuán)隊(duì)里任何人點(diǎn)開(kāi)就能看。如果是公司內(nèi)部部署的GitLab用GitLab CI也是完全一樣的思路關(guān)鍵是要把e2e測(cè)試嵌入到“提交流程→自動(dòng)測(cè)試→報(bào)告反饋”這個(gè)環(huán)里。3. 實(shí)操落地從零搭建一套可運(yùn)行的e2e測(cè)試3.1 項(xiàng)目初始化與目錄結(jié)構(gòu)設(shè)計(jì)理論講再多不如動(dòng)手搭一遍。我按自己的習(xí)慣帶大家從頭過(guò)一遍假設(shè)我們是一個(gè)Node.js項(xiàng)目用npm管理依賴(lài)。初始化項(xiàng)目并安裝Playwrightmkdir e2e-demo cd e2e-demo npm init -y npm install -D playwright/test npx playwright install chromium這里解釋一下上面幾條命令的目的。npm install -D playwright/test裝的是測(cè)試框架本身npx playwright install chromium是下載Chromium瀏覽器內(nèi)核。注意Playwright并不是直接用你電腦上裝的Chrome它會(huì)下載一套獨(dú)立的瀏覽器好處是版本可控、和環(huán)境隔離壞處是首次安裝比較慢。如果公司網(wǎng)絡(luò)受限可以通過(guò)設(shè)置環(huán)境變量PLAYWRIGHT_DOWNLOAD_HOST指定鏡像源這個(gè)細(xì)節(jié)后面會(huì)講到。然后是目錄結(jié)構(gòu)我推薦這樣組織e2e-demo/ ├── playwright.config.ts # Playwright配置文件 ├── tests/ # 測(cè)試用例目錄 │ ├── e2e/ │ │ ├── login.spec.ts # 登錄流程測(cè)試 │ │ ├── cart.spec.ts # 購(gòu)物車(chē)流程測(cè)試 │ │ └── checkout.spec.ts # 結(jié)算流程測(cè)試 ├── fixtures/ # 測(cè)試夾具、前置數(shù)據(jù) ├── utils/ # 公共工具函數(shù) │ ├── login.ts # 登錄操作封裝 │ └── dataFactory.ts # 測(cè)試數(shù)據(jù)工廠(chǎng) └── profiles/ # 多環(huán)境配置畫(huà)像 ├── profile1.ts # 測(cè)試環(huán)境配置 ├── profile2.ts # 預(yù)發(fā)布環(huán)境配置 └── index.ts # 配置讀取入口這個(gè)目錄結(jié)構(gòu)看上去簡(jiǎn)單但背后是有講究的。tests/e2e/專(zhuān)門(mén)放端到端用例和單元測(cè)試區(qū)分開(kāi)避免混在一起后CI流程不好拆。fixtures/放前置數(shù)據(jù)準(zhǔn)備邏輯比如創(chuàng)建測(cè)試用戶(hù)、清理歷史數(shù)據(jù)。utils/放公共操作封裝比如一個(gè)login函數(shù)可以被幾十個(gè)用例復(fù)用。最關(guān)鍵的profiles/放不同環(huán)境的配置畫(huà)像這個(gè)思想我后面會(huì)專(zhuān)門(mén)展開(kāi)講因?yàn)椤癳2e profile1”這個(gè)熱詞背后就是它在起作用。3.2 寫(xiě)第一條端到端測(cè)試用例登錄→搜索→加購(gòu)我習(xí)慣用一個(gè)簡(jiǎn)單的電商場(chǎng)景來(lái)演示最基本的e2e用例。這里不寫(xiě)具體業(yè)務(wù)代碼只保留核心邏輯作為通用模板。import { test, expect } from playwright/test; test(用戶(hù)登錄后可以搜索商品并加入購(gòu)物車(chē), async ({ page }) { // 1. 打開(kāi)首頁(yè) await page.goto(https://example.com); // 2. 執(zhí)行登錄 await page.getByPlaceholder(請(qǐng)輸入手機(jī)號(hào)).fill(13800138000); await page.getByPlaceholder(請(qǐng)輸入密碼).fill(test123456); await page.getByRole(button, { name: 登錄 }).click(); // 3. 等待登錄成功跳轉(zhuǎn) await expect(page).toHaveURL(/\/home/); // 4. 搜索商品 await page.getByPlaceholder(搜索商品).fill(無(wú)線(xiàn)鼠標(biāo)); await page.getByRole(button, { name: 搜索 }).click(); // 5. 點(diǎn)擊第一個(gè)商品進(jìn)入詳情 await page.locator(.product-item).first().click(); // 6. 加入購(gòu)物車(chē) await page.getByRole(button, { name: 加入購(gòu)物車(chē) }).click(); // 7. 斷言購(gòu)物車(chē)數(shù)量 await expect(page.locator(.cart-badge)).toHaveText(1); });這條用例雖然簡(jiǎn)單但已經(jīng)包含了e2e測(cè)試的核心要素。注意第2步和第3步之間Playwright會(huì)自動(dòng)等待頁(yè)面跳轉(zhuǎn)完成不需要手寫(xiě)等待代碼這是Playwright最省心的地方。第5步點(diǎn)擊第一個(gè)商品后頁(yè)面路由會(huì)切換新的頁(yè)面可能有異步渲染Playwright的自動(dòng)等待機(jī)制會(huì)等元素出現(xiàn)后再執(zhí)行點(diǎn)擊。還有幾個(gè)關(guān)鍵點(diǎn)我得特別提醒。第一定位元素優(yōu)先用getByRole和getByPlaceholder這類(lèi)語(yǔ)義化定位符不要一上來(lái)就寫(xiě)CSS選擇器。語(yǔ)義化定位符的穩(wěn)定性遠(yuǎn)高于CSS類(lèi)名因?yàn)榍岸烁臉邮筋?lèi)名太頻繁了而按鈕的文案、輸入框的placeholder一般不會(huì)輕易改。第二每次操作之后要有斷言不要等一大串操作全部執(zhí)行完再斷言這樣出了問(wèn)題很難定位是哪一步掛的。第三登錄操作要抽成公共函數(shù)別在每條用例里重復(fù)寫(xiě)一遍手機(jī)號(hào)密碼否則以后密碼改了你要改幾十處。3.3 配置testId讓選擇器不再脆弱實(shí)際操作中有一個(gè)讓我前期極其痛苦的問(wèn)題前端同學(xué)改個(gè)類(lèi)名我的e2e用例就掛一片。后來(lái)我找到的正解是給DOM元素加>button>await page.getByTestId(login-submit).click();前端開(kāi)發(fā)在寫(xiě)業(yè)務(wù)組件的時(shí)候把核心交互元素加上>npx playwright test --headed看一遍沒(méi)問(wèn)題后再切回?zé)o頭模式跑全量用例npx playwright test這里就要說(shuō)到Playwright最好用的調(diào)試功能了。某條用例掛了我通常不會(huì)直接看控制臺(tái)輸出而是用--trace on參數(shù)重新跑一遍npx playwright test tests/e2e/login.spec.ts --trace on跑完會(huì)在test-results/目錄下生成一個(gè).zip文件用Playwright的trace viewer打開(kāi)npx playwright show-trace test-results/xxx.zip這等于把測(cè)試過(guò)程錄了個(gè)像每一步操作對(duì)應(yīng)的DOM快照、網(wǎng)絡(luò)請(qǐng)求、控制臺(tái)日志、瀏覽器console全部列出來(lái)。我排查問(wèn)題的時(shí)候基本上面板點(diǎn)幾下就知道是哪一步出的問(wèn)題比盲猜高效太多。4. e2e profile1這個(gè)“熱詞”背后多配置管理才是關(guān)鍵4.1 profile到底指什么——環(huán)境畫(huà)像最近圈子里聊“e2e profile1”這個(gè)說(shuō)法的人多起來(lái)了很多人以為是某個(gè)新工具或者新概念其實(shí)它講的就是配置畫(huà)像profile。所謂profile就是把e2e測(cè)試運(yùn)行所需的全部環(huán)境參數(shù)打包成一個(gè)配置集合針對(duì)不同環(huán)境分別加載。profile1通常是指第一套環(huán)境配置比如測(cè)試環(huán)境test environment你還能接著定義profile2對(duì)應(yīng)預(yù)發(fā)布環(huán)境profile3對(duì)應(yīng)生產(chǎn)環(huán)境的冒煙驗(yàn)證。為什么要這么設(shè)計(jì)我從實(shí)際項(xiàng)目里給你講個(gè)場(chǎng)景。同一套e2e用例在測(cè)試環(huán)境跑的時(shí)候接口地址可能是https://test-api.example.com登錄賬號(hào)是用測(cè)試手機(jī)號(hào)注冊(cè)的支付用的銀聯(lián)沙箱到了預(yù)發(fā)布環(huán)境接口換成https://staging-api.example.com賬號(hào)變成預(yù)發(fā)布專(zhuān)用賬號(hào)還得關(guān)掉短信驗(yàn)證碼的開(kāi)關(guān)。如果這些參數(shù)寫(xiě)死在代碼里換環(huán)境就要改代碼、重新提交非常蠢。profile機(jī)制就是把這些差異全部抽到配置文件里用例本身只用相對(duì)變量。4.2 多環(huán)境配置的實(shí)現(xiàn)方式我這里給出一個(gè)我在項(xiàng)目里實(shí)際使用過(guò)的配置設(shè)計(jì)方式主要是兩個(gè)層面baseURL和賬號(hào)體系。// profiles/profile1.ts —— 測(cè)試環(huán)境 export default { name: profile1, baseURL: https://test.example.com, apiBaseURL: https://test-api.example.com, admin: { username: test_admin_01, password: test_pass_01 }, user: { username: 13800138000, password: 123456 }, timeout: 30_000, locale: zh-CN }// profiles/profile2.ts —— 預(yù)發(fā)布環(huán)境 export default { name: profile2, baseURL: https://staging.example.com, apiBaseURL: https://staging-api.example.com, admin: { username: staging_admin, password: staging_pass }, user: { username: 18800001111, password: 654321 }, timeout: 60_000, locale: zh-CN }然后寫(xiě)一個(gè)profile讀取入口通過(guò)環(huán)境變量切換當(dāng)前使用哪個(gè)profile// profiles/index.ts import profile1 from ./profile1; import profile2 from ./profile2; const profiles { profile1, profile2 } export function getProfile() { const name process.env.PROFILE || profile1; return profiles[name]; }運(yùn)行時(shí)指定環(huán)境變量PROFILEprofile1 npx playwright test PROFILEprofile2 npx playwright test這樣設(shè)計(jì)有個(gè)好處CI流水線(xiàn)里可以針對(duì)不同環(huán)境跑不同任務(wù)代碼倉(cāng)庫(kù)里只有一份測(cè)試用例環(huán)境差異全部由profile隔離。我在線(xiàn)下的一個(gè)項(xiàng)目里就是靠這套機(jī)制實(shí)現(xiàn)了“每天定時(shí)在測(cè)試環(huán)境跑全量回歸每次發(fā)版前在預(yù)發(fā)布環(huán)境跑冒煙”中間沒(méi)改過(guò)一行測(cè)試邏輯。4.3 除了URL和賬號(hào)profile還能管什么很多人以為profile就是換一下域名其實(shí)能管的東西多得多這里我列幾個(gè)容易忽略的點(diǎn)功能開(kāi)關(guān)配置有的環(huán)境開(kāi)啟了促銷(xiāo)模塊有的環(huán)境關(guān)閉了有的環(huán)境能展示優(yōu)惠券有的不能。e2e用例跑之前要先讀profile里的feature flag判斷哪些用例當(dāng)前環(huán)境可以跑。超時(shí)時(shí)間差異化測(cè)試環(huán)境的數(shù)據(jù)量小頁(yè)面加載快超時(shí)時(shí)間可以設(shè)短一些比如15秒預(yù)發(fā)布環(huán)境數(shù)據(jù)量和生產(chǎn)幾乎一致接口響應(yīng)慢超時(shí)要放到45秒以上。同一個(gè)用例在不同環(huán)境用同一個(gè)超時(shí)時(shí)間必掛。第三方依賴(lài)的處理支付、短信驗(yàn)證碼這類(lèi)外部依賴(lài)在測(cè)試環(huán)境通常有mock方案或沙箱方案。profile里可以配置當(dāng)前環(huán)境使用哪種支付方式、是否需要繞過(guò)短信驗(yàn)證。這個(gè)經(jīng)常是e2e穩(wěn)定性的關(guān)鍵——我見(jiàn)過(guò)太多用例因?yàn)檎鎸?shí)短信驗(yàn)證碼無(wú)法在自動(dòng)化流程里完成而掛了。賬號(hào)數(shù)據(jù)初始化有些用例需要用戶(hù)已存在有些需要用戶(hù)不存在。profile里可以配置賬號(hào)類(lèi)型測(cè)試用例執(zhí)行前通過(guò)API調(diào)用完成數(shù)據(jù)準(zhǔn)備。4.4 結(jié)合Playwright配置文件使用profileprofile機(jī)制要真正落地還得和Playwright自身的配置文件結(jié)合起來(lái)。我會(huì)在playwright.config.ts里這樣寫(xiě)import { defineConfig } from playwright/test; import { getProfile } from ./profiles; const profile getProfile(); export default defineConfig({ testDir: ./tests/e2e, timeout: profile.timeout, use: { baseURL: profile.baseURL, locale: profile.locale, screenshot: only-on-failure, video: retain-on-failure, trace: retain-on-failure }, projects: [ { name: chromium, use: { browserName: chromium } } ] });下面幾個(gè)配置項(xiàng)是我認(rèn)為最能提升效率和體驗(yàn)的screenshot: only-on-failure用例失敗時(shí)自動(dòng)截圖這是定位問(wèn)題的最直觀(guān)依據(jù)。video: retain-on-failure記錄視頻也是只在失敗時(shí)保留。我看視頻的頻率不高但遇到那種“時(shí)好時(shí)壞”的用例時(shí)視頻能幫我分辨到底是產(chǎn)品真出了問(wèn)題還是測(cè)試代碼不穩(wěn)定。trace: retain-on-failure同上面說(shuō)的一樣失敗時(shí)保留完整trace。5. 跑e2e時(shí)踩過(guò)的坑與排查技巧實(shí)錄5.1 選擇器寫(xiě)不穩(wěn)前端一改動(dòng)就掛這個(gè)問(wèn)題我估計(jì)所有寫(xiě)過(guò)e2e的人都遇到過(guò)。典型案例前端把div改成span或者調(diào)整了某個(gè)CSS類(lèi)名測(cè)試用例立刻變紅。為什么會(huì)這樣因?yàn)闇y(cè)試代碼里用的是page.locator(.product-item)這樣直接依賴(lài)DOM結(jié)構(gòu)和樣式類(lèi)名的定位方式。排查思路其實(shí)不復(fù)雜把定位符換成語(yǔ)義化API或者全鏈路使用>// 等待商品列表接口返回后再點(diǎn)擊第一個(gè)商品 await Promise.all([ page.waitForResponse(resp resp.url().includes(/api/product/list) resp.status() 200 ), page.click([data-testidsearch-submit]) ]);這個(gè)寫(xiě)法的核心思路是按鈕點(diǎn)擊和接口請(qǐng)求響應(yīng)用Promise.all同時(shí)等待確保點(diǎn)擊動(dòng)作觸發(fā)請(qǐng)求、請(qǐng)求返回成功之后才繼續(xù)往下走。比盲等更穩(wěn)。5.4 超時(shí)時(shí)間設(shè)置不合理超時(shí)是e2e里繞不開(kāi)的話(huà)題。我曾經(jīng)見(jiàn)過(guò)一個(gè)項(xiàng)目所有用例統(tǒng)一用默認(rèn)的5秒超時(shí)跑起來(lái)全是失敗。后來(lái)我把超時(shí)策略拆成了三層Playwright全局等待斷言超時(shí)expect的timeout、操作超時(shí)點(diǎn)擊、填寫(xiě)的timeout、整個(gè)用例超時(shí)test.setTimeout()。前兩者主要影響單步操作的穩(wěn)定性后者主要用于防止某條用例因?yàn)樗姥h(huán)或無(wú)限加載把整個(gè)測(cè)試進(jìn)程卡死。建議參考值開(kāi)發(fā)環(huán)境跑本地e2e全局?jǐn)嘌猿瑫r(shí)設(shè)10秒就夠測(cè)試環(huán)境設(shè)15到20秒預(yù)發(fā)布環(huán)境因?yàn)閿?shù)據(jù)量和生產(chǎn)一致設(shè)30秒不算過(guò)分。如果某條用例穩(wěn)定超過(guò)40秒你要反思的不僅是超時(shí)參數(shù)還有是不是這條用例覆蓋的鏈路太長(zhǎng)了該考慮拆分。5.5 CI環(huán)境跑不起來(lái)的特殊問(wèn)題在本地運(yùn)行一切正常一上CI就掛。這個(gè)問(wèn)題幾乎每個(gè)做e2e的人都會(huì)遇到。CI容器里默認(rèn)沒(méi)有瀏覽器依賴(lài)你雖然裝了Playwright但系統(tǒng)級(jí)別的庫(kù)缺失會(huì)導(dǎo)致瀏覽器啟動(dòng)失敗。解決方法是在CI腳本里執(zhí)行npx playwright install --with-deps這條命令會(huì)安裝瀏覽器及所有系統(tǒng)依賴(lài)庫(kù)。如果是Docker環(huán)境推薦直接用Playwright官方鏡像mcr.microsoft.com/playwright里面已經(jīng)把WebKit、Chromium、Firefox的系統(tǒng)依賴(lài)全部裝好了省去很多麻煩。還有一點(diǎn)值得提醒CI環(huán)境跑的時(shí)候要顯式指定workers數(shù)量不要默認(rèn)并行拉滿(mǎn)。CI機(jī)器一般CPU核數(shù)有限并行過(guò)多會(huì)導(dǎo)致瀏覽器進(jìn)程互相搶占資源用例失敗率飆升。我一般在CI配置里加--workers2本地開(kāi)發(fā)時(shí)可以放開(kāi)并行提升速度。6. 從“能用”到“好用”e2e測(cè)試的日常運(yùn)營(yíng)之道寫(xiě)到這里e2e的基本體系已經(jīng)很完整了。不過(guò)我從這么多年的經(jīng)驗(yàn)里還想多補(bǔ)一段e2e測(cè)試搭起來(lái)容易但真正難的是讓它長(zhǎng)期穩(wěn)定運(yùn)行、持續(xù)產(chǎn)生價(jià)值。很多團(tuán)隊(duì)的前期投入不低最后卻變成了“維護(hù)負(fù)擔(dān)大于質(zhì)量收益”問(wèn)題往往出在運(yùn)營(yíng)思路上。第一條經(jīng)驗(yàn)是把e2e測(cè)試當(dāng)成產(chǎn)品來(lái)運(yùn)營(yíng)而不是一次性工程項(xiàng)目。我見(jiàn)過(guò)太多團(tuán)隊(duì)把e2e框架搭完、跑通了幾條用例就束之高閣代碼變更后沒(méi)人維護(hù)一個(gè)月后跑一次全紅從此再也不敢跑。正確做法是把e2e用例的維護(hù)職責(zé)落實(shí)到具體業(yè)務(wù)的開(kāi)發(fā)同學(xué)身上——誰(shuí)負(fù)責(zé)登錄模塊誰(shuí)就負(fù)責(zé)登錄相關(guān)e2e用例的維護(hù)。用例掛了不能只是測(cè)試同學(xué)去修而是要觸發(fā)對(duì)應(yīng)模塊負(fù)責(zé)人去分析原因要么是產(chǎn)品改了邏輯要么是環(huán)境問(wèn)題要么是測(cè)試腳本問(wèn)題每個(gè)失敗都必須有結(jié)論。第二條經(jīng)驗(yàn)是建立分級(jí)執(zhí)行策略。我的做法是把e2e用例按穩(wěn)定性和重要性分成兩個(gè)級(jí)別冒煙級(jí)在每次代碼推送后跑只需要覆蓋最高頻的核心鏈路時(shí)間控制在5-8分鐘內(nèi)全量級(jí)在每天凌晨或發(fā)版前跑覆蓋所有核心場(chǎng)景跑完自動(dòng)生成測(cè)試報(bào)告發(fā)到團(tuán)隊(duì)群里。這樣既保證了反饋速度又不會(huì)因?yàn)榕芤淮翁脤?dǎo)致開(kāi)發(fā)同學(xué)根本不想等結(jié)果。第三條經(jīng)驗(yàn)是讓e2e測(cè)試直接對(duì)接發(fā)布流程。我把e2e接入到這個(gè)流程里開(kāi)發(fā)提交PR→CI跑單測(cè)和靜態(tài)檢查→合并到主干→自動(dòng)部署到測(cè)試環(huán)境→跑e2e全量回歸→通過(guò)后自動(dòng)打好測(cè)試環(huán)境的構(gòu)建包。測(cè)試環(huán)境一旦紅了發(fā)布流水線(xiàn)就直接卡住責(zé)任人必須當(dāng)天處理完才能繼續(xù)發(fā)版。這套機(jī)制運(yùn)行大半年之后線(xiàn)上故障率下降得很明顯因?yàn)榇罅康膯?wèn)題在測(cè)試環(huán)境就已經(jīng)被e2e這套網(wǎng)兜住了。最后再分享一個(gè)小技巧。如果你剛開(kāi)始在項(xiàng)目里推e2e別一上來(lái)就追求覆蓋率先把一條最核心的業(yè)務(wù)鏈路的用例跑穩(wěn)比如登錄到支付這條最長(zhǎng)的鏈路讓它成為你心里的“基準(zhǔn)線(xiàn)”。以后每次改代碼、升級(jí)依賴(lài)、調(diào)整架構(gòu)都先跑這條基準(zhǔn)線(xiàn)只要它是綠的項(xiàng)目的大盤(pán)就基本是穩(wěn)的。之后再慢慢把同類(lèi)的鏈路一條條加進(jìn)去讓這張網(wǎng)越織越密。我把這套e2e方案在我自己負(fù)責(zé)的多個(gè)項(xiàng)目里落地過(guò)踩過(guò)的坑、總結(jié)的經(jīng)驗(yàn)基本都寫(xiě)在上面了。如果你正在為線(xiàn)上問(wèn)題反復(fù)出現(xiàn)而頭疼或者團(tuán)隊(duì)的手工回歸測(cè)試讓你筋疲力盡從今天開(kāi)始把e2e這套東西建起來(lái)三個(gè)月后回頭看你會(huì)覺(jué)得這一步真的值得。