Playwright如何在测试级别指定目标移动端模拟器？

我的test.spec.ts文件包含桌面和移动端测试用例，已经在playwright.config.ts中配置了Pixel 5和iPhone 14 Pro的移动端模拟器，但运行测试时移动端测试仍在桌面浏览器执行。希望在单个测试文件中为不同测试指定目标模拟器/浏览器，无需使用过滤器，让测试各自对应指定环境执行。

现有代码 #

test.spec.ts #

import { test, expect, devices } from '@playwright/test';

test.use({ storageState: 'playwright/.auth.json' });
const url = 'https://test.com/custom-library';

test.describe('desktop', () => {
  test('Hide No Data (shown twice) on radar whilst awaiting an input', async ({ page, isMobile }) => {
    test.skip(isMobile)
    await page.goto(url);
    const buttonsCount = await page.getByText('No Data').count();
    expect(buttonsCount).toBe(0);
  });

  test('Desktop check - (Optimal on desktop / tablet) only shown on smaller screens (i.e mobile breakpoint)', async ({ page, isMobile }) => {
    test.skip(isMobile)
    await page.goto(url);
    const buttonsCount = await page.getByText('(Optimal on desktop / tablet)').count();
    expect(buttonsCount).toBe(0);
  });
});

test.describe('mobile', () => {
    test('Mobile check - (Optimal on desktop / tablet) only shown on smaller screens (i.e mobile breakpoint)', async ({ page, isMobile })=>{
      console.log(!isMobile);
      test.skip(!isMobile)
      await page.goto(url);
      await expect(page.getByText('(Optimal on desktop / tablet)')).toBeVisible();
    });
});

playwright.config.ts #

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
  },

  projects: [
    { 
      name: 'setup', 
      testMatch: /.*\.setup\.ts/
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], storageState: './playwright/.auth.json' },
      dependencies: ['setup'],
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'], storageState: './playwright/.auth.json' },
      dependencies: ['setup'],
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'], storageState: './playwright/.auth.json' },
      dependencies: ['setup'],
    },

    /* Test against mobile viewports. */
     {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'], storageState: './playwright/.auth.json' },
      dependencies: ['setup'],
    },
     {
       name: 'Mobile Safari',
       use: { ...devices['iPhone 14 Pro'], storageState: './playwright/.auth.json' },
       dependencies: ['setup'],
     },
    ],
});

解决方案 #

Playwright支持在测试/测试组级别直接指定设备配置，不需要依赖全局项目配置的过滤器，核心是通过test.use()直接注入对应设备的参数，或者给测试组绑定特定设备。

方法1：测试组级别绑定设备 #

修改test.spec.ts，给desktop和mobile的describe块分别指定对应的设备配置，组内所有测试会自动使用该设备执行：

import { test, expect, devices } from '@playwright/test';

const url = 'https://test.com/custom-library';

// 桌面测试组：绑定桌面Chrome设备
test.describe('desktop', () => {
  test.use({ 
    ...devices['Desktop Chrome'],
    storageState: 'playwright/.auth.json' 
  });

  test('Hide No Data (shown twice) on radar whilst awaiting an input', async ({ page }) => {
    await page.goto(url);
    const buttonsCount = await page.getByText('No Data').count();
    expect(buttonsCount).toBe(0);
  });

  test('Desktop check - (Optimal on desktop / tablet) only shown on smaller screens', async ({ page }) => {
    await page.goto(url);
    const buttonsCount = await page.getByText('(Optimal on desktop / tablet)').count();
    expect(buttonsCount).toBe(0);
  });
});

// 安卓移动测试组：绑定Pixel 5设备
test.describe('mobile-pixel5', () => {
  test.use({ 
    ...devices['Pixel 5'],
    storageState: 'playwright/.auth.json' 
  });

  test('Mobile check - (Optimal on desktop / tablet) only shown on smaller screens', async ({ page }) => {
    await page.goto(url);
    await expect(page.getByText('(Optimal on desktop / tablet)')).toBeVisible();
  });
});

// iOS移动测试组：绑定iPhone 14 Pro设备
test.describe('mobile-iphone14', () => {
  test.use({ 
    ...devices['iPhone 14 Pro'],
    storageState: 'playwright/.auth.json' 
  });

  test('Mobile check - (Optimal on desktop / tablet) only shown on smaller screens', async ({ page }) => {
    await page.goto(url);
    await expect(page.getByText('(Optimal on desktop / tablet)')).toBeVisible();
  });
});

方法2：单个测试指定设备 #

如果仅需给某一个测试单独指定设备，直接在测试内部使用test.use()：

test('Mobile check - iPhone only', async ({ page }) => {
  test.use({ 
    ...devices['iPhone 14 Pro'],
    storageState: 'playwright/.auth.json' 
  });
  await page.goto(url);
  await expect(page.getByText('(Optimal on desktop / tablet)')).toBeVisible();
});

注意事项 #

1. 移除原代码中的test.skip(isMobile)判断，因为测试已绑定特定设备，无需再通过isMobile跳过。
2. 全局的test.use({ storageState: ... })可移至各个测试组内，避免配置冲突。
3. 运行测试时直接执行npx playwright test即可，Playwright会自动为每个绑定设备的测试启动对应模拟器/浏览器。

内容的提问来源于stack exchange，提问作者Carl Bruiners