mcpField
P
playwright

playwright

github.com/ariadoss测试与质量1266 次安装1 天前更新
代码仓库

关于 playwright

playwright 是用于为 Web 应用生成并运行 Playwright 端到端测试的技能。它指导按项目现有模式编写测试，并通过跟踪记录、截图和交互式检查进行调试。

主要功能

  1. 01分析页面与预期行为
  2. 02按项目模式生成测试
  3. 03以有头或 UI 模式运行测试
  4. 04使用跟踪记录和截图调试
  5. 05测试视觉输出与无障碍性

适用场景

  1. 01测试网页导航和表单流程
  2. 02通过截图断言检查视觉变化
  3. 03利用跟踪记录排查失败原因
  4. 04验证键盘导航和 ARIA 角色

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/ariadoss/superskills --skill playwright

安装后在 Claude Code 中输入/playwright确认已加载。

详细介绍

Playwright 端到端测试

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

前置条件

npx playwright --version

如果尚未安装：

npm init playwright@latest
# or add to existing project:
npm install -D @playwright/test && npx playwright install

工作流

1. 分析

阅读要测试的页面或组件的源文件。了解路由、交互元素和预期行为。

2. 生成测试文件

按照项目现有的模式和目录结构创建测试文件。

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
  });
});
3. 运行测试
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
4. 调试失败
  • 仔细阅读错误输出
  • 使用 --trace on 并打开跟踪查看器：npx playwright show-trace trace.zip
  • 失败时截取屏幕截图：await page.screenshot({ path: 'debug.png' })
  • 在有头模式下使用 page.pause() 逐步调试

功能

  • 导航：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 调用

提示

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

评论

支持 Markdown