跳至主要内容

测试生成器

简介

Playwright 具备在您操作浏览器时自动生成测试的能力,这是快速开始测试的绝佳方式。Playwright 会分析您的页面并确定最佳定位器,优先采用角色、文本和测试ID定位器。如果生成器发现多个元素匹配定位器,它将优化定位器以确保其能唯一识别目标元素。

使用Playwright Inspector生成测试

运行codegen命令时会打开两个窗口:一个是浏览器窗口,您可以在其中与要测试的网站进行交互;另一个是Playwright Inspector窗口,您可以在其中录制测试,然后将它们复制到编辑器中。

运行代码生成器

使用codegen命令运行测试生成器,后跟您想为其生成测试的网站URL。URL是可选的,您也可以不带URL直接运行该命令,然后在浏览器窗口中手动添加URL。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen demo.playwright.dev/todomvc"

录制测试

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

使用测试生成器,您可以录制:

  • 通过简单地与页面交互来执行点击或填充等操作
  • Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose:
    • 'assert visibility' 用于断言元素是否可见
    • 'assert text' 用于断言元素包含特定文本
    • 'assert value' 用于断言元素具有特定值

recording a test

当您完成与页面的交互后,点击record按钮停止录制,并使用copy按钮将生成的代码复制到您的编辑器中。

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

生成定位器

您可以使用测试生成器生成定位器

  • 按下'Record'按钮停止录制,'Pick Locator'按钮将会出现。
  • 点击'Pick Locator'按钮,然后将鼠标悬停在浏览器窗口中的元素上,可以看到每个元素下方高亮显示的定位器。
  • 要选择一个定位器,请点击您想要定位的元素,该定位器的代码将出现在"Pick Locator"按钮旁边的字段中。
  • 然后您可以在此字段中编辑定位器以进行微调,或使用复制按钮复制它并粘贴到您的代码中。

picking a locator

模拟

您可以使用测试生成器通过模拟来生成测试,以便为特定视口、设备、配色方案生成测试,同时还能模拟地理位置、语言或时区。测试生成器还可以在保持认证状态的情况下生成测试。

模拟视口大小

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

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --viewport-size='800,600' playwright.dev"
Codegen generating code for tests for playwright.dev website with a specific viewport java

模拟设备

在使用--device选项模拟移动设备时记录脚本和测试,该选项会设置视口大小和用户代理等参数。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --device="iPhone 13" playwright.dev'
Codegen generating code for tests for playwright.dev website emulated for iPhone 13 java

模拟配色方案

在模拟配色方案时记录脚本和测试,使用 --color-scheme 选项。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --color-scheme=dark playwright.dev"
Codegen generating code for tests for playwright.dev website in dark mode java

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

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

  1. 接受Cookie
  2. 在右上角,点击"定位我"按钮查看地理位置功能。
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='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 java

保留认证状态

运行 codegen 时使用 --save-storage 参数可以在会话结束时保存 cookieslocalStorageIndexedDB 数据。这对于单独记录认证步骤并在后续录制更多测试时复用非常有用。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen github.com/microsoft/playwright  --save-storage=auth.json"
github page before logging in java

登录

在执行身份验证并关闭浏览器后,auth.json将包含存储状态,您可以在测试中重复使用它。

login to GitHub screen

请确保仅在本地使用auth.json,因为它包含敏感信息。在完成测试生成后,请将其添加到.gitignore或删除该文件。

加载认证状态

运行时可使用--load-storage参数来加载之前从auth.json保存的存储状态。通过这种方式,所有的cookieslocalStorageIndexedDB数据都会被恢复,使大多数网页应用直接进入已认证状态而无需再次登录。这意味着您可以从已登录状态继续生成测试用例。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --load-storage=auth.json github.com/microsoft/playwright"
github signed in showing use of load storage java

使用自定义设置进行录制

如果您想在非标准设置中使用代码生成(例如使用BrowserContext.route()),可以调用Page.pause(),这将打开一个带有代码生成控制功能的独立窗口。

import com.microsoft.playwright.*;

public class Example {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
BrowserType chromium = playwright.chromium();
// Make sure to run headed.
Browser browser = chromium.launch(new BrowserType.LaunchOptions().setHeadless(false));
// Setup context however you like.
BrowserContext context = browser.newContext(/* pass any options */);
context.route("**/*", route -> route.resume());
// Pause the page, and start recording manually.
Page page = context.newPage();
page.pause();
}
}
}