跳到主要内容

测试生成器

引言​

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' 来断言元素具有特定值

recording a test

​

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

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

生成定位符​

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

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

picking a locator

模拟​

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

模拟视口大小​

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

playwright codegen --viewport-size="800,600" playwright.dev
​
Codegen generating code for tests for playwright.dev website with a specific viewport python

模拟设备​

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

playwright codegen --device="iPhone 13" playwright.dev
​
Codegen generating code for tests for playwright.dev website emulated for iPhone 13 python

模拟颜色方案​

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

playwright codegen --color-scheme=dark playwright.dev
​
Codegen generating code for tests for playwright.dev website in dark mode python

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

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

  1. 接受 Cookie
  2. 在右上角，点击“定位我”按钮以查看地理位置功能。
playwright 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 python

保留身份验证状态​

运行带 --save-storage 选项的 codegen 命令，以在会话结束时保存 cookie、localStorage 和 IndexedDB 数据。这对于单独录制身份验证步骤并在之后录制更多测试时重用它很有用。

playwright codegen github.com/microsoft/playwright --save-storage=auth.json
​
github page before logging in python

登录​

完成身份验证并关闭浏览器后，auth.json 文件将包含存储状态，您可以在测试中重用这些状态。

login to GitHub screen

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

加载身份验证状态​

运行带 --load-storage 选项的命令，从 auth.json 加载之前保存的存储状态。这样，所有 cookie、localStorage 和 IndexedDB 数据都会被恢复，使大多数 Web 应用进入身份验证状态，而无需再次登录。这意味着您可以从已登录状态继续生成测试。

playwright codegen --load-storage=auth.json github.com/microsoft/playwright
​
github signed in showing use of load storage python

使用自定义设置录制​

如果您想在某些非标准设置中使用 codegen (例如，使用 browser_context.route())，可以调用 page.pause()，这会打开一个带有 codegen 控件的单独窗口。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # Make sure to run headed.
    browser = p.chromium.launch(headless=False)

    # Setup context however you like.
    context = browser.new_context() # Pass any options
    context.route('**/*', lambda route: route.continue_())

    # Pause the page, and start recording manually.
    page = context.new_page()
    page.pause()