Playwright：微软出品，端到端测试与网页自动化利器-壹联网络

在现代Web开发中，自动化测试是保证应用质量的关键环节。Playwright是微软出品的一款功能强大的端到端（E2E）测试框架和网页自动化工具，支持所有现代浏览器引擎（Chromium、Firefox、WebKit），提供一致的API，让开发者能够用同一套代码同时测试Chrome、Firefox和Safari上的Web应用。

项目介绍

Playwright由微软的Playwright团队开发和维护，是一个用于Web测试和自动化的开源Node.js库。它最初是为解决微软内部Edge浏览器的测试需求而创建，如今已发展成为一个跨浏览器、跨平台的Web自动化解决方案，被全球数十万开发者广泛使用。Playwright支持所有现代Web功能，包括SPA、Shadow DOM、Service Worker等，GitHub星标超过63,000颗。

核心特色功能

1. 跨浏览器一致性
Playwright同时支持Chromium（Chrome/Edge）、 Firefox和WebKit（Safari）三种浏览器引擎，提供完全一致的API。这意味着你写一套测试代码，可以在三大浏览器引擎上同时运行，大大降低了跨浏览器测试的成本。

2. 强大的自动等待机制
Playwright内置智能自动等待机制，在执行操作前会自动等待元素变为可操作状态（可点击、可输入等），无需手动添加sleep或waitForSelector，大幅减少测试的不稳定性。

3. 零配置的多浏览器支持
Playwright会自动下载和管理所需的浏览器二进制文件，无需手动配置浏览器驱动，真正做到”安装即用”。

4. 网络拦截和请求控制
可以拦截、修改或模拟网络请求，实现Mock数据、模拟慢速网络、测试离线场景等功能。这对于前端开发调试和测试隔离非常有价值。

5. 强大的定位器（Locator）
Playwright提供了比传统选择器更强大的定位器API，支持按文本、按占位符、按角色（role）等语义化方式定位元素，比XPath和CSS选择器更稳定可靠。

6. 内置录制功能
Playwright内置了Codegen（代码生成器），可以通过图形界面录制用户操作，自动生成Playwright测试代码，降低了自动化测试的入门门槛。

7. 移动端模拟
可以模拟iOS和Android设备，在桌面浏览器中测试移动端Web应用的显示效果和交互行为，无需真实移动设备。

8. WebSocket实时通信支持
支持测试依赖WebSocket实时通信的Web应用，如在线协作工具、实时聊天、多人游戏等场景。

安装步骤

环境要求：Node.js 18+

方式一：npm安装（推荐）

npm init playwright@latest
# 或在现有项目中安装
npm install playwright

# 安装浏览器驱动
npx playwright install

方式二：Python SDK（playwright-py）

pip install playwright
python -m playwright install

方式三：Docker环境

# 使用Playwright官方Docker镜像
docker run -it --rm mcr.microsoft.com/playwright:v1.50.0-jammy

使用方法

第一个Playwright测试

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com');

  // 等待页面标题出现
  const title = await page.title();
  console.log('Page title:', title);

  // 截取截图
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

表单操作和断言

const { chromium, expect } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('https://todo.example.com');

  // 添加待办事项
  await page.getByPlaceholder('What needs to be done?').fill('Buy groceries');
  await page.getByPlaceholder('What needs to be done?').press('Enter');

  // 断言待办已添加
  await expect(page.getByText('Buy groceries')).toBeVisible();

  // 点击完成
  await page.getByText('Buy groceries').click();

  await browser.close();
})();

网络拦截（Mock数据）

await page.route('**/api/user', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ name: 'Test User', email: 'test@example.com' }),
  });
});

await page.goto('https://example.com/profile');
// 此时页面会使用Mock数据，而非真实API

使用Codegen录制测试

# 在终端运行Codegen，它会打开浏览器
npx playwright codegen

# 在图形界面中操作网页，Playwright会自动生成测试代码

并行测试执行

// playwright.config.js
export default {
  workers: 4,  // 同时运行4个测试进程
  retries: 2,  // 失败的测试重试2次
};

适用场景

Playwright适用于以下场景：

· 端到端自动化测试：覆盖完整用户流程的自动化测试，如登录->下单->支付
· 回归测试：每次代码提交后自动运行测试套件，确保新代码不破坏现有功能
· 视觉回归测试：配合视觉对比工具检测UI变化
· 网页数据抓取：对需要JavaScript渲染的SPA页面进行数据提取
· 性能测试：测量页面加载时间、交互响应时间等关键指标
· 跨浏览器兼容性测试：验证Web应用在Chrome/Firefox/Safari上的一致性
· 自动化表单填写和批量操作：定期自动提交表单、批量上传文件等