Playwright 多项目配置（Projects）
本章介绍如何通过 Projects 配置在多个浏览器和设备上运行测试，以及项目依赖的用法。
什么是 Project
在 Playwright 中，一个 Project 代表一组在特定浏览器和设备配置下运行的测试。
通过配置多个 Project，你可以用同一套测试代码在 Chromium、Firefox、WebKit 以及移动端设备上运行。
基础多浏览器配置
实例
bash
// 文件路径：playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
});运行特定浏览器的测试：
bash
# 仅在 Chromium 上运行
npx playwright test --project=chromium
# 在 Chromium 和 Firefox 上运行
npx playwright test --project=chromium --project=firefoxdevices 设备预设
Playwright 内置了大量设备预设（来自 @playwright/test 的 devices），模拟真实设备的视口、User-Agent、像素比等。
实例
bash
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
// 桌面端
{
name: 'desktop-chrome',
use: { ...devices['Desktop Chrome'] },
},
// 移动端
{
name: 'mobile-iphone',
use: { ...devices['iPhone 15'] },
},
{
name: 'mobile-pixel',
use: { ...devices['Pixel 7'] },
},
// 平板
{
name: 'tablet-ipad',
use: { ...devices['iPad Pro'] },
},
],
});常用的设备预设：
| 预设名称 | 设备类型 | 视口大小 |
|---|---|---|
Desktop Chrome | 桌面 | 1280×720 |
Desktop Firefox | 桌面 | 1280×720 |
Desktop Safari | 桌面 | 1280×720 |
iPhone 15 | 手机 | 393×852 |
Pixel 7 | 手机 | 412×915 |
iPad Pro | 平板 | 1024×1366 |
自定义项目配置
你可以在 Project 的 use 中覆盖全局配置：
实例
bash
export default defineConfig({
use: {
baseURL: 'http://localhost:3000',
locale: 'zh-CN',
timezone: 'Asia/Shanghai',
},
projects: [
{
name: 'chromium-desktop',
use: {
...devices['Desktop Chrome'],
// 继承全局的 locale 和 timezone
},
},
{
name: 'chromium-mobile',
use: {
...devices['Pixel 7'],
// 覆盖为英文环境
locale: 'en-US',
timezone: 'America/New_York',
},
},
// 测试深色模式
{
name: 'chromium-dark',
use: {
...devices['Desktop Chrome'],
colorScheme: 'dark',
},
},
// 测试浅色模式
{
name: 'chromium-light',
use: {
...devices['Desktop Chrome'],
colorScheme: 'light',
},
},
],
});项目依赖（dependencies）
一个项目可以依赖另一个项目，确保依赖的项目先运行。
最常见的用法是 Setup 项目（认证）先运行，其他项目依赖它。
实例
bash
export default defineConfig({
projects: [
// Setup 项目 —— 生成认证状态
{
name: 'setup',
testMatch: /auth\.setup\.ts/,
},
// 测试项目依赖 setup，确保认证状态先生成
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
storageState: 'playwright/.auth/user.json',
},
dependencies: ['setup'],
},
{
name: 'firefox',
use: {
...devices['Desktop Firefox'],
storageState: 'playwright/.auth/user.json',
},
dependencies: ['setup'],
},
],
});setup 项目只会运行一次，所有依赖它的项目会等待它完成后才启动。
通过 testProject 共享配置
如果要让多个项目共享配置而不重复，可以提取一个基础项目：
实例
bash
// 文件路径：playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
const desktopProject = {
use: {
...devices['Desktop Chrome'],
viewport: { width: 1920, height: 1080 },
locale: 'zh-CN',
},
} as const;
export default defineConfig({
projects: [
{
name: 'chromium',
...desktopProject, // 继承 desktopProject 的配置
use: {
...desktopProject.use, // 先继承
browserName: 'chromium', // 再覆盖
},
},
{
name: 'firefox',
use: {
...devices['Desktop Firefox'],
// 覆盖 viewport 和 locale
viewport: { width: 1920, height: 1080 },
locale: 'zh-CN',
},
},
],
});AI 思考中...