Skip to main content

測試產生器

簡介​

Playwright 具有在瀏覽器中執行操作時為你生成測試的能力，這是一個快速開始測試的好方法。Playwright 會查看你的頁面並找出最佳定位器，優先考慮角色、文本和測試 ID 定位器。如果生成器發現多個元素匹配定位器，它將改進定位器，使其具有唯一識別目標元素的彈性。

使用 Playwright Inspector 生成測試​

當執行 codegen 命令時，會打開兩個視窗，一個是與您希望測試的網站互動的瀏覽器視窗，另一個是 Playwright Inspector 視窗，您可以在其中記錄您的測試，然後將它們複製到您的編輯器中。

執行程式碼產生器​

使用 codegen 命令來執行測試產生器，後面跟著你想要生成測試的網站 URL。URL 是可選的，你可以隨時在沒有它的情況下執行命令，然後直接將 URL 添加到瀏覽器窗口中。

pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc

錄製測試​

執行 codegen 指令並在瀏覽器視窗中執行操作。Playwright 將為使用者互動生成程式碼，您可以在 Playwright Inspector 視窗中看到這些程式碼。一旦您完成錄製測試，停止錄製並按下 copy 按鈕將生成的測試複製到您的編輯器中。

使用測試產生器，你可以記錄:

  • 像點擊或填寫這樣的操作，只需與頁面互動
  • 透過點擊工具列上的其中一個圖標，然後點擊頁面上的一個元素來進行斷言。你可以選擇:
    • 'assert visibility' 來斷言一個元素是可見的
    • 'assert text' 來斷言一個元素包含特定的文本
    • 'assert value' 來斷言一個元素具有特定的值

錄製測試

​

當你完成與頁面互動後，按下 record 按鈕停止錄製，並使用 copy 按鈕將產生的程式碼複製到你的編輯器。

使用 clear 按鈕來清除程式碼以重新開始錄製。完成後，關閉 Playwright 檢查器視窗或停止終端機命令。

產生定位器​

您可以使用測試產生器生成 定位器。

  • 按下 'Record' 按鈕以停止錄製，然後 'Pick Locator' 按鈕會出現。
  • 點擊 'Pick Locator' 按鈕，然後將滑鼠懸停在瀏覽器視窗中的元素上，以查看每個元素下方突顯的定位器。
  • 要選擇定位器，請點擊您想定位的元素，該定位器的程式碼將出現在 Pick Locator 按鈕旁邊的欄位中。
  • 您可以在此欄位中編輯定位器以進行微調，或使用複製按鈕將其複製並貼到您的程式碼中。
​

選擇定位器

模擬​

您可以使用測試產生器來使用模擬生成測試，以便為特定的視口、設備、配色方案生成測試，並模擬地理位置、語言或時區。測試產生器還可以在保留認證狀態的同時生成測試。

模擬 viewport 大小​

Playwright 開啟一個瀏覽器視窗，其視口設定為特定的寬度和高度，並且在測試需要在相同條件下執行時不具響應性。使用 --viewport 選項來產生具有不同視口大小的測試。

pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size=800,600 playwright.dev
​
Codegen 產生測試程式碼 for playwright.dev 網站 with a specific viewport dotnet

模擬裝置​

記錄腳本和測試，同時使用 --device 選項模擬移動裝置，該選項設定了視窗大小和使用者代理等。

pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 13" playwright.dev
​
程式碼產生器為 playwright.dev 網站生成測試程式碼，模擬 iPhone 13 的 csharp

模擬色彩方案​

記錄腳本和測試，同時使用 --color-scheme 選項模擬配色方案。

pwsh bin/Debug/netX/playwright.ps1 codegen --color-scheme=dark playwright.dev
​
Codegen 產生程式碼用於測試 playwright.dev 網站在暗模式 csharp

模擬地理位置、語言和時區​

記錄腳本和測試，同時使用 --timezone、--geolocation 和 --lang 選項來模擬時區、語言和位置。頁面打開後:

  1. 接受 cookies
  2. 在右上角，點擊定位我按鈕以查看地理位置的作用。
pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
​
程式碼產生器產生測試程式碼，用於顯示時區、地理位置為羅馬，義大利，並且使用義大利語 csharp 的 bing maps

保留驗證狀態​

執行 codegen 並使用 --save-storage 來在工作階段結束時保存 cookies 和 localStorage。這對於分別記錄身份驗證步驟並在稍後記錄更多測試時重用非常有用。

pwsh bin/Debug/netX/playwright.ps1 codegen github.com/microsoft/playwright --save-storage=auth.json
​
github page before logging in csharp

登入​

在執行身份驗證並關閉瀏覽器後，auth.json 將包含儲存狀態，您可以在測試中重複使用。

login to GitHub screen

確保你只在本地使用 auth.json，因為它包含敏感資訊。將其添加到 .gitignore 或在生成測試完成後刪除。

載入已驗證狀態​

使用 --load-storage 來消耗 auth.json 中先前載入的存儲。這樣，所有 cookies 和 localStorage 都會被恢復，使大多數網頁應用程式進入已驗證狀態，無需再次登入。這意味著你可以從已登入狀態繼續生成測試。

pwsh bin/Debug/netX/playwright.ps1 codegen --load-storage=auth.json github.com/microsoft/playwright
​
github signed in showing use of load storage scharp

記錄使用自訂設定​

如果你想在一些非標準的設定中使用程式碼產生器 (例如，使用 BrowserContext.RouteAsync() 方法)，可以呼叫 Page.PauseAsync()，這將開啟一個帶有程式碼產生器控制項的單獨視窗。

using Microsoft.Playwright;

using var playwright = await Playwright.CreateAsync();
var chromium = playwright.Chromium;
// Make sure to run headed.
var browser = await chromium.LaunchAsync(new() { Headless = false });

// Setup context however you like.
var context = await browser.NewContextAsync(); // Pass any options
await context.RouteAsync("**/*", route => route.ContinueAsync());

// Pause the page, and start recording manually.
var page = await context.NewPageAsync();
await page.PauseAsync();