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 playwrightlatest可以初始化一个新项目也可以给已有项目追加 Playwright 依赖。按提示确认以下内容引自 InstallationTypeScript 或 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名字取配置里的namenpx playwright test --projectfirefox文档示例输出Running 1 test using 1 worker ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)多个项目则把--project重复使用引自 Running and debugging testsnpx 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: 0Default 项目跑其余测试且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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Playwright 如何用 projects 把同一批测试分组到不同浏览器与模拟设备上运行？
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 playwrightlatest可以初始化一个新项目也可以给已有项目追加 Playwright 依赖。按提示确认以下内容引自 InstallationTypeScript 或 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名字取配置里的namenpx playwright test --projectfirefox文档示例输出Running 1 test using 1 worker ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)多个项目则把--project重复使用引自 Running and debugging testsnpx 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: 0Default 项目跑其余测试且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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考