使用Playwright Inspector对网页进行UI检查和测试用例生成

参数命令：python3 -m playwright codegen   会自动打开两个窗口，左侧浏览器区域，右侧代码生成区，左侧直接操作，右侧即可生成对应的操作。当然如果生成的代码元素定位想要更换，可点击Recode暂停后，点击下方的浏览器定位，点到左侧的元素区域，重新定位元素。

playwright本身的python3 -m playwright codegen 命令已经提供足够强大的代码生成功能，但是录制生成的代码终究只是辅助功能，每次不可能都完全只使用录制的代码，而每次需要使用playwright codegen  命令时都需要重新执行命令然后打开浏览器操作，不够灵活，使用Playwright Inspector插件可以随时提供支持，

Playwright Inspector 是一个用于网页UI检查和测试用例生成的工具。它可以帮助测试人员更快速地理解网页结构,定位测试元素,并生成相应的Playwright测试代码。

Playwright Inspector原理

Playwright Inspector 基于 Playwright,通过以下方式实现其功能:

1. 启动带有Inspector的Chromium浏览器,访问目标网页。

2. Inspector会自动检测网页DOM结构,提取所有可测试元素,如按钮、输入框、链接等。

3. 测试人员可以在Inspector界面查看所有可测试元素,选择元素并生成Playwright测试代码。

4. Inspector会实时跟踪用户在浏览器中的每一次点击、输入等操作。如果用户在浏览器中执行某个交互,Inspector可以立即生成相应的Playwright测试代码。

5. Inspector可以一键下载生成的测试代码,用户只需要将其复制到测试脚本中,就可以完成自动化测试。

6. Inspector不依赖任何代码或框架,只需要简单的浏览器安装即可使用,大大降低了测试人员的学习成本。

Playwright Inspector步骤

1. 安装Playwright Inspector浏览器扩展。

2. 打开带有Inspector的Chromium浏览器。

3. 访问需要测试的网页。Inspector会自动检测网页元素并显示在界面左侧。

4. 选择想要测试的元素,点击“Generate Code”按钮生成Playwright代码。

5. 点击“Download Code”按钮下载生成的测试代码。

6. 将下载的测试代码复制到Playwright测试脚本中,然后运行该脚本即可完成测试。

7. 如果在浏览器中执行某个交互,Inspector会实时生成对应的测试代码。可以直接使用该代码完成测试用例。

8. 如有需要,可以在Inspector中重新选择其他元素,生成更多测试代码。

9. 使用常规方式运行和调试Playwright测试脚本,实现对目标网页的UI自动化测试。

Python示例

from playwright.sync_api import sync_playwright
def run(playwright):    browser = playwright.chromium.launch()    page = browser.new_page()    page.goto("http://www.whatsmyuseragent.org/")    page.fill("#ua-string-input", "Hello")    page.click("text=Check User Agent")    page.wait_for_selector("text=User Agent String: Hello")    browser.close()    with sync_playwright() as playwright:run(playwright)

这个测试脚本是使用Inspector一键生成的,可以在whatsmyuseragent.org网站输入“Hello”,并验证结果是否正确。测试人员只需要从Inspector下载代码,然后运行该脚本即可完成测试,无需理解网站的具体 DOM 结构。

import com.microsoft.playwright.*;
public class Example {    public static void main(String[] args) {        Playwright playwright = Playwright.create();        Browser browser = playwright.chromium().launch();        Page page = browser.newPage();        page.navigate("http://www.whatsmyuseragent.org/");        page.fill("#ua-string-input", "Hello");        page.click("text=Check User Agent");        page.waitForSelector("text=User Agent String: Hello");        browser.close();        playwright.close();    }}

Java示例的使用方式与Python示例基本一致。测试人员只需要从Inspector一键生成Java测试代码,然后运行即可,无需了解网页DOM结构和Playwright API。

总结

Playwright Inspector提供了强大的UI检查和测试用例生成功能,可以大幅提高测试人员的工作效率。理解Playwright Inspector的工作原理及其使用步骤,可以帮助我们更快速精准地完成测试开发任务。