如何让Playwright测试仅运行在指定浏览器或移动端/桌面端视口

针对你希望避免条件判断、实现类似 TestCafe meta 标签的测试筛选需求，以下是几种符合 Playwright 最佳实践的方案：

方案1：基于 Project 配置精准筛选 #

利用你已配置的桌面端/移动端 Project，通过测试内的 project 参数判断环境，自动跳过不符合的测试：

移动端专属测试 #

test('移动端用户退出登录流程', async ({ page, baseURL, project }) => {
  // 跳过非移动端项目的测试执行
  test.skip(!project.name.includes('Mobile'), '仅在移动端运行');
  
  const { id } = await loginAndSaveUserProfileToDatabase({ page });
  await page.goto('./home');
  
  // 移动端专属操作：打开汉堡菜单
  await page.getByRole('button', { name: /open main menu/i }).click();
  await page.getByRole('button', { name: /open user menu/i }).click();
  await page.getByRole('menuitem', { name: /log out/i }).click();
  
  expect(page.url()).toEqual(baseURL + '/');
});

桌面端专属测试 #

test('桌面端用户退出登录流程', async ({ page, baseURL, project }) => {
  // 跳过移动端项目的测试执行
  test.skip(project.name.includes('Mobile'), '仅在桌面端运行');
  
  const { id } = await loginAndSaveUserProfileToDatabase({ page });
  await page.goto('./home');
  
  // 桌面端直接操作用户菜单
  await page.getByRole('button', { name: /open user menu/i }).click();
  await page.getByRole('menuitem', { name: /log out/i }).click();
  
  expect(page.url()).toEqual(baseURL + '/');
});

命令行指定运行环境 #

无需修改代码，直接通过命令行选择要运行的 Project：

# 仅运行移动端测试
npx playwright test --project="Mobile Chrome" --project="Mobile Safari"

# 仅运行桌面端测试
npx playwright test --project="chromium" --project="firefox" --project="webkit"

方案2：用 grep 标记实现类似 Meta 功能 #

通过给测试添加自定义标记（如 @mobile/@desktop），结合 Playwright 的 grep 机制筛选测试，更接近 TestCafe 的 meta 体验：

标记测试 #

test('@mobile 移动端退出登录', async ({ page, baseURL }) => {
  const { id } = await loginAndSaveUserProfileToDatabase({ page });
  await page.goto('./home');
  
  await page.getByRole('button', { name: /open main menu/i }).click();
  await page.getByRole('button', { name: /open user menu/i }).click();
  await page.getByRole('menuitem', { name: /log out/i }).click();
  
  expect(page.url()).toEqual(baseURL + '/');
});

test('@desktop 桌面端退出登录', async ({ page, baseURL }) => {
  const { id } = await loginAndSaveUserProfileToDatabase({ page });
  await page.goto('./home');
  
  await page.getByRole('button', { name: /open user menu/i }).click();
  await page.getByRole('menuitem', { name: /log out/i }).click();
  
  expect(page.url()).toEqual(baseURL + '/');
});

命令行筛选标记测试 #

# 仅运行带@mobile标记的测试
npx playwright test --grep="@mobile"

# 仅运行带@desktop标记的测试
npx playwright test --grep="@desktop"

配置文件默认绑定标记与 Project #

在 playwright.config.ts 中设置，让每个 Project 自动筛选对应标记的测试，无需每次加命令行参数：

projects: [
  {
    name: 'chromium',
    use: { ...devices['Desktop Chrome'] },
    grep: /@desktop/, // 仅运行带@desktop标记的测试
  },
  {
    name: 'Mobile Chrome',
    use: { ...devices['Pixel 5'] },
    grep: /@mobile/, // 仅运行带@mobile标记的测试
  },
  // 其他项目同理配置
]

方案3：自定义测试装饰器封装逻辑 #

如果想进一步简化代码，可封装专属测试函数，替代原生 test：

// 封装仅移动端测试的函数
const testMobile = test.extend({}).skip(({ project }) => !project.name.includes('Mobile'), '仅移动端运行');

// 封装仅桌面端测试的函数
const testDesktop = test.extend({}).skip(({ project }) => project.name.includes('Mobile'), '仅桌面端运行');

使用装饰器 #

testMobile('移动端退出登录', async ({ page, baseURL }) => {
  const { id } = await loginAndSaveUserProfileToDatabase({ page });
  await page.goto('./home');
  
  await page.getByRole('button', { name: /open main menu/i }).click();
  await page.getByRole('button', { name: /open user menu/i }).click();
  await page.getByRole('menuitem', { name: /log out/i }).click();
  
  expect(page.url()).toEqual(baseURL + '/');
});

testDesktop('桌面端退出登录', async ({ page, baseURL }) => {
  const { id } = await loginAndSaveUserProfileToDatabase({ page });
  await page.goto('./home');
  
  await page.getByRole('button', { name: /open user menu/i }).click();
  await page.getByRole('menuitem', { name: /log out/i }).click();
  
  expect(page.url()).toEqual(baseURL + '/');
});

以上方案均避免了条件判断的反模式，且基于 Project 环境判断比 isMobile 属性更可靠，解决了 Firefox 中 isMobile 失效的问题。

内容的提问来源于stack exchange，提问作者J. Hesters