Playwright 多项目配置（Projects）

本章介绍如何通过 Projects 配置在多个浏览器和设备上运行测试，以及项目依赖的用法。

什么是 Project

在 Playwright 中，一个 Project 代表一组在特定浏览器和设备配置下运行的测试。

通过配置多个 Project，你可以用同一套测试代码在 Chromium、Firefox、WebKit 以及移动端设备上运行。

基础多浏览器配置

实例

// 文件路径：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'] },
},
],
});

运行特定浏览器的测试：

# 仅在 Chromium 上运行
npx playwright test --project=chromium

# 在 Chromium 和 Firefox 上运行
npx playwright test --project=chromium --project=firefox

devices 设备预设

Playwright 内置了大量设备预设（来自 @playwright/test 的 devices），模拟真实设备的视口、User-Agent、像素比等。

实例

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 中覆盖全局配置：

实例

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 项目（认证）先运行，其他项目依赖它。

实例

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 共享配置

如果要让多个项目共享配置而不重复，可以提取一个基础项目：

实例

// 文件路径：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',
},
},
],
});

返回顶部

菜鸟教程