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

エミュレーション

はじめに​

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 }) => {
  // ...
});