共计 1977 个字符，预计需要花费 5 分钟才能阅读完成。
为什么我们需要 Playwright？
在开始之前，我们先聊聊测试自动化领域的痛点。作为一个从 Selenium 转过来的开发者，我深刻理解传统工具的局限性：
- 浏览器兼容性问题让人头疼，不同浏览器需要不同的驱动
- 测试脚本经常因为元素加载时间不同步而失败
- 难以模拟复杂的用户交互和网络条件
- 执行速度慢，特别是跨浏览器测试时
Playwright 的独特优势
经过多方比较，Playwright 脱颖而出是因为它解决了这些核心痛点：
- 真正的跨浏览器支持：Chromium、WebKit 和 Firefox 全支持，API 完全一致
- 自动等待机制：内置智能等待，不再需要手动添加 sleep
- 网络拦截：可以 mock 请求和响应，测试边缘场景
- 多上下文隔离：轻松实现并行测试
- 移动设备模拟：支持各种设备模式和触摸事件
环境搭建（5 分钟搞定）
-
首先确保安装了 Node.js（建议 16+ 版本）：
node -v -
创建项目目录并初始化：
mkdir playwright-demo && cd playwright-demo npm init -y -
安装 Playwright（会自动安装浏览器）：
npm init playwright@latest -
验证安装：
npx playwright test
第一个测试用例
让我们从最基本的百度搜索测试开始。创建tests/demo.spec.js：
const {test, expect} = require('@playwright/test');
test('百度搜索测试', async ({ page}) => {
// 访问百度
await page.goto('https://www.baidu.com');
// 输入搜索词
await page.fill('#kw', 'Playwright');
// 点击搜索按钮
await page.click('#su');
// 验证结果
await expect(page).toHaveTitle(/Playwright/);
// 截图保存
await page.screenshot({path: 'search-result.png'});
});运行测试：
npx playwright test demo.spec.js元素定位策略
Playwright 提供了多种强大的定位方式：
- 文本定位：
page.click('text= 登录') - CSS 选择器：
page.fill('#username', 'test') - XPath：
page.click('//button[contains(@class,"submit")]') - 组合定位：
page.click('article:has-text("Playwright") >> button')
建议优先使用文本和 CSS 选择器，它们更易维护。
进阶技巧
处理动态内容
当遇到动态生成的元素时，可以这样处理：
// 等待特定元素出现
await page.waitForSelector('.dynamic-content');
// 或者等待网络请求完成
await page.waitForResponse(response =>
response.url().includes('/api/data')
);测试数据管理
推荐使用 JSON 文件管理测试数据：
const testData = require('./test-data.json');
test('使用测试数据登录', async ({ page}) => {await page.fill('#username', testData.validUser.username);
await page.fill('#password', testData.validUser.password);
});并行测试配置
在 playwright.config.js 中启用并行：
module.exports = {
workers: process.env.CI ? 2 : 4,
// ... 其他配置
};常见问题解决
-
元素找不到？
检查是否在 iframe 中，需要使用frame.locator() -
超时错误？
适当调整test.setTimeout(60000)或检查网络代理 -
浏览器启动失败？
运行npx playwright install重新安装浏览器
性能优化建议
- 复用浏览器上下文：
browser.newContext() - 并行运行不相关的测试用例
- 禁用不必要的截图和视频录制
- 使用
--shard参数分割测试套件
下一步学习建议
- 尝试为你的项目添加一个真实场景的测试
- 探索 Playwright 的调试工具：
npx playwright show-trace - 学习使用
page.route()进行网络拦截 - 查看官方示例仓库：https://github.com/microsoft/playwright
Playwright 的学习曲线平缓但功能强大，希望这篇指南能帮助你快速入门。在实际项目中多实践，你会发现它能极大提升测试效率和质量。
正文完
