Playwright Test Generator 實戰(zhàn)指南用 Codegen 錄制生成可維護的自動化測試【免費下載鏈接】playwrightPlaywright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.項目地址: https://gitcode.com/GitHub_Trending/pl/playwrightPlaywright當前倉庫位于GitHub_Trending/pl/playwright內(nèi)置的**測試生成器Test Generator亦稱 Codegen**讓你只需在真實瀏覽器中執(zhí)行操作就能自動生成對應(yīng)的自動化測試代碼。本文系統(tǒng)講解如何在 VS Code 擴展與 Playwright Inspector 中使用錄制生成能力深入剖析 viewport、移動設(shè)備、深淺色模式、地理定位/語言/時區(qū)仿真以及登錄態(tài)保存與復(fù)用等進階技巧并結(jié)合倉庫源碼說明這些命令行選項背后的解析與落地機制幫助你快速搭建高質(zhì)量、可讀性強且能持續(xù)維護的測試用例。測試生成器的工作原理與定位器選擇策略Playwright 測試生成器的核心價值在于你在瀏覽器窗口里人肉操作頁面它同步把每次點擊、輸入、導(dǎo)航翻譯成測試代碼因此即使是第一次接觸 Web 測試的開發(fā)者也能在幾分鐘內(nèi)產(chǎn)出一份可運行、可斷言的測試文件是快速上手與給存量項目補齊測試覆蓋的高效起點。生成器并非簡單地把操作映射成脆弱的 CSS 選擇器而是會審視頁面結(jié)構(gòu)并挑選最優(yōu)定位器。根據(jù) docs/src/codegen.md 的說明其優(yōu)先級依次為role角色、text文本與 test id定位器如果頁面上存在多個元素都能匹配當前定位器生成器還會自動為定位器補上約束條件如結(jié)合可見性、層級或索引把它改進成能夠唯一定位目標元素、對頁面結(jié)構(gòu)變化更具彈性的形式。定位器的完整能力清單getByRole、getByText、getByTestId、locator.filter、locator.and等參見 定位器Locators指南。從源碼結(jié)構(gòu)看這套錄制 → 翻譯能力由三層構(gòu)成CLI 入口program.ts 注冊了codegen [url]命令并聲明了--target、--output、--test-id-attribute等專屬選項瀏覽器會話編排browserActions.ts 中的codegen()負責按參數(shù)啟動瀏覽器、開啟錄制模式并把目標頁面加載進來多語言代碼生成器packages/isomorphic/codegen 目錄下實現(xiàn)了各目標語言的翻譯器例如 javascript.ts含playwright-test測試框架與純javascript兩種風格、python.ts、java.ts 與 csharp.tslanguages.ts 負責注冊并選擇生成器。在 VS Code 中直接錄制測試對于 JavaScript/TypeScript 用戶最順手的路徑是使用官方 VS Code 擴展安裝Playwright Test for VSCode擴展后即可從編輯器側(cè)邊欄一鍵錄制入門步驟詳見 VS Code 入門指南擴展本身的實現(xiàn)代碼位于倉庫的 packages/extension 目錄入口為 manifest.json。此外該擴展還支持直接從測試文件運行用例、以 UI 模式調(diào)試、查看 Trace 等。錄制一條新測試Record new在Testing測試側(cè)邊欄點擊Record new錄制新測試按鈕。擴展會自動創(chuàng)建test-1.spec.ts文件同時彈出一個瀏覽器窗口。在瀏覽器中訪問你要測試的網(wǎng)址然后開始點擊、填寫、滾動你的每一步用戶操作都會被實時生成到 VS Code 的測試文件中。錄制過程中還能隨時補上斷言Assertion點擊工具欄中的斷言圖標再在頁面上點選目標元素生成器會為你產(chǎn)出一句斷言可選類型有三種assert visibility可見性斷言斷言元素可見assert text文本斷言斷言元素包含指定文本assert value取值斷言斷言元素具有指定值如表單輸入值。錄制結(jié)束后點擊cancel按鈕或直接關(guān)閉瀏覽器窗口即可停止。隨后你可以在test-1.spec.ts中審閱生成的代碼并按需手動微調(diào)。從光標處繼續(xù)錄制Record at cursor如果測試文件已有部分用例希望接續(xù)一段操作先把光標移動到期望插入新步驟的位置再從 Testing 側(cè)邊欄點擊Record at cursor從光標處錄制按鈕之后瀏覽器中的操作就會追加到光標所在位置。若瀏覽器窗口尚未打開可先在啟用Show browser的情況下運行一次該測試再點擊Record at cursor。交互式挑選定位器Pick locator除了錄制操作生成器還承擔定位器速查器的職能點擊 Testing 側(cè)邊欄中的Pick locator拾取定位器按鈕在瀏覽器窗口內(nèi)懸停元素即可看到該元素下方被高亮標注的定位器點擊目標元素定位器會出現(xiàn)在 VS Code 的Pick locator輸入框中按Enter把定位器復(fù)制到剪貼板隨處粘貼使用按escape取消。這種方式非常適合在既有測試中補充對某個元素的引用或者驗證生成器認為的元素定位是否正確。使用 Playwright Inspector 生成測試命令行方式除 VS Code 外**所有語言JavaScript/TypeScript、Python、Java、C#**都可使用codegenCLI 命令配合Playwright Inspector檢查器窗口工作運行命令后會同時打開兩個窗口——一個是供你交互的目標網(wǎng)站瀏覽器另一個是展示生成代碼、提供錄制控制的 Inspector 窗口。錄制完成后可將代碼復(fù)制到自己的編輯器或測試文件中。運行 Codegen 命令codegen命令的基本形式是codegen后跟目標網(wǎng)站 URL。URL 是可選的不帶 URL 運行后也可以直接在瀏覽器地址欄里輸入任意網(wǎng)址開始錄制。# JavaScript / TypeScript npx playwright codegen demo.playwright.dev/todomvc # Python playwright codegen demo.playwright.dev/todomvc # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen demo.playwright.dev/todomvc # C#使用 Playwright 提供的 pwsh 引導(dǎo)腳本 pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc示例中的demo.playwright.dev/todomvc是官方的 TodoMVC 演示應(yīng)用尤其適合體驗勾選待辦、輸入新任務(wù)、刪除條目等典型操作被翻譯成代碼的過程。錄制一條測試用例運行codegen后在瀏覽器窗口執(zhí)行操作Inspector 會同步展示生成的交互代碼?？梢凿浿频膬?nèi)容包括操作Actions點擊、輸入填充等動作只要與頁面交互即被記錄斷言Assertions點擊工具欄的斷言圖標后點選頁面元素可生成上文提到的一類斷言。各語言JavaScript、Java、Python、C#的 Inspector 界面風格一致均可完成下述流程操作完成后點擊record按鈕停止錄制再用copy按鈕把整段代碼復(fù)制到你的編輯器若想清空重錄點擊clear按鈕。全部完成后關(guān)閉 Inspector 窗口或在終端中停止對應(yīng)命令如按CtrlC即可退出錄制會話。錄制模式下拾取定位器Inspector 同樣提供定位器拾取能力適合在錄制間隙快速取一個穩(wěn)健定位器用于手寫代碼先點擊Record按鈕停止錄制此時Pick Locator拾取定位器按鈕會變?yōu)榭捎命c擊Pick Locator在瀏覽器中懸停元素查看高亮及其定位器點擊目標元素對應(yīng)定位器代碼會出現(xiàn)在 Pick Locator 旁的輸入框中可在輸入框內(nèi)直接編輯精調(diào)該定位器或點擊copy復(fù)制后粘貼到代碼里。codegen 命令支持的完整選項從源碼 program.ts 可以看到codegen [url]除通用選項外還支持三個專屬參數(shù)選項作用-o, --output file name把生成的腳本直接保存到指定文件而非僅展示在 Inspector 中--target language指定生成的語言取值包括javascript、playwright-test、python、python-async、python-pytest、csharp、csharp-mstest、csharp-nunit、csharp-xunit、java、java-junit--test-id-attribute attributeName指定用于生成># 常用示例指定瀏覽器、無頭與否之外的會話參數(shù) npx playwright codegen --targetpython --test-id-attributedata-test \ -b chromium --ignore-https-errors demo.playwright.dev/todomvc用仿真參數(shù)錄制特定環(huán)境下的測試實際測試往往需要覆蓋不同設(shè)備與運行環(huán)境Codegen 支持在錄制階段就套用仿真條件這樣生成的代碼會在測試中自動復(fù)現(xiàn)同樣的上下文選項保證測試在一致條件下穩(wěn)定運行自動化測試對響應(yīng)式窗口尺寸尤其敏感必須固定視口才能避免布局抖動。源碼中這些 CLI 選項統(tǒng)一在launchContext()browserActions.ts內(nèi)被解析并合并進BrowserContextOptions最終隨生成的代碼一并落盤。仿真視口尺寸--viewport-sizePlaywright 打開瀏覽器時會把視口固定為指定寬高測試需在與開發(fā)一致的環(huán)境下執(zhí)行。--viewport-size接收形如800,600的寬高字符串源碼按逗號拆分并轉(zhuǎn)換為數(shù)值非法格式會拋出Invalid viewport size format錯誤見 browserActions.ts。# JavaScript / TypeScript npx playwright codegen --viewport-size800,600 playwright.dev # Python playwright codegen --viewport-size800,600 playwright.dev # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen --viewport-size800,600 playwright.dev # C# pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size800,600 playwright.dev仿真移動設(shè)備--device--device用于按真實設(shè)備檔案錄制除了視口尺寸外還會同時設(shè)置 user agent、觸屏能力、設(shè)備縮放比等一系列移動端特征。其實現(xiàn)方式是源碼先從playwright.devices中按名稱復(fù)制設(shè)備描述符作為上下文選項的基座browserActions.ts設(shè)備名也決定了默認啟動的瀏覽器內(nèi)核lookupBrowserType若設(shè)備名不存在會在 validateOptions 階段報錯并列出現(xiàn)有設(shè)備清單設(shè)備描述符全集位于 packages/isomorphic/deviceDescriptors.ts。# JavaScript / TypeScript仿真 iPhone 13 npx playwright codegen --deviceiPhone 13 playwright.dev # Python playwright codegen --deviceiPhone 13 playwright.dev # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen --deviceiPhone 13 playwright.dev # C# pwsh bin/Debug/netX/playwright.ps1 codegen --deviceiPhone 13 playwright.dev仿真深淺色模式--color-scheme--color-scheme可在錄制時就以指定配色方案呈現(xiàn)頁面從而生成對應(yīng)colorScheme: dark的測試上下文。取值僅允許light或dark其余值會在源碼校驗階段直接報錯browserActions.ts隨后被寫入contextOptions.colorScheme同文件 L151-L154。# JavaScript / TypeScript以深色模式錄制 npx playwright codegen --color-schemedark playwright.dev # Python playwright codegen --color-schemedark playwright.dev # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen --color-schemedark playwright.dev # C# pwsh bin/Debug/netX/playwright.ps1 codegen --color-schemedark playwright.dev仿真地理位置、語言與時區(qū)對于依賴定位或本地化內(nèi)容的站點可用--timezone、--geolocation與--lang組合仿真。下面以必應(yīng)地圖為例錄制羅馬 意大利語場景頁面打開后先接受 Cookies點擊頁面右上角的locate me按鈕即可驗證地理定位是否生效。# JavaScript / TypeScript npx playwright codegen --timezoneEurope/Rome --geolocation41.890221,12.492348 --langit-IT bing.com/maps # Python playwright codegen --timezoneEurope/Rome --geolocation41.890221,12.492348 --langit-IT bing.com/maps # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen --timezoneEurope/Rome --geolocation41.890221,12.492348 --langit-IT bing.com/maps # C# pwsh bin/Debug/netX/playwright.ps1 codegen --timezoneEurope/Rome --geolocation41.890221,12.492348 --langit-IT bing.com/maps實現(xiàn)細節(jié)browserActions.ts--geolocation按緯度,經(jīng)度解析并自動追加geolocation權(quán)限格式非法會提示Invalid geolocation format--lang被映射為contextOptions.locale--timezone被映射為contextOptions.timezoneId。附加的會話級仿真選項同一個codegen/open命令還支持以下會話控制選項全部在 program.ts 中聲明并在launchContext中生效-b/--browser選擇cr/chromium/ff/firefox/wk/webkit之一默認 chromium、--channel指定 Chrome/Edge 等發(fā)行渠道、--user-agent自定義 UA 串、--lang、--proxy-server/--proxy-bypass、--ignore-https-errors、--timeoutPlaywright 動作超時毫秒數(shù)默認無超時、--block-service-workers、--save-har/--save-har-glob會話結(jié)束導(dǎo)出 HAR 網(wǎng)絡(luò)檔案。注意源碼在非 headless 的 Linux/GTK 環(huán)境運行 WebKit 時會關(guān)閉hasTouch/isMobile以規(guī)避滾動問題browserActions.ts。保留與復(fù)用登錄態(tài)認證相關(guān)錄制技巧許多真實項目需要登錄后才能測試核心功能。Codegen 支持把認證單獨錄一次并沉淀為可復(fù)用的存儲狀態(tài)之后所有用例都能以已登錄狀態(tài)開始——這避免了在每個測試里重復(fù)處理登錄表單也顯著提升錄制效率。先錄制認證并導(dǎo)出存儲狀態(tài)--save-storage以 GitHub 為例運行帶--save-storage的命令開始錄制完成登錄后關(guān)閉瀏覽器會話結(jié)束時會將cookies、localStorage 與 IndexedDB數(shù)據(jù)寫入指定的auth.json# JavaScript / TypeScript npx playwright codegen github.com/microsoft/playwright --save-storageauth.json # Python playwright codegen github.com/microsoft/playwright --save-storageauth.json # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen github.com/microsoft/playwright --save-storageauth.json # C# pwsh bin/Debug/netX/playwright.ps1 codegen github.com/microsoft/playwright --save-storageauth.json保存動作由源碼中的closeBrowser()完成——它會調(diào)用context.storageState({ path })把狀態(tài)序列化到目標文件browserActions.ts。安全提醒auth.json內(nèi)含敏感憑據(jù)只能保存在本地使用。請把它加入.gitignore或在完成測試生成后將其刪除?；謴?fù)登錄態(tài)繼續(xù)錄制--load-storage下次錄制時加上--load-storageauth.json存儲的 cookies、localStorage 與 IndexedDB 會被完整恢復(fù)多數(shù) Web 應(yīng)用會直接進入已登錄狀態(tài)無需再次登錄即可繼續(xù)錄制# JavaScript / TypeScript npx playwright codegen --load-storageauth.json github.com/microsoft/playwright # Python playwright codegen --load-storageauth.json github.com/microsoft/playwright # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen --load-storageauth.json github.com/microsoft/playwright # C# pwsh bin/Debug/netX/playwright.ps1 codegen --load-storageauth.json github.com/microsoft/playwright源碼側(cè)該選項被映射為contextOptions.storageStatebrowserActions.tssave-storage/load-storage兩個文件路徑參數(shù)可組成錄制認證 → 復(fù)用認證的完整閉環(huán)這與測試框架中setup項目 storageState全局登錄的實踐是一脈相承的。復(fù)用既有的瀏覽器用戶目錄--user-data-dir如果你希望直接復(fù)用某個既有瀏覽器配置文件其中可能已包含登錄狀態(tài)與個性化設(shè)置可用--user-data-dir為會話指定固定的用戶數(shù)據(jù)目錄。從源碼看該選項會走browserType.launchPersistentContext(userDataDir, ...)的持久化上下文路徑browserActions.ts而不是默認的新建上下文。# JavaScript / TypeScript npx playwright codegen --user-data-dir/path/to/your/browser/data/ github.com/microsoft/playwright # Python playwright codegen --user-data-dir/path/to/your/browser/data/ github.com/microsoft/playwright # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen --user-data-dir/path/to/your/browser/data/ github.com/microsoft/playwright # C# pwsh bin/Debug/netX/playwright.ps1 codegen --user-data-dir/path/to/your/browser/data/ github.com/microsoft/playwright版本警告自 Chrome 136 起瀏覽器的默認用戶數(shù)據(jù)目錄已不允許通過自動化工具如 Playwright訪問因此必須為測試單獨創(chuàng)建一個獨立目錄供其使用不能直接指向默認 Profile。使用 HTTP 基本認證憑據(jù)--http-credentials對受 HTTP Basic Auth 保護的站點--http-credentials以用戶名:密碼格式提供憑據(jù)。與把賬號密碼內(nèi)嵌到 URL如https://user:passhost不同這種方式下憑據(jù)會被發(fā)送給錄制會話中任何要求認證的來源且會寫進生成的測試代碼對應(yīng)生成代碼中的httpCredentials上下文選項。源碼會在解析時校驗必須包含冒號分隔符否則報格式錯誤browserActions.ts。# JavaScript / TypeScript npx playwright codegen --http-credentialsusername:password example.com # Python playwright codegen --http-credentialsusername:password example.com # Java mvn exec:java -e -D exec.mainClasscom.microsoft.playwright.CLI -D exec.argscodegen --http-credentialsusername:password example.com # C# pwsh bin/Debug/netX/playwright.ps1 codegen --http-credentialsusername:password example.com在自定義瀏覽器上下文配置中觸發(fā)錄制page.pausecodegen的標準啟動流程由 CLI 自動完成但有時你需要在非標準配置下錄制例如預(yù)先掛好BrowserContext.route攔截請求、注入額外的上下文參數(shù)、準備特殊的多頁面/多 Frame 場景后再開始錄制。此時可以在自己的腳本里顯式構(gòu)建瀏覽器與上下文然后調(diào)用page.pause()——Playwright 會據(jù)此單獨彈出一個帶 Codegen 控制界面的窗口讓你手動開始錄制。JS/TSplaywright/test中的chromium與 Python 同步寫法如下Java 與 C# 的等價實現(xiàn)也一并給出const { chromium } require(playwright/test); (async () { // 必須以有頭headed模式運行。 const browser await chromium.launch({ headless: false }); // 按需自由配置上下文。 const context await browser.newContext({ /* pass any options */ }); await context.route(**/*, route route.continue()); // 暫停頁面隨后手動開始錄制。 const page await context.newPage(); await page.pause(); })();from playwright.sync_api import sync_playwright with sync_playwright() as p: # 必須以有頭headed模式運行。 browser p.chromium.launch(headlessFalse) # 按需自由配置上下文。 context browser.new_context() # 傳入任意需要的選項 context.route(**/*, lambda route: route.continue_()) # 暫停頁面隨后手動開始錄制。 page context.new_page() page.pause()Python 異步寫法使用async_playwright流程一致只需把各調(diào)用改為awaitawait p.chromium.launch(headlessFalse)、await context.route(...)、await page.pause()等。對應(yīng)的 Java 實現(xiàn)基于page.pause()Java 中 route 放行方法為route.resume()C# 基于await page.PauseAsync()此處不再展開粘貼全部代碼模式相同。import com.microsoft.playwright.*; public class Example { public static void main(String[] args) { try (Playwright playwright Playwright.create()) { BrowserType chromium playwright.chromium(); // 必須以有頭headed模式運行。 Browser browser chromium.launch(new BrowserType.LaunchOptions().setHeadless(false)); // 按需自由配置上下文。 BrowserContext context browser.newContext(); // 傳入任意需要的選項 context.route(**/*, route - route.resume()); // 暫停頁面隨后手動開始錄制。 Page page context.newPage(); page.pause(); } } }using Microsoft.Playwright; using var playwright await Playwright.CreateAsync(); var chromium playwright.Chromium; // 必須以有頭headed模式運行。 var browser await chromium.LaunchAsync(new() { Headless false }); // 按需自由配置上下文。 var context await browser.NewContextAsync(); // 傳入任意需要的選項 await context.RouteAsync(**/*, route route.ContinueAsync()); // 暫停頁面隨后手動開始錄制。 var page await context.NewPageAsync(); await page.PauseAsync();四個語言版本的實現(xiàn)邏輯完全對應(yīng)均以非 headless 啟動瀏覽器、在創(chuàng)建BrowserContext時注入自定義路由或其他選項最后通過Page.pause()進入錄制界面。這一模式讓先攔截接口再錄制、帶自定義 Cookie/權(quán)限錄制等復(fù)雜前置條件成為可能。生成代碼的后續(xù)打磨與維護建議錄制只是起點。生成器產(chǎn)出的代碼通常會盡量使用語義化定位器但復(fù)雜業(yè)務(wù)場景下仍建議按以下要點人工收尾替換脆弱定位器若生成代碼退化為層級過深的locator(...)建議替換為 role/text/test-id 語義定位器locators.md 提供了完整指南并對動態(tài)文本、循環(huán)列表使用filter與文本參數(shù)增強唯一性。補充更多斷言除錄制工具欄的三類斷言外可將expect(...).toBeVisible()、toHaveValue()、toHaveText()、toHaveURL()等斷言擴展進關(guān)鍵節(jié)點完整清單見 test-assertions-js.md。收斂狀態(tài)依賴對登錄態(tài)用例優(yōu)先采用--save-storage/--load-storage或全局storageState避免在每個用例里重復(fù)登錄認證數(shù)據(jù)必須本地化保管。接入項目測試體系生成的文件可直接納入現(xiàn)有測試項目并復(fù)用其 fixture、并行分片與重試策略如需在錄制時直接落地文件可用--output指定輸出路徑。圍繞測試生成器倉庫還提供了一系列可繼續(xù)深挖的資源Inspector 與錄制相關(guān)的瀏覽器內(nèi)實現(xiàn)位于 packages/recorder/srcVS Code 擴展源碼見 packages/extension針對生成器行為含 CLI 各選項、多語言輸出、設(shè)備仿真等的自動化驗證測試集中在 tests/library/inspector 目錄可作為功能邊界與預(yù)期行為的參考。結(jié)合本文的錄制流程與仿真/認證技巧你完全可以把打開瀏覽器點一點變成一套可持續(xù)演進的高質(zhì)量測試資產(chǎn)。【免費下載鏈接】playwrightPlaywright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.項目地址: https://gitcode.com/GitHub_Trending/pl/playwright創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考