Playwrightのエミュレーター機能について

playwright.config.ts の記述について

playwright.config.tsにて以下の様なprojectを定義します。

    {
      name: 'mobile',
      testMatch: 'testMobile.spec.ts',
      use: { ...devices['iPhone 13 Pro'] },
    },

上記はテストでiPhone 13 Proエミュレーターを使用する場合の記述です。

テストの動作

例えば、以下の様なテストファイル”testMobile.spec.ts”があったとします。

import { test } from '@playwright/test';

test('input fields', async ({ page }, testInfo) => {
  await page.goto('/');
  await page.locator('.sidebar-toggle').click();
  await page.getByText('Forms').click();
  await page.getByText('Form Layouts').click();
  await page.locator('.sidebar-toggle').click();
  const usingTheGridEmailInput = page.locator('nb-card', { hasText: 'Using the Grid' }).getByRole('textbox', { name: 'Email' });
  await usingTheGridEmailInput.fill('[e-mail]');
  await usingTheGridEmailInput.clear();
  await usingTheGridEmailInput.fill('[e-mail]');
});

これを以下のコマンドで実行します。

npx playwright test tests/testMobile.spec.ts --project=mobile

すると、以下のような画面でテストすることができます。

testInfoによる分岐

以下の様に、testInfoを使用することで、使用するエミュレーターによるif文も使うことができます。

import { test } from '@playwright/test';

test('input fields', async ({ page }, testInfo) => {
  await page.goto('/');
  if (testInfo.project.name === 'mobile') {
    await page.locator('.sidebar-toggle').click();
  }
  await page.getByText('Forms').click();
  await page.getByText('Form Layouts').click();
  if (testInfo.project.name === 'mobile') {
    await page.locator('.sidebar-toggle').click();
  }
  const usingTheGridEmailInput = page.locator('nb-card', { hasText: 'Using the Grid' }).getByRole('textbox', { name: 'Email' });
  await usingTheGridEmailInput.fill('[e-mail]');
  await usingTheGridEmailInput.clear();
  await usingTheGridEmailInput.fill('[e-mail]');
});