【Python知识】Playwright for Python 脚本录制指南

Playwright for Python 脚本录制指南

Playwright 提供了一个强大的脚本录制工具（Codegen），可以自动记录用户操作并生成可执行的 Python 代码。这是快速创建自动化测试脚本的绝佳方式。

启动录制工具

基本录制命令

# 启动录制工具并打开指定网站
playwright codegen https://example.com# 指定输出文件
playwright codegen -o example_script.py https://example.com# 指定浏览器（chromium, firefox, webkit）
playwright codegen --browser firefox https://example.com# 在无头模式下录制
playwright codegen --headless https://example.com# 设置视口大小
playwright codegen --viewport-size=1280,720 https://example.com

录制保存的凭据

# 使用已保存的认证状态
playwright codegen --save-storage=auth.json https://example.com/login# 使用之前保存的认证状态
playwright codegen --load-storage=auth.json https://example.com/dashboard

录制过程详解

1. 启动录制会话

运行以下命令开始录制：

playwright codegen -o my_script.py https://demoqa.com/automation-practice-form

这将打开两个窗口：

1. 浏览器窗口 - 用于执行操作
2. Playwright Inspector - 显示实时生成的代码

2. 执行操作并观察代码生成

在浏览器中执行各种操作，Inspector 会实时生成对应的代码：

操作类型	生成的代码示例
点击元素	page.locator("text=Submit").click()
填写表单	page.locator("#firstName").fill("John")
选择选项	page.select_option("#countries", "USA")
键盘操作	page.keyboard.press("Enter")
悬停操作	page.locator(".menu").hover()

3. 结束录制

完成所有操作后，关闭浏览器窗口或按 Ctrl+C 停止录制。生成的代码将保存到指定的文件中。

生成的代码结构

录制工具会生成结构良好的 Python 代码：

from playwright.sync_api import Playwright, sync_playwrightdef run(playwright: Playwright) -> None:browser = playwright.chromium.launch(headless=False)context = browser.new_context()page = context.new_page()# 导航到页面page.goto("https://demoqa.com/automation-practice-form")# 填写表单page.locator("#firstName").click()page.locator("#firstName").fill("John")page.locator("#lastName").click()page.locator("#lastName").fill("Doe")page.locator("#userEmail").click()page.locator("#userEmail").fill("[e-mail]")# 选择性别page.locator("label:nth-child(2) > .custom-control-label").click()# 输入手机号page.locator("#userNumber").click()page.locator("#userNumber").fill("1234567890")# 选择生日page.locator("#dateOfBirthInput").click()page.locator(".react-datepicker__month-select").select_option("0")page.locator(".react-datepicker__year-select").select_option("1990")page.locator(".react-datepicker__day--001:not(.react-datepicker__day--outside-month)").click()# 选择爱好page.locator("label:nth-child(2) > .custom-control-label").click()# 上传图片page.locator("#uploadPicture").set_input_files("profile.png")# 填写地址page.locator("#currentAddress").click()page.locator("#currentAddress").fill("123 Main St, City, Country")# 提交表单page.locator("#submit").click()# 关闭浏览器context.close()browser.close()with sync_playwright() as playwright:run(playwright)

优化生成的代码

虽然录制的代码可以直接运行，但通常需要优化以提高可维护性和健壮性：

1. 添加等待和断言

# 原始代码
page.locator("#submit").click()# 优化后 - 添加等待和验证
page.locator("#submit").click()
page.wait_for_selector("#success-message")
assert page.locator("text=Thanks for submitting the form").is_visible()

2. 使用更可靠的选择器

# 原始代码 - 使用不稳定的选择器
page.locator("div:nth-child(3) > .button").click()# 优化后 - 使用更稳定的选择器
page.locator("[data-testid='submit-button']").click()

3. 创建页面对象模型

将生成的代码重构为页面对象模式：

# pages/registration_page.py
class RegistrationPage:def __init__(self, page):self.page = pagedef navigate(self):self.page.goto("https://demoqa.com/automation-practice-form")def fill_first_name(self, name):self.page.locator("#firstName").fill(name)def fill_last_name(self, name):self.page.locator("#lastName").fill(name)def select_gender(self, gender):self.page.locator(f"text={gender}").click()def submit(self):self.page.locator("#submit").click()self.page.wait_for_selector("#success-message")

4. 添加错误处理和日志

import logginglogging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)def test_registration():try:page.goto("https://demoqa.com/automation-practice-form")logger.info("导航到注册页面")page.locator("#firstName").fill("John")logger.info("填写名字")# 更多操作...except Exception as e:logger.error(f"测试失败: {e}")page.screenshot(path="error.png")raise

高级录制技巧

1. 录制特定用户流程

# 录制登录流程
playwright codegen --save-storage=auth.json https://example.com/login# 使用已保存的认证状态录制其他操作
playwright codegen --load-storage=auth.json https://example.com/dashboard

2. 自定义选择器策略

在录制前设置首选的选择器策略：

# 优先使用文本选择器
playwright codegen --selector-engine=text https://example.com# 优先使用CSS选择器（默认）
playwright codegen --selector-engine=css https://example.com

3. 录制移动设备视图

# 模拟移动设备
playwright codegen --device="iPhone 12" https://example.com# 自定义视口和用户代理
playwright codegen \--viewport-size=375,812 \--user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15" \https://example.com

将录制脚本集成到测试框架

将录制的脚本转换为 Pytest 测试用例：

# test_registration.py
import pytest
from playwright.sync_api import Page, expectdef test_registration_form(page: Page):# 导航到页面page.goto("https://demoqa.com/automation-practice-form")# 填写表单page.locator("#firstName").fill("John")page.locator("#lastName").fill("Doe")page.locator("#userEmail").fill("[e-mail]")# 选择性别page.locator("label:nth-child(2) > .custom-control-label").click()# 提交表单page.locator("#submit").click()# 验证成功消息expect(page.locator("#example-modal-sizes-title-lg")).to_have_text("Thanks for submitting the form")

常见问题与解决方案

1. 选择器不稳定

问题：生成的代码使用易变的 CSS 选择器。

解决方案：

• 使用 data-testid 属性
• 使用文本选择器（text=Submit）
• 使用 XPath 选择器（谨慎使用）

2. 缺少等待机制

问题：生成的代码没有足够的等待，可能导致竞态条件。

解决方案：

• 添加 page.wait_for_selector()
• 使用 page.wait_for_timeout()（尽量避免）
• 添加断言来验证状态

3. 代码冗余

问题：生成的代码包含重复操作。

解决方案：

• 提取公共操作为函数
• 创建页面对象模型
• 使用循环处理重复操作

最佳实践

1. 录制后重构：总是优化和重构录制的代码
2. 添加验证：为每个重要操作添加断言
3. 使用数据驱动：参数化测试数据
4. 实现页面对象：创建可重用的页面组件
5. 处理动态内容：添加适当的等待策略
6. 错误处理：添加适当的异常处理和日志记录

总结

Playwright 的脚本录制功能是快速创建自动化测试的强大工具。通过以下步骤，您可以高效地使用它：

1. 使用 playwright codegen 启动录制会话
2. 执行要自动化的用户操作
3. 停止录制并保存生成的代码
4. 优化和重构代码以提高质量和可维护性
5. 将脚本集成到测试框架中

记住，录制工具是起点而不是终点。始终需要人工审查和优化生成的代码，以确保其健壮性、可维护性和可靠性。

相关文献

【Python知识】使用 Playwright for Python 从零开始搭建自动化测试方案