playwright

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Playwright E2E Testing

Playwright E2E测试

Generate and run Playwright end-to-end tests for web applications.

为Web应用生成并运行Playwright端到端测试。

Prerequisites

前置条件

bash

npx playwright --version

If not installed:

bash

npm init playwright@latest

bash

npx playwright --version

如果未安装：

bash

npm init playwright@latest

or add to existing project:

或添加到现有项目：

npm install -D @playwright/test && npx playwright install

undefined

npm install -D @playwright/test && npx playwright install

undefined

Workflow

工作流程

1. Analyze

1. 分析

Read the source files for the page/component to test. Understand routes, interactive elements, and expected behaviors.

读取待测试页面/组件的源文件，理解路由、交互元素和预期行为。

2. Generate Test File

2. 生成测试文件

Create a test file following the project's existing patterns and directory structure.

typescript

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

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    // Setup: navigate, authenticate, seed data
  });

  test('should do expected behavior', async ({ page }) => {
    // Arrange
    // Act
    // Assert
  });
});

遵循项目现有模式和目录结构创建测试文件。

typescript

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

test.describe('Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    // 准备工作：导航、认证、初始化数据
  });

  test('should do expected behavior', async ({ page }) => {
    // 安排（Arrange）
    // 执行（Act）
    // 断言（Assert）
  });
});

3. Run Tests

3. 运行测试

bash

npx playwright test <file>           # Run specific test file
npx playwright test --headed          # With visible browser
npx playwright test --ui              # Playwright UI mode
npx playwright test --trace on        # Capture trace for debugging

bash

npx playwright test <file>           # 运行指定测试文件
npx playwright test --headed          # 显示浏览器窗口运行
npx playwright test --ui              # Playwright UI模式
npx playwright test --trace on        # 捕获跟踪信息用于调试

4. Debug Failures

4. 调试失败测试

Read error output carefully

Use

--trace on

and open trace viewer:

npx playwright show-trace trace.zip

Take screenshots on failure:

await page.screenshot({ path: 'debug.png' })

Use
```
page.pause()
```
for step-by-step debugging in headed mode

仔细阅读错误输出

使用

--trace on

并打开跟踪查看器：

npx playwright show-trace trace.zip

失败时截图：

await page.screenshot({ path: 'debug.png' })

在显示浏览器窗口模式下使用
```
page.pause()
```
进行分步调试

Capabilities

功能特性

Navigation:
```
page.goto()
```
, URL assertions, redirect verification

Forms:

page.fill()

page.selectOption()

page.check()

, multi-step wizards

Assertions:

expect(page).toHaveURL()

expect(locator).toBeVisible()

toHaveText()

Screenshots:
```
page.screenshot()
```
, full-page, element-level
Visual regression:
```
expect(page).toHaveScreenshot()
```
with thresholds
Accessibility:
```
@axe-core/playwright
```
, ARIA role selectors, keyboard navigation
Network:
```
page.route()
```
for mocking,
```
page.waitForResponse()
```
for API calls

导航：
```
page.goto()
```
、URL断言、重定向验证

表单：

page.fill()

、

page.selectOption()

、

page.check()

、多步骤向导

断言：

expect(page).toHaveURL()

、

expect(locator).toBeVisible()

、

toHaveText()

截图：
```
page.screenshot()
```
、全页面截图、元素级截图
视觉回归测试：带阈值的
```
expect(page).toHaveScreenshot()
```
无障碍测试：
```
@axe-core/playwright
```
、ARIA角色选择器、键盘导航
网络：
```
page.route()
```
用于模拟请求、
```
page.waitForResponse()
```
用于等待API调用

Tips

小贴士

Use
```
data-testid
```
attributes for stable selectors
Prefer user-visible text and ARIA roles over CSS selectors
Use
```
test.step()
```
for complex multi-step flows
Set
```
baseURL
```
in
```
playwright.config.ts
```
Use
```
page.waitForResponse()
```
for async navigation
Place test files alongside existing test patterns in the project

使用
```
data-testid
```
属性作为稳定选择器
优先使用用户可见文本和ARIA角色而非CSS选择器
复杂多步骤流程使用
```
test.step()
```
在
```
playwright.config.ts
```
中设置
```
baseURL
```
异步导航使用
```
page.waitForResponse()
```
将测试文件放在项目现有测试模式对应的位置