PlaywrightのVRTの画像サイズを設定する / 画像heightをfullPageにする

参照したページ

公式ページ

• Test use options | Playwright

その他

• typescript - How to achieve browser resizing in run time using playwright? in a e2e test run - Stack Overflow

playwright.config.tsにデフォルト値を設定する

以下のように use.viewport を設定するとデフォルト値を設定できます。

export default defineConfig({
  〜 略 〜

  use: {
    viewport: { width: 1280, height: 720 },
  },

  〜 略 〜
});

playwright.config.tsのプロジェクト要素ごとに設定する

以下のように projects の配列要素ごとに設定できます。

export default defineConfig({
  〜 略 〜

  projects: [
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 12'],
        viewport: { width: 390, height: 800 },
      },
    },
  ],

  〜 略 〜
});

specファイルごとにviewportのサイズを設定する

以下のように.spec.tsファイルの上の方に記述するとファイルごとにviewportのサイズが設定できます。

test.use({
  viewport: { width: 1320, height: 1000 },
});

テストケースの途中でviewportのサイズを変更する

以下のように setViewportSize() を使用するとテストケースの中でリサイズできます。

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

test('test', async ({ page }) => {
  await page.setViewportSize({ width: 600, height: 600 });

  await page.setViewportSize(devices['iPhone X'].viewport);
}

画像heightをfullPageにする

以下のように toHaveScreenshot() の第二引数に fullPage: true を設定するとページの下端までスクリーンショットが取得できます。

    await expect(page).toHaveScreenshot('hoge.png', {
      fullPage: true,
    });