Playwright自动化测试：录制脚本与元素定位实战

1. Playwright录制脚本与元素定位实战指南

作为一名长期奋战在测试自动化一线的工程师，我深知UI自动化中最令人头疼的就是元素定位问题。传统的定位方式不仅效率低下，还经常因为页面变动导致脚本失效。直到遇见了Playwright这个现代Web自动化测试框架，它提供的录制脚本和智能定位功能彻底改变了我的工作方式。

Playwright的录制功能(codegen)允许我们通过可视化操作自动生成测试脚本，同时其内置的定位器(Locators)机制采用了先进的自动等待和重试策略，大幅提升了测试稳定性。本文将分享我在实际项目中积累的Playwright录制脚本技巧和元素定位最佳实践，这些经验帮助我们的自动化测试覆盖率从30%提升到了85%，脚本维护时间减少了60%。

2. 环境准备与录制工具配置

2.1 基础环境搭建

在开始使用Playwright的录制功能前，需要确保开发环境准备就绪。以下是经过多个项目验证的可靠配置方案：

bash复制# 安装Node.js（建议使用LTS版本）
nvm install 16.14.2
nvm use 16.14.2

# 初始化项目目录
mkdir playwright-demo && cd playwright-demo
npm init -y

# 安装Playwright
npm install -D @playwright/test

# 安装浏览器二进制文件（约300MB）
npx playwright install

注意：Playwright会下载Chromium、Firefox和WebKit的专用测试版本，这些浏览器与常规安装的版本隔离，确保测试环境一致性。

2.2 启动脚本录制器

Playwright的codegen工具是录制功能的核心，它提供了两种启动方式：

1. 基础录制模式 - 打开空白页面开始录制：

bash复制npx playwright codegen

2. 指定URL录制模式 - 直接导航到目标页面：

bash复制npx playwright codegen https://example.com/login

在实际项目中，我发现第二种方式更为高效，特别是当测试复杂登录流程时，可以避免重复的初始导航操作。

2.3 录制界面深度解析

启动codegen后会看到两个并排窗口（如图）：

• 操作浏览器：右侧窗口是配备了测试工具的Chromium实例
• 代码生成器：左侧窗口实时显示生成的测试脚本

代码生成器顶部的控制栏有几个关键功能：

• Target切换：支持Python(Pytest)、Java、C#等多种语言
• Record按钮：暂停/继续录制
• Copy按钮：一键复制生成的全部代码
• Clear按钮：清空当前生成的脚本

经过20+项目的实践，我总结出录制时的最佳操作顺序：

1. 先进行一轮完整操作流程
2. 暂停录制检查生成的脚本
3. 对关键步骤添加注释