Playwright配置文件

playwright.config.ts 配置文件

Playwright 的 playwright.config.ts 配置文件允许开发者对测试框架的多个方面进行自定义设置。以下是 playwright.config.ts 配置文件涵盖的主要配置选项和其相关功能：

1、测试目录和匹配模式

• testDir: 定义包含测试文件的目录。
• testMatch: 使用 glob 模式来匹配要执行的测试文件。
• testIgnore: 定义要忽略的测试文件或目录。

testDir: './tests',  // 指定测试文件的目录
testMatch: '**/*.spec.ts',  // 匹配所有的 .spec.ts 文件
testIgnore: '**/ignore/**',  // 忽略 "ignore" 文件夹中的文件

2、并发和工作线程

• workers: 设置并行执行的测试工作线程数。
• retries: 设置测试失败时的重试次数。
• maxFailures: 如果达到最大失败次数，则停止测试。
• timeout: 设置每个测试的超时时间。

workers: 4,  // 使用 4 个并发工作线程
retries: 2,  // 失败时重试 2 次
maxFailures: 5,  // 失败超过 5 次则停止
timeout: 30000,  // 每个测试的超时时间为 30 秒

3、浏览器与环境配置

• use: 配置测试时使用的浏览器、浏览器选项、视口大小、基础 URL 等。
• headless: 设置浏览器是否以无头模式运行。
• baseURL: 设置基础 URL，用于构建相对路径。
• viewport: 设置浏览器视口大小。
• screenshot: 配置截图策略。
• video: 配置视频录制策略。
• trace: 配置是否记录执行追踪信息。

use: {
  browserName: 'chromium',  // 使用 Chromium 浏览器
  headless: true,  // 运行在无头模式
  baseURL: 'https://example.com',  // 设置基础 URL
  screenshot: 'only-on-failure',  // 仅在失败时截图
  video: 'retain-on-failure',  // 仅在失败时录制视频
  trace: 'on-first-retry',  // 第一次重试时记录追踪
},

4、报告生成

• reporter: 设置测试报告的输出格式，如 dot, json, html, junit 等。
• outputDir: 设置报告的输出目录。

reporter: 'html',  // 使用 HTML 格式生成报告
outputDir: './test-reports',  // 设置报告输出路径

5、项目配置

• projects: 配置不同的测试环境或浏览器。可以为每个项目指定不同的浏览器或设备环境。

projects: [
  {
    name: 'chromium',
    use: { browserName: 'chromium' },
  },
  {
    name: 'firefox',
    use: { browserName: 'firefox' },
  },
],

6、全局配置

• globalSetup: 在所有测试执行前运行的全局初始化脚本。
• globalTeardown: 在所有测试完成后运行的全局清理脚本。

7、禁止某些行为

• forbidOnly: 禁止在测试中使用 .only，避免漏掉其他测试。
• forbidPending: 禁止待处理的测试，避免未完成的测试影响结果。

forbidOnly: true,  // 禁止 .only 的使用
forbidPending: true,  // 禁止待处理的测试

8、设备模拟

• devices: 用于模拟不同设备的行为，测试在移动设备上的兼容性。

projects: [
  {
    name: 'mobile',
    use: { 
      ...devices['Pixel 5']  // 使用 Pixel 5 模拟手机浏览器
    },
  },
],

9、模拟和自定义设置

9.1、模拟设备（Device Emulation）

Playwright 允许模拟不同设备的屏幕尺寸、用户代理、触摸事件等特性。你可以使用 Playwright 提供的设备预设或自定义设备。

• devices：Playwright 提供了一些预设设备（例如 iPhone、Pixel 等），可以直接引用并模拟这些设备的行为。
• viewport：可以指定浏览器的宽度和高度，以模拟不同的屏幕尺寸。
• userAgent：设置自定义的用户代理字符串，以模拟特定浏览器或设备的行为。
• locale：设置浏览器的区域和语言。
• timezoneId：模拟时区，模拟在不同时间区域运行的测试。

9.2、浏览器上下文（Browser Context）自定义

Playwright 允许你自定义浏览器上下文，用于模拟特定的浏览器会话。每个浏览器上下文都可以有独立的 cookies、存储和缓存，模拟不同的用户会话。

• contextOptions：在 use 配置项中，你可以自定义浏览器上下文的选项。例如，模拟不同的用户代理、时区、语言等。

9.3、模拟网络条件（Network Conditions）

Playwright 允许你模拟不同的网络速度，以测试在各种网络条件下应用的表现。你可以模拟 3G、4G 或离线等网络状况。

• networkConditions：可以设置模拟网络连接的条件，例如模拟慢速网络连接，或完全禁用网络连接（模拟离线状态）。

export default {
  use: {
    networkConditions: {
      download: 500,  // 模拟下载速度为 500kb/s
      upload: 500,    // 模拟上传速度为 500kb/s
      latency: 50,    // 模拟网络延迟为 50ms
    },
  },
};

9.4、模拟触摸事件（Touch Events）

Playwright 允许模拟触摸屏设备的行为，可以模拟触摸屏上的手势和操作。通过配置视口大小和设备模拟，可以触发触摸事件。

• isMobile：启用触摸事件模拟，模拟移动设备上的交互。
• hasTouch：设置浏览器是否支持触摸事件。

export default {
  use: {
    isMobile: true,  // 启用移动设备模拟
    hasTouch: true,  // 启用触摸事件支持
  },
};

9.5、模拟浏览器行为（Custom Browser Behavior）

你可以通过 Playwright 的 API 设置自定义的浏览器行为，如阻止特定的请求、模拟页面加载时间等。

• request：可以拦截网络请求并自定义请求的处理方式。例如，模拟 API 响应、阻止请求等。

export default {
  use: {
    interceptors: {
      async handleRequest(route, request) {
        if (request.url().includes('mock-api')) {
          route.fulfill({ body: JSON.stringify({ success: true }) });
        } else {
          route.continue();
        }
      },
    },
  },
};

9.6、自定义资源和测试夹具（Custom Fixtures）

在 Playwright 中，你可以使用自定义的测试夹具来为每个测试准备必要的资源（例如，数据库连接、外部 API 等）。这些资源可以在测试开始时初始化，并在测试结束时清理。

• fixtures：Playwright 支持通过 fixtures 提供自定义的资源，可以是一个异步函数来准备测试环境或执行清理操作。

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

// 自定义夹具
const test = base.extend({
  db: async ({}, use) => {
    const dbConnection = await connectToDatabase();
    await use(dbConnection);  // 提供数据库连接给测试
    await dbConnection.close();  // 测试结束后清理
  },
});

export { test };