跳到主要内容

测试生成器

简介

Playwright 内置了在你操作浏览器时自动生成测试用例的能力,是快速开始测试的绝佳方式。Playwright 会分析你的页面并选择最佳定位器,优先使用角色、文本和测试 id 定位器。如果生成器发现有多个元素匹配定位器,它会优化定位器,使其具有唯一性并能更好地定位目标元素。

使用 Playwright Inspector 生成测试

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

运行 Codegen

使用 codegen 命令运行测试生成器,后面跟上你想要生成测试的网站 URL。URL 是可选的,你也可以不加 URL 直接运行命令,然后在浏览器窗口中手动输入 URL。

playwright codegen demo.playwright.dev/todomvc

录制测试

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

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

  • 通过与页面交互自动录制点击、填写等操作
  • 通过点击工具栏中的图标,然后点击页面上的元素来录制断言。你可以选择:
    • 'assert visibility' 断言元素可见
    • 'assert text' 断言元素包含特定文本
    • 'assert value' 断言元素具有特定值

录制测试

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

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

生成定位器

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

  • 点击 '录制' 按钮停止录制,此时会出现 '选择定位器' 按钮。
  • 点击 '选择定位器' 按钮,然后在浏览器窗口中悬停在元素上,可以在每个元素下方看到高亮显示的定位器。
  • 要选择定位器,点击你想定位的元素,该定位器的代码会显示在选择定位器按钮旁边的输入框中。
  • 你可以在该输入框中编辑定位器以进行微调,或使用复制按钮将其复制粘贴到你的代码中。

选择定位器

模拟

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

模拟视口大小

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

playwright codegen --viewport-size="800,600" playwright.dev
Codegen 为 playwright.dev 网站生成特定视口的测试代码 python

模拟设备

使用 --device 选项可以模拟移动设备录制脚本和测试,该选项会设置视口大小、user agent 等参数。

playwright codegen --device="iPhone 13" playwright.dev
Codegen 为 playwright.dev 网站模拟 iPhone 13 生成测试代码 python

模拟配色方案

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

playwright codegen --color-scheme=dark playwright.dev
Codegen 为 playwright.dev 网站生成暗色模式测试代码 python

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

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

  1. 接受 cookies
  2. 在右上角点击定位按钮,查看地理位置模拟效果。
playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
Codegen 为 bing 地图生成测试代码,显示时区、地理位置为意大利�罗马,并使用意大利语 python

保持认证状态

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

playwright codegen github.com/microsoft/playwright --save-storage=auth.json
github 登录前页面 python

登录

完成认证并关闭浏览器后,auth.json 会包含存储状态,你可以在测试中复用它。

GitHub 登录界面

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

加载认证状态

使用 --load-storage 运行,可以加载之前保存的 auth.json。这样,cookieslocalStorageIndexedDB 数据都会被恢复,大多数 Web 应用会直接进入已认证状态,无需再次登录。这样你可以从已登录状态继续生成测试。

playwright codegen --load-storage=auth.json github.com/microsoft/playwright
github 已登录,展示 load storage 的用法 python

使用自定义方式录制

如果你希望在一些非标准场景下使用 codegen(比如使用 browser_context.route()),可以调用 page.pause(),它会打开一个带有 codegen 控件的独立窗口。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
# 确保以有界面模式运行。
browser = p.chromium.launch(headless=False)

# 按需设置上下文。
context = browser.new_context() # 传递任意选项
context.route('**/*', lambda route: route.continue_())

# 暂停页面,手动开始录制。
page = context.new_page()
page.pause()