企业官网建设流程全解析

Playwright工具的codegen用法完整指南
一、引言

在自动化测试领域，编写测试脚本往往是最耗时、最枯燥的环节。开发者需要手动定位元素、编写选择器、构造操作序列，这个过程不仅效率低下，还容易出错。Playwright 提供的 codegen（代码生成器）功能，彻底改变了这一现状——它能够通过录制用户在浏览器中的操作，自动生成可执行的测试代码。

codegen 的核心价值在于：‌所见即所得‌。你只需像普通用户一样在浏览器中点击、输入、导航，Playwright 就会在后台实时生成对应的代码。这不仅能大幅降低编写测试脚本的门槛，还能帮助开发者快速获取正确的选择器，避免手动调试的繁琐过程。

无论你是测试新手，还是经验丰富的自动化工程师，掌握 codegen 都能让你的工作效率提升数倍。

二、基础概念
2.1 什么是 codegen

codegen 是 Playwright 内置的一个命令行工具，它启动一个浏览器窗口和一个代码生成器面板。当你在浏览器中执行任何操作（点击、输入、选择等），它会自动将这些操作转换为 Playwright 脚本，并支持多种语言输出。

2.2 基本启动命令

最简单的启动方式：

bash
npx playwright codegen

执行后，会同时打开两个窗口：

‌浏览器窗口‌：用于录制操作
‌Playwright Inspector‌：显示生成的代码
2.3 指定目标 URL

可以直接在命令中指定要录制的网站：

bash
npx playwright codegen https://example.com

浏览器会自动导航到该网址，并开始录制后续操作。

2.4 选择输出语言

Playwright 支持生成多种语言的代码，通过 --target 参数指定：

bash

生成 JavaScript 代码

npx playwright codegen --target javascript

生成 Python 代码

npx playwright codegen --target python

生成 Java 代码

npx playwright codegen --target java

生成 C# 代码

npx playwright codegen --target csharp

2.5 保存生成的代码到文件

使用 --output 参数将代码直接保存到文件：

bash
npx playwright codegen --output test.py --target python https://example.com

录制结束后，生成的 Python 代码会自动保存到 test.py 文件中。

2.6 模拟设备与视口

可以模拟特定设备或自定义视口大小：

bash

模拟 iPhone 13

npx playwright codegen --device=“iPhone 13” https://example.com

自定义视口大小

npx playwright codegen --viewport-size=800,600 https://example.com

2.7 保留登录状态

使用 --save-storage 保存登录状态，避免重复登录：

bash