Skip to main content

模擬

簡介​

透過 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​

是否考慮 meta viewport 標籤並啟用觸控事件。

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: {
    // 模擬瀏覽器語言環境。
    locale: 'en-GB',

    // 模擬瀏覽器時區。
    timezoneId: 'Europe/Paris',
  },
});
tests/example.spec.ts
import { test, expect } from '@playwright/test';

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

test('我的德語及柏林時區測試', 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: {
    // 為瀏覽器情境授予指定的權限。
    permissions: ['notifications'],
  },
});

允許特定網域的通知。

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

test.beforeEach(async ({ context }) => {
  // 在每個測試之前執行並在每個頁面登入。
  await context.grantPermissions(['notifications'], { origin: 'https://skype.com' });
});

test('first', async ({ page }) => {
  // 頁面擁有 https://skype.com 的通知權限。
});

使用 browserContext.clearPermissions() 撤銷所有權限。

// Library
await context.clearPermissions();

地理位置​

授予 "geolocation" 權限並將地理位置設定為特定區域。

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

export default defineConfig({
  use: {
    // 情境地理位置
    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('我的地理位置測試', 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('我的地理位置測試', async ({ page, context }) => {
  // 為此測試覆寫位置
  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('我的深色模式測試', async ({ page }) => {
  // ...
});
playwright web in dark mode

User Agent​

User Agent 包含在裝置中，因此您很少需要變更它，但如果您需要測試不同的使用者代理，可以使用 userAgent 屬性覆寫它。

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

test.use({ userAgent: '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('沒有 JavaScript 的測試', async ({ page }) => {
  // ...
});