Playwrightのインストール

Playwrightの概要とインストール方法 🚀

Playwrightは、Webアプリケーションをテストするための強力な自動化ライブラリです。Chromium、Firefox、WebKitという主要なブラウザを一つのAPIで制御できるのが最大の特徴です。

なぜPlaywrightを使用するのか？

Playwrightは、信頼性と効率性を両立させるための様々な機能を提供します。

• クロスブラウザ対応: 異なるブラウザ間でコードを書き換える必要がなく、一つのスクリプトでテストが完結します。
• 高速な実行速度: ブラウザと直接通信するため、他のツールよりも高速に動作します。
• 高い信頼性: 自動ウェイト機能により、要素が表示されるまで賢く待機し、テストの不安定な動作を防ぎます。
• 豊富なAPI: ファイルのアップロード・ダウンロード、ネットワークトラフィックの監視など、実際のユーザーが行う操作をほぼすべて再現できます。

セットアップ手順 ⚙️

Playwrightは、Node.js環境で動作します。以下の3つのステップで簡単にセットアップできます。

Node.jsのインストール:

まず、Node.jsがインストールされているかを確認します。

node -v

インストールされていない場合は、公式サイトから最新版をダウンロードしてインストールしてください。

Playwrightのインストール:

プロジェクトのディレクトリで、npmを使ってPlaywrightをインストールします。

npm install playwright

ブラウザのインストール:

Playwrightが使用する主要なブラウザをインストールします。

npx playwright install

このコマンドにより、Chromium、Firefox、WebKitが自動的にダウンロードされ、テストを実行する準備が整います。

簡単な使用例 📝

Node.jsでの基本操作 以下のJavaScriptコードは、ブラウザを起動し、指定したウェブサイトのタイトルを取得する簡単な例です。

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch(); // ブラウザを起動
  const page = await browser.newPage(); // 新しいページを開く
  await page.goto('https://playwright.dev'); // URLに移動
  console.log(await page.title()); // ページのタイトルを出力
  await browser.close(); // ブラウザを閉じる
})();

このファイルをexample.jsとして保存し、node example.jsコマンドで実行できます。

Reactでのテスト活用 ⚛️

PlaywrightはReactアプリケーションのE2Eテストに最適です。ここでは、Reactプロジェクトでのセットアップとテストの書き方を紹介します。

セットアップ

• プロジェクトの作成: Reactプロジェクトをまだ持っていない場合は、create-react-appで作成します。

  npx create-react-app my-app
  cd my-app

• Playwrightのインストール: Reactプロジェクト内で@playwright/testライブラリをインストールします。このライブラリは、テストフレームワーク機能を提供し、テストコードをより簡潔に書けるようにします。

  npm install --save-dev @playwright/test
  npx playwright install

テストスクリプトの作成

src/App.test.jsのようなテストファイルに、以下のコードを記述します。

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

test('アプリケーションのタイトルを検証', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle(/React App/);
});

test('リンクのクリックとURLの検証', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('text=Learn React');
  await expect(page).toHaveURL(/reactjs.org/);
});

テストの実行

Reactの開発サーバーを起動し、新しいターミナルでテストを実行します。

npm start # 開発サーバーを起動
npx playwright test

Playwrightが自動でブラウザを立ち上げ、テストを実行して結果を表示します。

このように、PlaywrightはReactの動的な挙動を考慮した信頼性の高いテストを簡単に実装できるため、Webアプリケーションの品質向上に不可欠なツールと言えます。