【Playwright】テスト実行時の動画を取得する

はじめに

この記事では、Playwright でテスト実行時の動画を取得する方法を記載します。
フロントエンドのテストでは、手動でのUI確認が大変だと感じることは、あるあるだと思いますが、Playwight を使えば自動テストで動画の取得して、UI確認ができます。

開発環境

開発環境は以下の通りです。

• Windows 11
• VSCode
• Next.js 14.2.4
• React 18.3.1
• TypeScript 5.5.2
• Playwright 1.49.0

事前準備

事前準備として、Playwright の利用設定とテスト対象コード・自動テストの実装を行います。

Playwirght の利用設定

以下の手順で利用設定を行います。

テスト対象コードの実装

テスト対象コードとして、画面遷移のコードを実装します。

app/page.tsx

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  );
}

app/about/page.tsx

import Link from "next/link";

export default function About() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  );
}

自動テストの実装

画面要素の確認と画面遷移のリンククリックの自動テストを実装します。

__tests__/e2e/page/spec.ts

import test, { expect } from "@playwright/test";

test("Home page should work as expected", async ({ page }) => {
  // Start from Home page
  await page.goto("http://localhost:3000/");
  // Find page heading
  await expect(page.getByRole("heading", { name: "Home" })).toBeVisible();
  // Find link  with the text 'About' and click on it
  const linkToAbout = page.getByRole("link", { name: "About" });
  await expect(linkToAbout).toBeVisible();
  await linkToAbout.click();

  // The new URL should be "/about"
  await expect(page).toHaveURL("http://localhost:3000/about");
  // Find page heading
  await expect(page.getByRole("heading", { name: "About" })).toBeVisible();
});

これで準備は完了です。

テスト実行時の動画取得を有効にする

playwright.config.ts でテスト実行時の動画取得を有効にできます。

playwright.config.ts

import { defineConfig } from '@playwright/test';
export default defineConfig({
  ...,
  use: {
    ...,
    video: 'on',
  },
});

以下のように動画サイズを指定することもできます。

playwright.config.ts

import { defineConfig } from '@playwright/test';
export default defineConfig({
  ...,
  use: {
    ...,
    video: {
      mode: "on",
      size: { width: 600, height: 400 },
    },
  },
});

テストを実行する

VSCode でテストを実行します。

テスト実行時の動画を確認する

テスト実行を以下のコマンドを実行すると、テストレポートがブラウザ上に表示されます。

npx playwright show-report

テストレポート内で取得した動画を確認できます。

test-results ディレクトリでも動画を確認できます。

参照

• Videos