メインコンテンツにスキップ

エミュレーション

はじめに​

Playwrightを使えば、あらゆるブラウザでアプリをテストできるだけでなく、携帯電話やタブレットなどの実際のデバイスをエミュレートすることもできます。エミュレートしたいデバイスを設定するだけで、Playwrightは"userAgent"、"screenSize"、"viewport"、"hasTouch"が有効かどうかなど、ブラウザの動作をシミュレートします。また、すべてのテストまたは特定のテストに対して"geolocation"、"locale"、"timezone"をエミュレートしたり、通知を表示するための"permissions"を設定したり、"colorScheme"を変更したりすることもできます。

デバイス​

Playwrightには、選択されたデスクトップ、タブレット、モバイルデバイス用のplaywright.devicesを使用するデバイスパラメータのレジストリが付属しています。これは、ユーザーエージェント、画面サイズ、ビューポート、タッチが有効かどうかなど、特定のデバイスのブラウザ動作をシミュレートするために使用できます。すべてのテストは、指定されたデバイスパラメータで実行されます。

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 13'],
      },
    },
  ],
});
playwright.dev website emulated for iPhone 13

ビューポート​

ビューポートはデバイスに含まれていますが、一部のテストではpage.setViewportSize()でオーバーライドできます。

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        // It is important to define the `viewport` property after destructuring `devices`,
        // since devices also define the `viewport` for that device.
        viewport: { width: 1280, height: 720 },
      },
    },
  ]
});

テストファイル

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
  viewport: { width: 1600, height: 1200 },
});

test('my test', async ({ page }) => {
  // ...
});

テストファイル内でも同様に動作します。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.describe('specific viewport block', () => {
  test.use({ viewport: { width: 1600, height: 1200 } });

  test('my test', async ({ page }) => {
    // ...
  });
});

isMobile​

メタビューポートタグが考慮され、タッチイベントが有効になるかどうか。

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        // It is important to define the `isMobile` property after destructuring `devices`,
        // since devices also define the `isMobile` for that device.
        isMobile: false,
      },
    },
  ]
});

ロケールとタイムゾーン​

ブラウザのロケールとタイムゾーンをエミュレートします。これらは設定ですべてのテストに対してグローバルに設定でき、特定のテストでオーバーライドできます。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // Emulates the browser locale.
    locale: 'en-GB',

    // Emulates the browser timezone.
    timezoneId: 'Europe/Paris',
  },
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
  locale: 'de-DE',
  timezoneId: 'Europe/Berlin',
});

test('my test for de lang in Berlin timezone', async ({ page }) => {
  await page.goto('https://www.bing.com');
  // ...
});
Bing in german lang and timezone

これはブラウザのタイムゾーンとロケールのみに影響し、テストランナーのタイムゾーンには影響しません。テストランナーのタイムゾーンを設定するには、TZ環境変数を使用できます。

パーミッション​

アプリがシステム通知を表示することを許可します。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // Grants specified permissions to the browser context.
    permissions: ['notifications'],
  },
});

特定のドメインの通知を許可します。

tests/example.spec.ts
import { test } from '@playwright/test';

test.beforeEach(async ({ context }) => {
  // Runs before each test and signs in each page.
  await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
});

test('first', async ({ page }) => {
  // page has notifications permission for https://skype.com.
});

browserContext.clearPermissions()ですべてのパーミッションを取り消します。

// Library
await context.clearPermissions();

位置情報​

"geolocation"パーミッションを付与し、位置情報を特定のエリアに設定します。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // Context geolocation
    geolocation: { longitude: 12.492507, latitude: 41.889938 },
    permissions: ['geolocation'],
  },
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
  geolocation: { longitude: 41.890221, latitude: 12.492348 },
  permissions: ['geolocation'],
});

test('my test with geolocation', async ({ page }) => {
  // ...
});
geolocation for italy on bing maps

後で場所を変更する

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
  geolocation: { longitude: 41.890221, latitude: 12.492348 },
  permissions: ['geolocation'],
});

test('my test with geolocation', async ({ page, context }) => {
  // overwrite the location for this test
  await context.setGeolocation({ longitude: 48.858455, latitude: 2.294474 });
});

注: 位置情報はコンテキスト内のすべてのページに対してのみ変更できます。

カラースキームとメディア​

ユーザーの"colorScheme"をエミュレートします。サポートされている値は 'light' と 'dark' です。また、page.emulateMedia()でメディアタイプをエミュレートすることもできます。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    colorScheme: 'dark',
  },
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({
  colorScheme: 'dark' // or 'light'
});

test('my test with dark mode', async ({ page }) => {
  // ...
});
playwright web in dark mode

ユーザーエージェント​

ユーザーエージェントはデバイスに含まれているため、変更する必要はめったにありませんが、異なるユーザーエージェントをテストする必要がある場合は、userAgentプロパティでオーバーライドできます。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({ userAgent: 'My user agent' });

test('my user agent test', async ({ page }) => {
  // ...
});

オフライン​

ネットワークがオフラインであることをエミュレートします。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    offline: true
  },
});

JavaScript有効​

JavaScriptが無効になっているユーザーシナリオをエミュレートします。

tests/example.spec.ts
import { test, expect } from '@playwright/test';

test.use({ javaScriptEnabled: false });

test('test with no JavaScript', async ({ page }) => {
  // ...
});