[OSS紹介#59] Playwright：ウェブテスト自動化の新たな選択肢とそのメリット

in

この記事について

この記事では、注目のオープンソースソフトウェア（OSS）である「Playwright」を取り上げます。このツールは、ウェブアプリケーションのテストと自動化を効率的に行うための強力なフレームワークです。特に、クロスブラウザ対応のテストを一つのAPIで実現するため、開発者の生産性を大きく向上させることが期待されています。

現代のウェブ開発では、さまざまなブラウザとデバイスでの動作確認が不可欠です。しかし、手作業でのテストは手間がかかり、エラーの原因となることが多いです。Playwrightは、これらの課題を解決するために設計されており、信頼性の高い自動テストを実現します。自動的な待機機能や強力なアサーションなど、ウェブ特有の要件に対応した機能が整備されており、開発者はテスト作成にかかる時間を大幅に削減することができます。

今回の記事では、Playwrightの基本情報やインストール手順、機能の詳細について解説し、そのメリットや活用シーンを具体的に紹介します。これにより、ウェブ自動化における新たな選択肢を提示し、開発プロセスの効率化を目指す多くの開発者にとって有益な情報を提供することを目的としています。

リンク：https://github.com/microsoft/playwright

本コンテンツは、弊社AI開発ツール「IXV」を用いたOSSツール紹介です。情報の正確性には努めておりますが、内容に誤りが含まれる可能性がございますのでご了承ください。

1. Playwrightでできること

Playwrightは、Webテストと自動化のためのフレームワークです。このツールは、Chromium、Firefox、WebKitの各ブラウザに対して単一のAPIを提供し、クロスブラウザのWeb自動化を実現します。Playwrightは、以下のような機能を備えています。

1.1 テストの信頼性

Playwrightは、要素がアクション可能になるまで待機する「自動待機」機能を持ち、フレークテストを排除します。また、動的Webに特化したアサーションを提供し、必要な条件が満たされるまでチェックを自動的に再試行します。

1.2 テストの柔軟性

Playwrightは、異なるオリジンやユーザーでのテストシナリオを実行することができ、マルチタブやマルチユーザー環境でのテストが可能です。また、実際のユーザーと同様の入力パイプラインを使用するため、信頼性の高いイベントを生成します。

1.3 高速な実行

各テストに対して新しいブラウザコンテキストを作成し、完全なテストの隔離を実現します。これにより、各テストが独立して実行され、ログイン状態を再利用することで繰り返しのログイン操作を省略できます。

2. セットアップ手順

Playwrightを使用するためのセットアップは簡単です。以下に手順を示します。

2.1 動作環境

Playwrightは、Linux、macOS、Windowsで動作します。全てのプラットフォームでヘッドレス実行がサポートされており、動作環境の要件としては以下があります。

  • 最新のNode.js（バージョン18、20、または22）
  • Windows 10以降、またはWindows Server 2016以降（WSLでも実行可能）
  • macOS 14 Ventura、またはそれ以降
  • Debian 12、Ubuntu 22.04、Ubuntu 24.04のx86-64およびarm64アーキテクチャ

2.2 インストール

まずnpmでPlaywrightをインストールします。

npm install -D @playwright/test

次に、必要なブラウザをインストールします。

npx playwright install

新しいプロジェクトを作成する場合、以下のコマンドを使用します。

npm init playwright@latest

このコマンドにより、設定ファイルやサンプルが生成され、すぐにテストの記述を開始できます。インストール時には以下の選択肢があります。

  • TypeScriptまたはJavaScriptの選択（デフォルトはTypeScript）
  • テストフォルダの名前（デフォルトはtestsまたはe2e）
  • GitHub Actionsワークフローの追加（CI用）
  • Playwrightブラウザのインストール（デフォルトはtrue）

3. 簡単な使い方

Playwrightを使用することで、さまざまなテストを簡単に実行できます。以下にいくつかのコードスニペットを示します。

3.1 ページのスクリーンショット

以下のコードは、Playwrightのホームページに移動し、スクリーンショットを保存します。

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

test('Page Screenshot', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: 'example.png' });
});

3.2 モバイルと位置情報のエミュレーション

モバイルSafariをエミュレートし、指定した位置情報でGoogleマップにアクセスするコードは以下の通りです。

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

test.use({
  ...devices['iPhone 13 Pro'],
  locale: 'en-US',
  geolocation: { longitude: 12.492507, latitude: 41.889938 },
  permissions: ['geolocation'],
})

test('Mobile and geolocation', async ({ page }) => {
  await page.goto('https://maps.google.com');
  await page.getByText('Your location').click();
  await page.waitForRequest(/.*preview\/pwa/);
  await page.screenshot({ path: 'colosseum-iphone.png' });
});

3.3 ネットワークリクエストのインターセプト

以下のコードは、ページ上のすべてのネットワークリクエストをログに記録します。

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

test('Intercept network requests', async ({ page }) => {
  await page.route('**', route => {
    console.log(route.request().url());
    route.continue();
  });
  await page.goto('http://todomvc.com');
});

結論

Playwrightは、信頼性が高く、柔軟で、高速なWebテストと自動化を実現する強力なツールです。クロスブラウザのテストを簡単に実行できるため、開発者やテストエンジニアにとって非常に有用です。豊富な機能と簡単なセットアップ手順により、すぐにテストを始めることができます。