企业官网建设流程全解析

Playwright 如何用 projects 把同一批测试分组到不同浏览器与模拟设备上运行？

【免费下载链接】playwrightPlaywright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright

当你有一批端到端测试需要在 Chromium、Firefox、WebKit 上各跑一遍，同时还要覆盖 Pixel 5、iPhone 12 这类模拟移动设备时，逐个改浏览器参数再重复执行的维护成本很高。Playwright Test 的projects机制就是解决这个问题的：在playwright.config.ts里为每种浏览器或设备声明一个项目，同一份测试代码会被分到这些项目下分别执行，还可以用--project参数只跑其中某一个。本文基于 Projects 与 Browsers 两篇官方文档，给出从初始化、配置到运行核对的完整操作路径（以 npm + JavaScript/TypeScript 为例）。

准备工作：初始化 Playwright 并安装浏览器

npm init playwright@latest可以初始化一个新项目，也可以给已有项目追加 Playwright 依赖。按提示确认以下内容（引自 Installation）：

• TypeScript 或 JavaScript（默认 TypeScript）
• 测试目录名（默认tests，若已存在则用e2e）
• 是否添加 GitHub Actions workflow
• 是否安装 Playwright 浏览器（默认 yes）

执行完成后会生成playwright.config.ts和tests/example.spec.ts；在已有项目中运行时，依赖会写入现有的package.json。这个默认配置已经包含 Chromium、Firefox、WebKit 三个 project，因此初始化后直接运行就能得到多浏览器结果。

每个版本的 Playwright 需要配套特定版本的浏览器二进制文件，需要用 CLI 安装。初始化时若已选择安装浏览器可跳过；否则在项目目录执行：

npx playwright install

不带参数会安装全部默认浏览器；只装某一个可以传参，例如npx playwright install webkit。用npx playwright install --help可以看到所有可安装的浏览器。注意：每次升级 Playwright 后可能都要重新执行一次install，因为官方会随版本更新所支持的浏览器。

后文示例涉及 Google Chrome 与 Microsoft Edge 这类 branded 浏览器。Playwright 默认不会安装它们，需要时执行：

npx playwright install msedge

副作用提醒：官方文档说明，该命令会安装到操作系统的默认全局位置，并会覆盖你当前的浏览器安装，执行前请确认机器上的浏览器版本可以接受。

在 playwright.config.ts 中定义浏览器与设备项目

下面是 Projects 文档 给出的完整多浏览器/多设备配置，直接覆盖 6 个项目：三个桌面浏览器内核、两个模拟移动设备、两个 branded 浏览器。

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'] }, }, /* Test against mobile viewports. */ { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] }, }, { name: 'Mobile Safari', use: { ...devices['iPhone 12'] }, }, /* Test against branded browsers. */ { name: 'Microsoft Edge', use: { ...devices['Desktop Edge'], channel: 'msedge' }, }, { name: 'Google Chrome', use: { ...devices['Desktop Chrome'], channel: 'chrome' }, }, ], });

两个要点：

• devices参数对应 Playwright 维护的设备参数注册表 deviceDescriptorsSource.json，里面列出了可选的桌面、平板和移动设备（Pixel 5、iPhone 12等），选模拟器时以该文件里的键名为准。
• 桌面内核项目不需要channel；只有 branded 浏览器需要加channel。Browsers 文档 列出的可用 channel 有：chrome、msedge、chrome-beta、msedge-beta、chrome-dev、msedge-dev、chrome-canary、msedge-canary。

不需要模拟设备或 branded 浏览器时，把对应的项目项删掉即可，剩下的项目结构不变。

运行全部或部分项目并核对输出

不带参数运行时，Playwright 会跑所有项目：

npx playwright test

文档中的示例输出（对应上文 6 个项目的配置，1 个测试 × 6 项目 + 输出格式示意）：

Running 7 tests using 5 workers ✓ [chromium] › example.spec.ts:3:1 › basic test (2s) ✓ [firefox] › example.spec.ts:3:1 › basic test (2s) ✓ [webkit] › example.spec.ts:3:1 › basic test (2s) ✓ [Mobile Chrome] › example.spec.ts:3:1 › basic test (2s) ✓ [Mobile Safari] › example.spec.ts:3:1 › basic test (2s) ✓ [Microsoft Edge] › example.spec.ts:3:1 › basic test (2s) ✓ [Google Chrome] › example.spec.ts:3:1 › basic test (2s)

核对方式很直接：每条结果行都以[项目名]开头，确认每个项目下都执行了你的测试，且项目名与你配置中的name一致。上面输出里的测试数、worker 数和耗时是文档示例值，实际以你的测试数量为准。

只跑单个项目用--project，名字取配置里的name：

npx playwright test --project=firefox

文档示例输出：

Running 1 test using 1 worker ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)

多个项目则把--project重复使用（引自 Running and debugging tests）：

npx playwright test --project webkit --project firefox

该文档还说明了其他与项目筛选可组合的过滤方式：按文件npx playwright test landing-page.spec.ts、按标题npx playwright test -g "add a todo item"、只跑上次失败的npx playwright test --last-failed。

在 VS Code 中按项目运行（可选）

如果习惯在编辑器里点运行，VS Code 扩展的测试侧边栏会列出配置projects段中的项目名，勾选对应项目的复选框即可选择单个或多个项目运行；默认安装配置下是 Chromium、Firefox、WebKit 三个项目，第一个项目默认选中。也可以点运行按钮旁的下拉箭头选择 profile，或通过Select Default Profile修改默认项目。

边界与限制

• branded 浏览器与内置 Chromium 的区别：不带channel时 Playwright 用的是开源 Chromium 构建，通常领先官方 Stable 渠道；如果你的回归策略要求针对当前公开可用的 Chrome/Edge 版本，或页面依赖媒体编解码器，才需要选"chrome"/"msedge"这类稳定 channel（理由见 Browsers 文档 的 "When to use Google Chrome & Microsoft Edge" 一节）。
• Firefox 与 WebKit 不支持 branded 版本：Playwright 的 Firefox 基于打补丁的 Firefox Stable 构建，WebKit 基于 main 分支源码构建，均不依赖也不兼容官方的 Firefox、Safari。
• 平台差异：WebKit 在 Linux 上运行成本最低，但要最接近 Safari 的体验（例如视频播放）应在 macOS 上运行；媒体编解码器等特性在 Linux、macOS、Windows 之间差异明显。
• 企业浏览器策略：某些企业 Browser Policy 可能影响 Playwright 对 Chrome/Edge 的启动与接管，官方文档明确这不在 Playwright 支持范围内。

可以接着做的事

Projects 文档 在同一篇里还覆盖了两个与分组直接相关的进阶用法：用testMatch/testIgnore把测试拆进不同项目（例如 "Smoke" 项目跑*.smoke.spec.ts且retries: 0，"Default" 项目跑其余测试且retries: 2），以及用dependencies让 chromium/firefox/webkit 项目依赖一个先执行的setup项目（setup 失败时依赖项目不运行，可用--no-deps忽略依赖）。多项目之间的超时、重试等通用选项可以查 test-configuration 一节。

【免费下载链接】playwrightPlaywright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright