React TypeScriptでのPlaywrightを使用したスクリーンショットの撮影方法

目次

React TypeScriptでのPlaywrightを使用したスクリーンショットの撮影方法

この記事では、React TypeScriptプロジェクトでPlaywrightを使用してスクリーンショットを撮影する方法を紹介します。

ステップ1: Playwrightのインストール

プロジェクトにPlaywrightをインストールするには、次のコマンドを実行します。

npm install playwright

ステップ2: テストファイルの作成

Playwrightを使用してテストを書きます。
ここでは、特定のページを開いてスクリーンショットを撮るテストの例を示します。

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

test('ページのスクリーンショットを撮影', async ({ page }) => {
  // ページにアクセス
  await page.goto('https://example.com');

  // スクリーンショットを撮影
  await page.screenshot({ path: 'screenshot.png' });
});

ステップ3: テストの実行

テストを実行するには、以下のコマンドを使用します。

npx playwright test

追加オプション

スクリーンショットに関しては、さまざまなオプションを指定できます。
例えば、特定の要素のスクリーンショットを撮る、全画面のスクリーンショットを撮る、画像の品質を指定するなどが可能です。

この方法で、React TypeScriptプロジェクト内でPlaywrightを使用してスクリーンショットを撮影することができます。