企业官网建设流程全解析

Playwright脚本录制进阶：解锁codegen的隐藏参数，打造真实测试场景

录制浏览器操作生成测试脚本是Playwright最受欢迎的功能之一，但大多数用户仅停留在基础的点选录制阶段。本文将带您深入探索playwright codegen的高级参数，解决实际测试中的三大痛点：设备环境差异、用户状态保持和地理位置依赖。

1. 为什么基础录制无法满足真实测试需求？

在团队内部的技术分享会上，我经常被问到："为什么录制的脚本换个环境就失效？"这背后反映的是基础录制功能的局限性。默认的playwright codegen只记录用户操作序列，却忽略了以下关键因素：

• 设备特性差异：移动端触控与桌面端点击的浏览器行为完全不同
• 用户状态丢失：需要登录的页面在每次回放时都要重新认证
• 环境依赖：时区、语言、地理位置等设置影响页面渲染逻辑
• 网络条件：不同地区的CDN节点返回内容可能不一致

这些问题导致录制的脚本成为"温室花朵"，只能在特定环境下运行。接下来我们将用四个实战场景，演示如何通过高级参数打造健壮的测试脚本。

2. 设备模拟：让录制脚本适配多端环境

上周在测试电商H5页面时，我们发现一个严重问题：桌面端录制的支付流程脚本，在移动端回放时总会卡死在弹窗环节。原因在于移动设备的视口尺寸和交互方式不同。

2.1 使用--device参数模拟真实设备

Playwright内置了40+种主流设备配置，通过--device参数可以完整模拟设备特性：

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

这条命令会：

1. 自动设置375x812的视口尺寸
2. 启用移动端触摸事件模拟
3. 调整User-Agent为iOS Safari
4. 启用高DPI屏幕仿真

设备模拟对比表：

2.2 自定义视口与输入特性

当内置设备不满足需求时，可以组合使用以下参数：

playwright codegen \ --viewport-size="414,896" \ --user-agent="Mozilla/5.0 (Linux; Android 10)..." \ --color-scheme="dark" \ https://m.example.com

提示：在移动端测试中，建议始终启用--timezone参数，因为很多应用会根据时区显示不同的运营活动

3. 用户状态保持：解决登录态持久化难题

金融类应用的测试最让人头疼的就是各种安全验证。通过以下方法可以实现"一次登录，多次回放"。

3.1 使用--save-storage保存登录态

录制登录后操作时添加参数：

playwright codegen \ --save-storage="auth.json" \ https://admin.example.com

操作完成后，auth.json会包含：

• Cookies
• LocalStorage
• SessionStorage

3.2 通过--load-storage复用认证状态

下次录制或运行脚本时加载存储状态：

playwright codegen \ --load-storage="auth.json" \ https://admin.example.com

注意：存储文件包含敏感信息，应当加入.gitignore并妥善保管

状态保持最佳实践：

1. 为每个测试角色创建独立的存储文件
2. 定期更新存储文件（特别是会话过期时间长的系统）
3. 在CI流程中加密存储认证文件

4. 环境模拟：地理位置与语言本地化测试

跨境电商项目需要验证不同地区用户的展示差异，传统方案需要搭建海外代理，而Playwright只需一行参数。

4.1 地理围栏测试

模拟旧金山用户访问：

playwright codegen \ --geolocation="37.7749,-122.4194" \ --lang="en-US" \ --timezone="America/Los_Angeles" \ https://global.example.com

参数组合效果：

• 显示美西时间格式
• 展示美元计价
• 启用英文界面
• 返回北美CDN内容

4.2 时区敏感操作测试

处理跨日业务时，时区设置尤为关键：

# 生成的脚本会自动包含context配置 context = browser.new_context( timezone_id="Asia/Shanghai", locale="zh-CN", geolocation={"longitude": 121.47, "latitude": 31.23} )

5. 高级技巧：提升录制脚本的健壮性

5.1 使用--test-id-attribute生成稳定选择器

前端框架变更时，CSS选择器容易失效。推荐使用自定义测试属性：

playwright codegen \ --test-id-attribute="data-testid" \ https://app.example.com

生成的脚本会优先使用类似这样的选择器：

page.click('[data-testid="submit-button"]')

5.2 网络流量记录与分析

录制时保存HAR文件有助于后续分析：

playwright codegen \ --save-har="network.har" \ --save-har-glob="**/api/**" \ https://app.example.com

这个配置会：

1. 记录所有包含/api/的请求
2. 保存请求/响应头和内容
3. 记录网络耗时指标

6. 综合案例：电商全流程测试录制

让我们用一个真实场景串联所有知识点。假设需要录制一个跨境电商的移动端测试流程：

playwright codegen \ --device="iPhone 13" \ --geolocation="35.6895,139.6917" \ --timezone="Asia/Tokyo" \ --lang="ja-JP" \ --save-storage="jp_user.json" \ --test-id-attribute="data-qa" \ --save-har="checkout.har" \ https://m.global-store.com/jp

这个命令实现了：

• 日本用户视角的移动端体验
• 日语界面展示
• 日元价格显示
• 登录状态持久化
• 稳定的元素选择器
• 结账流程网络监控

在项目实践中，我们将这类命令封装成Makefile或npm脚本，团队成