告别Selenium？手把手教你用Playwright录制脚本，5分钟搞定Web自动化测试

5分钟极速上手Playwright脚本录制：零代码实现Web自动化测试

当产品经理突然丢给你一个刚上线的电商活动页，要求半小时内完成所有核心链路测试时，传统的手写Selenium脚本显然来不及。作为测试工程师，我最近发现微软开源的Playwright有个"作弊神器"——codegen脚本录制功能，能让没有任何编程基础的产品运营也能快速生成可执行的自动化测试脚本。上周我就用这个功能，在客户演示前15分钟紧急补全了支付流程的冒烟测试，成功避免了线上事故。

1. 为什么选择Playwright录制而非手写代码？

去年我们团队评估过市面主流测试工具，Playwright的录制功能在三个维度表现突出：

执行效率对比（Chromium浏览器）

实际体验中，Playwright的录制器能智能识别多种交互场景：

• 文件上传对话框的自动处理
• 动态加载元素的等待策略
• 鼠标悬停等复杂事件捕获

提示：录制生成的代码默认包含智能等待机制，比手动添加wait更可靠

2. 零基础搭建录制环境

只需要完成这两个前置步骤：

1. 安装Node.js（建议LTS版本）：

   # Mac/Linux用户推荐使用nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash nvm install --lts

2. 初始化Playwright环境：

   npm init playwright@latest

   安装过程会提示选择语言，支持：

   • TypeScript（默认）
   • JavaScript
   • Python
   • Java
   • C#

遇到网络问题可尝试设置国内镜像：

npm config set registry https://registry.npmmirror.com

3. 录制第一个测试脚本

假设要测试百度搜索功能，只需执行：

npx playwright codegen https://www.baidu.com

这时会出现两个窗口：

1. 浏览器窗口：实际操作的Chrome实例
2. 代码窗口：实时生成的测试脚本

典型操作流程：

1. 在搜索框输入"Playwright"
2. 点击"百度一下"按钮
3. 在结果页点击第一条链接
4. 按Stop按钮结束录制

生成的Python示例代码：

from playwright.sync_api import Playwright, sync_playwright def run(playwright: Playwright) -> None: browser = playwright.chromium.launch(headless=False) context = browser.new_context() page = context.new_page() page.goto("https://www.baidu.com/") page.locator("#kw").fill("Playwright") page.locator("#su").click() page.locator("text=Playwright: Fast and reliable end-to-end testing").click() with sync_playwright() as playwright: run(playwright)

4. 高级录制技巧与优化

4.1 多语言切换

在录制界面右上角可以实时切换输出语言，比如从Python改为Java：

import com.microsoft.playwright.*; public class Example { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { Browser browser = playwright.chromium().launch(); Page page = browser.newPage(); page.navigate("https://www.baidu.com/"); page.locator("#kw").fill("Playwright"); page.locator("#su").click(); page.locator("text=Playwright: Fast and reliable end-to-end testing").click(); } } }

4.2 断言自动生成

在操作过程中点击"Record assertions"按钮，可以自动添加验证点：

# 断言搜索结果标题包含关键字 expect(page).to_have_title(re.compile("Playwright")) # 验证结果数量大于5条 expect(page.locator("#content_left h3")).to_have_count(greater_than(5))

4.3 设备模拟

启动时添加--device参数模拟移动端：

npx playwright codegen --device="iPhone 13" https://m.baidu.com

5. 从录制到生产的进阶路径

虽然录制能快速产出脚本，但要做好持续集成还需要：

1. 元素定位优化：

   • 将page.locator("#kw")改为search_input = page.get_by_role("textbox", name="搜索框")
   • 使用>@pytest.fixture(scope="module") def browser(): with sync_playwright() as p: browser = p.chromium.launch() yield browser browser.close()

   • 集成到CI流水线：

     # GitHub Actions示例 - name: Run Playwright tests run: | npx playwright install npx playwright test

最近我在金融项目中将录制的脚本改造后，测试用例执行时间从原来的18分钟降到了4分钟。关键是把重复操作抽象成POM模式，再用录制功能快速生成新场景的测试骨架。