HoRain云--Playwright 多项目配置（Projects）

🎬 HoRain 云小助手：个人主页

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

目录

⛳️ 推荐

什么是 Project

基础多浏览器配置

实例

devices 设备预设

实例

自定义项目配置

实例

项目依赖（dependencies）

实例

通过 testProject 共享配置

实例

什么是 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'] },
},
],
});

常用的设备预设：

自定义项目配置

你可以在 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',
},
},
],
});

❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙