Playwright 安装使用教程

项目介绍

Playwright 是微软开源的 Web 测试与自动化框架。它支持使用单一 API 测试 Chromium、Firefox 和 WebKit 三大浏览器引擎，是目前最流行的端到端测试解决方案之一。

✨ ✨
核心优势：跨浏览器、自动等待、网络拦截、移动设备模拟、可视化调试 —— 一个框架搞定所有测试需求！

核心功能

支持浏览器

Playwright 支持所有主流浏览器引擎，在 Linux、macOS 和 Windows 上均可运行：

💡 💡
注意：所有浏览器均支持有头（Headed）和无头（Headless）两种模式运行。

安装配置

环境要求

📦 Node.js 18+

🐍 Python 3.8+

☕ Java 8+

🔷 .NET 8+

方式一：使用 init 命令（推荐）

# 在已有项目中初始化
npm init playwright@latest

# 或创建新项目
npm init playwright@latest new-project

方式二：手动安装

# 安装 Playwright Test
npm i -D @playwright/test

# 安装浏览器
npx playwright install

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Python 版安装

bash

复制

# 安装 Playwright for Python
pip install playwright

# 安装浏览器
playwright install

编写测试

基本测试示例

typescript

复制

import { test, expect } from '@playwright/test';

test('首页标题验证', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('开始使用链接跳转', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

运行测试

bash

复制

# 运行所有测试
npx playwright test

# 运行单个测试文件
npx playwright test tests/example.spec.ts

# 以有头模式运行（显示浏览器）
npx playwright test --headed

# 指定浏览器运行
npx playwright test --project=chromium

# 打开 HTML 测试报告
npx playwright show-report

移动端模拟测试

typescript

复制

import { test, devices } from '@playwright/test';

test.use({ ...devices['iPhone 13 Pro'] });

test('移动端页面测试', async ({ page }) => {
  await page.goto('https://example.com');
  await page.screenshot({ path: 'mobile.png' });
});

网络请求拦截

typescript

复制

import { test } from '@playwright/test';

test('拦截 API 请求', async ({ page }) => {
  await page.route('**/api/users', route => {
    route.fulfill({
      status: 200,
      body: JSON.stringify([{ name: 'IT小圈' }]),
    });
  });
  await page.goto('https://example.com');
});

强大工具链

Codegen – 录制生成测试代码

Playwright 提供交互式录制工具，操作浏览器自动生成测试代码：

bash

复制

# 启动录制工具
npx playwright codegen playwright.dev

🎬 🎬
Codegen：打开浏览器后正常操作，Playwright 会实时生成对应的测试代码，支持导出为 TypeScript、Python、Java、C# 等多种语言！

Playwright Inspector – 调试利器

步进执行测试、查看选择器、实时检查页面状态：

bash

复制

# 以调试模式运行
npx playwright test --debug

Trace Viewer – 可视化追踪

测试失败时自动录制执行轨迹，包含截图、DOM快照、网络请求：

bash

复制

# 查看追踪文件
npx playwright show-trace trace.zip

AI + Playwright

Playwright 与 AI 工具（如 Cursor、GitHub Copilot）结合，能实现真正的”AI自动化测试”：

💡 💡
AI 时代测试新范式：写代码时让 AI 自动生成对应测试，代码质量和测试覆盖率同步提升！

常见问题

Q1: Playwright 和 Selenium 有什么区别？

Playwright 是进程外执行架构，不受浏览器沙箱限制；自动等待机制消除了大部分 flaky tests；且原生支持现代 Web 特性（Shadow DOM、iframe、多标签页）。

Q2: Playwright 支持哪些编程语言？

官方支持 TypeScript / JavaScript、Python、.NET（C#）和 Java 四种语言，API 完全一致。

Q3: 可以在 CI/CD 中运行吗？

当然！Playwright 原生支持 GitHub Actions、GitLab CI、Jenkins 等主流 CI 平台，init 命令会自动生成 CI 配置文件。

Q4: 如何只安装特定浏览器？

bash

复制

# 只安装 Chromium
npx playwright install chromium

# 只安装 Firefox
npx playwright install firefox

Q5: Playwright 能做爬虫吗？

可以。Playwright 提供完整的浏览器自动化 API，可用于数据抓取、截图、PDF 生成等场景。但请遵守目标网站的使用条款。

Q6: 如何与 AI 编程工具配合使用？

在 Cursor 等 AI 编辑器中，只需描述测试需求，AI 会自动编写 Playwright 测试代码。结合 MCP 协议，AI 还能直接操控浏览器执行测试验证。