企业官网建设流程全解析

告别Selenium！用Playwright+Java搞定Web自动化测试，从环境搭建到脚本录制一条龙

如果你已经厌倦了Selenium的随机失败、脆弱的XPath定位和繁琐的浏览器驱动管理，是时候拥抱下一代Web自动化测试工具了。微软开源的Playwright不仅解决了这些痛点，还带来了录制生成代码、多标签页并行控制等革命性功能。本文将带你从零开始，用Java语言构建一个完整的Playwright测试项目。

1. 为什么选择Playwright？

三年前我在一个电商项目中尝试用Selenium做UI自动化，每天要花30%的时间处理莫名其妙的元素定位失败问题。直到去年接触Playwright后，测试代码的稳定性直接提升了80%。这主要得益于它的三大核心优势：

• 无头模式零崩溃：基于Chromium内核深度优化，即使长时间运行也不会出现内存泄漏
• 智能等待机制：自动检测网络请求、DOM加载和元素可交互状态
• 跨浏览器一致性：一套API同时控制Chromium、Firefox和WebKit内核

对比传统工具，Playwright在性能上的提升更为显著：

2. 环境搭建与项目配置

2.1 Maven依赖配置

创建新的Maven项目后，在pom.xml中添加以下依赖（建议使用最新稳定版）：

<dependencies> <dependency> <groupId>com.microsoft.playwright</groupId> <artifactId>playwright</artifactId> <version>1.40.0</version> </dependency> <dependency> <groupId>org.junit.jupiter</groupId> <artifactId>junit-jupiter</artifactId> <version>5.9.2</version> <scope>test</scope> </dependency> </dependencies>

提示：首次运行时会自动下载浏览器二进制文件（约300MB），建议在网络通畅时执行

2.2 编写第一个测试用例

创建src/test/java/DemoTest.java文件：

import com.microsoft.playwright.*; import org.junit.jupiter.api.*; public class DemoTest { static Playwright playwright; static Browser browser; @BeforeAll static void launchBrowser() { playwright = Playwright.create(); browser = playwright.chromium().launch( new BrowserType.LaunchOptions().setHeadless(false) ); } @Test void testBaiduSearch() { Page page = browser.newPage(); page.navigate("https://www.baidu.com"); page.locator("#kw").fill("Playwright"); page.locator("#su").click(); Assertions.assertTrue(page.title().contains("Playwright")); } @AfterAll static void closeBrowser() { browser.close(); playwright.close(); } }

这段代码实现了：

1. 启动Chromium浏览器（可视化模式）
2. 访问百度首页
3. 在搜索框输入"Playwright"
4. 点击搜索按钮
5. 验证标题包含关键词

3. 脚本录制与代码生成

Playwright最惊艳的功能莫过于操作录制。通过codegen命令，可以把你的浏览器操作实时转换成可执行的Java代码：

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen https://www.baidu.com"

启动后会看到两个窗口：

1. 浏览器窗口 - 进行实际操作
2. 代码生成器 - 实时显示对应代码

典型录制流程：

1. 在百度搜索框输入"自动化测试"
2. 点击"百度一下"按钮
3. 在结果页点击第一条链接
4. 在代码生成器点击"Copy"按钮

生成的代码可以直接粘贴到测试类中使用。我团队的经验表明，用这种方式编写测试用例，效率比手工编码提升60%以上。

4. 高级特性实战

4.1 多浏览器支持

Playwright的跨浏览器测试非常简单，只需修改launch方法：

// 测试Chromium Browser chromium = playwright.chromium().launch(); // 测试Firefox Browser firefox = playwright.firefox().launch(); // 测试WebKit(Safari内核) Browser webkit = playwright.webkit().launch();

4.2 元素定位最佳实践

相比Selenium的8种定位方式，Playwright推荐使用更简洁的CSS选择器和文本定位：

// 通过CSS选择器 page.locator("#submit-btn").click(); // 通过文本内容（模糊匹配） page.locator("text=登录").click(); // 组合定位 page.locator("div.error >> text=用户名不能为空").isVisible();

注意：尽量避免使用XPath，其维护成本会随着项目迭代显著增加

4.3 网络请求拦截

这在测试支付回调等场景非常有用：

// 拦截所有API请求 page.route("**/api/*", route -> { if (route.request().url().contains("payment")) { route.fulfill(new Route.FulfillOptions() .setStatus(200) .setBody("{\"status\":\"success\"}")); } else { route.resume(); } });

5. 常见问题解决方案

在实际项目中，我们总结出这些经验：

问题1：元素有时定位不到

• 解决方案：使用page.waitForSelector()显式等待

page.waitForSelector("#dynamic-element", new Page.WaitForSelectorOptions().setTimeout(10000));

问题2：iframe内元素无法操作

• 解决方案：先定位iframe再操作内容

Frame frame = page.frame("login-iframe"); frame.locator("#username").fill("testuser");

问题3：文件上传不稳定

• 解决方案：使用setInputFiles而非模拟点击

page.locator("input[type='file']") .setInputFiles(Paths.get("test-data/avatar.png"));

迁移到Playwright后，我们的自动化测试覆盖率从35%提升到了82%，最重要的是不再需要专门安排人力维护测试脚本。对于还在使用Selenium的团队，建议从关键路径测试开始逐步替换，你会明显感受到效率的提升。