跳到主要内容

测试生成器

简介​

Playwright 具备在你于浏览器中执行操作时为你生成测试的能力，并且是快速开始测试的好方法。Playwright 将查看你的页面并找出最佳定位器，优先考虑角色、文本和测试 ID 定位器。如果生成器找到与定位器匹配的多个元素，它将改进定位器，使其具有弹性，从而唯一标识目标元素。

使用 Playwright Inspector 生成测试​

当运行 codegen 命令时，将打开两个窗口，一个是浏览器窗口（你可以在其中与要测试的网站进行交互），另一个是 Playwright Inspector 窗口（你可以在其中录制测试，然后将其复制到编辑器中）。

运行 Codegen​

使用 codegen 命令来运行测试生成器，后跟你要为其生成测试的网站的 URL。URL 是可选的，你可以始终在不带 URL 的情况下运行命令，然后直接将 URL 添加到浏览器窗口中。

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

录制测试​

运行 codegen 命令并在浏览器窗口中执行操作。Playwright 将为用户交互生成代码，你可以在 Playwright Inspector 窗口中看到这些代码。完成测试录制后，停止录制并按复制按钮将生成的测试复制到编辑器中。

使用测试生成器，你可以录制

  • 诸如单击或填充之类的操作，只需与页面交互即可
  • 通过单击工具栏中的图标之一，然后单击页面上的元素以进行断言来进行断言。你可以选择
    • 'assert visibility' 以断言元素是否可见
    • 'assert text' 以断言元素是否包含特定文本
    • 'assert value' 以断言元素是否具有特定值

recording a test

​

完成与页面的交互后，按录制按钮停止录制，并使用复制按钮将生成的代码复制到编辑器。

使用清除按钮清除代码以重新开始录制。完成后，关闭 Playwright Inspector 窗口或停止终端命令。

生成定位器​

你可以使用测试生成器生成定位器。

  • 按 'Record' 按钮停止录制，'Pick Locator' 按钮将出现。
  • 单击 'Pick Locator' 按钮，然后将鼠标悬停在浏览器窗口中的元素上，以查看在每个元素下方突出显示的定位器。
  • 要选择定位器，请单击要定位的元素，该定位器的代码将显示在“Pick Locator”按钮旁边的字段中。
  • 然后，你可以在此字段中编辑定位器以对其进行微调，或者使用复制按钮复制它并将其粘贴到你的代码中。
​

picking a locator

模拟​

你可以使用测试生成器来生成使用模拟的测试，以便为特定的视口、设备、配色方案生成测试，以及模拟地理位置、语言或时区。测试生成器还可以在保留身份验证状态的同时生成测试。

模拟视口大小​

Playwright 打开一个浏览器窗口，其视口设置为特定的宽度和高度，并且不是响应式的，因为测试需要在相同的条件下运行。使用 --viewport 选项生成具有不同视口大小的测试。

pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size="800,600" playwright.dev
​
Codegen generating code for tests for playwright.dev website with a specific viewport dotnet

模拟设备​

使用 --device 选项录制脚本和测试，同时模拟移动设备，该选项设置视口大小和用户代理等。

pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 13" playwright.dev
​
Codegen generating code for tests for playwright.dev website emulated for iPhone 13 csharp

模拟配色方案​

使用 --color-scheme 选项录制脚本和测试，同时模拟配色方案。

pwsh bin/Debug/netX/playwright.ps1 codegen --color-scheme=dark playwright.dev
​
Codegen generating code for tests for playwright.dev website in dark mode csharp

模拟地理位置、语言和时区​

使用 --timezone、--geolocation 和 --lang 选项录制脚本和测试，同时模拟时区、语言和位置。页面打开后

  1. 接受 Cookie
  2. 在右上角，单击“定位我”按钮以查看地理位置的实际效果。
pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
​
Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language csharp

保留身份验证状态​

运行带有 --save-storage 的 codegen 以在会话结束时保存 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 都将恢复，从而使大多数 Web 应用程序进入已验证状态，而无需再次登录。这意味着你可以从已登录状态继续生成测试。

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

使用自定义设置录制​

如果你想在某些非标准设置中使用 codegen（例如，使用 BrowserContext.RouteAsync()），则可以调用 Page.PauseAsync()，它将打开一个带有 codegen 控件的单独窗口。

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();