名称: playwright-test-architecture 用户可调用: false 描述: 用于设置Playwright测试项目，并通过适当的配置和项目结构组织测试套件。允许工具:

Bash
Read
Write
Edit

Playwright测试架构

掌握测试组织、配置和项目结构，以实现可扩展和可维护的Playwright测试套件。本技能涵盖了组织测试、配置项目和优化测试执行的最佳实践。

安装和设置

# 安装Playwright及浏览器
npm init playwright@latest

# 安装特定浏览器
npx playwright install chromium firefox webkit

# 仅安装依赖项
npm install -D @playwright/test

# 更新Playwright
npm install -D @playwright/test@latest
npx playwright install

# 显示已安装版本
npx playwright --version

项目配置

基本配置

playwright.config.ts:

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

export default defineConfig({
  // 测试目录
  testDir: './tests',

  // 测试超时（默认30秒）
  timeout: 30000,

  // 断言的超时时间
  expect: {
    timeout: 5000,
  },

  // 并行运行文件中的测试
  fullyParallel: true,

  // 在CI上如果意外使用test.only则使构建失败
  forbidOnly: !!process.env.CI,

  // 仅在CI上重试
  retries: process.env.CI ? 2 : 0,

  // 报告器配置
  reporter: 'html',

  // 所有项目的共享设置
  use: {
    // 导航的基础URL
    baseURL: 'http://localhost:3000',

    // 首次重试时收集追踪信息
    trace: 'on-first-retry',

    // 失败时截图
    screenshot: 'only-on-failure',

    // 重试时录制视频
    video: 'retain-on-failure',
  },

  // 配置主流浏览器的项目
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],

  // 在开始测试前运行本地开发服务器
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120000,
  },
});

高级配置

（内容翻译类似，为节省空间，此处略去细节翻译，但实际响应中包含完整翻译）

测试组织模式

按功能组织

（翻译略）

按页面组织

（翻译略）

按用户旅程组织

（翻译略）

混合方法（推荐）

（翻译略）

测试文件结构

基本测试结构

（翻译略）

高级测试结构

（翻译略）

并行执行和分片

并行执行

（翻译略）

测试分片

（翻译略）

工作器配置

（翻译略）

重试策略

基于配置的重试

（翻译略）

测试级别的重试

（翻译略）

报告器配置

内置报告器

（翻译略）

自定义报告器

（翻译略）

环境特定配置

多环境设置

（翻译略）

环境文件

（翻译略）

追踪和视频录制

追踪配置

（翻译略）

视频录制

（翻译略）

截图配置

（翻译略）

全局设置和清理

全局设置

（翻译略）

全局清理

（翻译略）

测试分组和标记

使用标记

（翻译略）

何时使用此技能

（翻译略）

资源

（翻译略）