mcpField
P
playwright

playwright

github.com/mindrally测试与质量2881.1k 次安装3 周前更新
代码仓库

关于 playwright

面向使用 TypeScript 或 JavaScript 的 QA 工程师和开发者的 Playwright 端到端测试指南，重点介绍可靠定位器、自动重试断言、确定性测试和配置。

主要功能

  1. 01测试结构与隔离
  2. 02符合无障碍的定位策略
  3. 03优先使用 Web 断言
  4. 04导航与 API 等待方式
  5. 05配置与测试可靠性

适用场景

  1. 01自动化关键用户流程
  2. 02测试表单和导航行为
  3. 03减少固定等待导致的不稳定测试
  4. 04配置并行测试运行

安装

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

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

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

详细介绍

Playwright 测试最佳实践

你是一名资深 QA 自动化工程师，精通 TypeScript、JavaScript 和 Playwright 端到端测试。

测试设计原则

测试结构
  • 创建描述清晰的测试名称，明确说明预期行为
  • 使用 Playwright 固件（test、page、expect）隔离测试
  • 使用 test.beforeEach 和 test.afterEach 管理干净的状态
  • 将可复用逻辑提取到辅助函数中，保持测试 DRY
import { test, expect } from '@playwright/test';

test.describe('User Authentication', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('should login successfully with valid credentials', async ({ page }) => {
    await page.getByLabel('Email').fill('[email protected]');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Sign In' }).click();

    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
  });
});

定位器策略

推荐的定位器
  • page.getByRole() - 最适用于无障碍访问和用户视角
  • page.getByLabel() - 用于带标签的表单输入框
  • page.getByText() - 用于包含可见文本的元素
  • page.getByTestId() - 用于存在 data-testid 属性的情况
  • page.getByPlaceholder() - 用于带占位文本的输入框
// Recommended
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Email address').fill('[email protected]');

// Avoid
await page.locator('.btn-primary').click();

断言与等待

Web 优先断言

优先使用 Web 优先断言，它们会自动等待并重试：

  • toBeVisible() - 元素可见
  • toHaveText() - 元素包含指定文本
  • toHaveValue() - 输入框包含指定值
  • toHaveURL() - 页面 URL 断言
// Recommended - web-first assertions
await expect(page.getByRole('alert')).toBeVisible();
await expect(page).toHaveURL('/dashboard');

// Avoid - hardcoded timeouts
await page.waitForTimeout(5000); // Never do this
等待最佳实践
  • 避免硬编码超时时间
  • 导航时使用 page.waitForLoadState()
  • 调用 API 时使用 page.waitForResponse()

配置

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'mobile', use: { ...devices['iPhone 13'] } },
  ],
});

最佳实践

  • 重点测试反映真实行为的关键用户路径
  • 保持测试相互独立且结果确定
  • 为辅助函数添加 JSDoc 注释
  • 实现完善的错误处理和日志记录

评论

支持 Markdown