JavaScript/Next.js/Playwright/React/TypeScript

E2Eテストツール「Playwright」とは？特長や使い方を詳しく解説

by MESCIUS-dev
普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はE2Eテストツール「Playwright」をご紹介します。

はじめに

ソフトウェア開発において、テストは仕様通りの動作を保証するための重要な作業工程です。バグを修正したり、機能を追加したりするたびに検証しなければならないため、工数のかかる作業でもあります。

特に頻繁にリリースしていく開発スタイルでは高い生産性が求められ、ソフトウェアの品質を維持しながらもテストに関する作業効率を向上させることが課題となります。なかでも、エンドユーザーと同様の使用方法で検証するE2E（エンドツーエンド）テストは、作業コストが高く人的ミスも生じやすい工程です。

E2Eテスト向けのツール「Playwright」は、Webアプリケーションのテスト作成や実施を支援する豊富な機能が揃っており、テスト工程全体の効率化に役立ちます。今回はPlaywrightの特長や簡単な使い方を解説していきます。

Playwrightとは

Playwright公式サイトのトップページ

Playwrightは、WebアプリケーションのE2Eテストの作業効率を上げるために作られたMicrosoft製のオープンソースのテストツールです。

E2Eテストとは、ソフトウェアの部品を組み上げた完成形の状態で、下記のようなエンドユーザー視点の操作により実施されるテスト工程で、各部品のテストでは検出できないバグや不具合を洗い出します。

  • リンク先の検証
  • クリックやフォーム入力などのイベント処理の検証
  • レンダリングされたコンテンツの検証

ソフトウェアの部品ごとの検証に特化したVitestやJestなどのテストツールとは違って、PlaywrightはE2Eテストをサポートするツールです。例えば、ブラウザを使ったWebアプリケーションの操作をシミュレートし、想定した操作によって正しい結果が得られるかを検証します。

また、Playwrightではブラウザ操作のシミュレートを並列で動かすことができ、E2Eテストの高速かつ自動的な実行が可能です。操作内容はテストコードで記述できるため、ビルドやデプロイの過程にE2Eテストの実行を組み込むことで、テスト工数を削減しながらもWebアプリケーションの品質を維持できます。

なお、他のテストツールと比べて後発ですが、リリースから多くの開発者に興味を持たれており今後注目したいツールです。

Playwrightの特長

E2Eテストのための豊富な機能を提供

PlaywrightではE2Eテストに役立つ豊富な機能が備わっています。

テストの実施には、ブラウザ操作をシミュレートするテストコードの記述が必要ですが、実際にブラウザで操作したアクションを記録してテストコードを自動生成することが可能です。

また、繰り返しテストに適した機能を備えています。ブラウザはGUIを伴わず並列で実行されるため起動やシミュレートが速く、テストの待ち時間を短縮できます。さらにテスト項目ごとにブラウザが初期化されるため、いつも同じ環境でのテスト結果を保証できます。そのため、デプロイ前の自動テストに組み込みやすく、早期にバグを修正してリリース間隔の短縮につなげることができます。

さらに、ブラウザ画面のキャプチャ機能により、画像の比較によるレンダリング状況の検証や、バグの原因を視覚的に追跡することが可能です。

クロスブラウザのE2Eテスト

Playwrightは様々な環境で実行できる運用性の高いテストツールです。WindowsやLinux、MacOSに対応しておりローカル環境やステージング環境など場所を選ばず導入しやすいです。さらに、実行環境もTypeScriptやJavaScriptに限らず、Python、.NET、Java用のライブラリも用意されているため、幅広く対応できます。

また、E2Eテストは主要なブラウザであるChromiumやWebkit、Firefoxに加えて、モバイル版のGoogle ChromeやSafariに対応しており、多くの操作環境を想定したテストが可能です。1つのテスト項目に対して複数のブラウザを並列実行できるため、E2Eテストの効率化に大きく貢献します。

CI/CDパイプラインに組み込みやすい

PlaywrightのテストはCIツールに簡単に組み込めます。PlaywrightはNode.jsをはじめ様々な実行環境に対応しており、コマンドラインから一括で実行できるので、サーバー上に構築されたパイプラインでも実行可能です。

例えば、CircleCI、JenkinsのようなCIツール、GitHub Actions、Azure Pipelines、Google Cloud Buildなどのクラウドサービスにも組み込めます。なお、Playwrightではテストを細分化して並列に実行できるので、充分なサーバーリソースが利用できる環境であれば、E2Eテストのさらなる高速化が見込めます。

また、テストが失敗したときには、HTMLで生成されたレポートによりバグの追跡が行えるので、スムーズにコード修正に移ることができます。

使ってみよう！Playwrightクイックスタート

ここからは、Playwrightの導入と簡単な使い方を解説していきます。

Next.jsで作成したWebアプリケーションのE2Eテストを想定して進めていきますが、まずはNode.jsのインストールから始めていきます。

Node.jsのインストール

Node.jsの公式サイトにアクセスします。

表示されている緑色のボタン「Download Node.js（LTS）」をクリックして、インストーラのダウンロードを行います。

Node.jsダウンロードの画面

2024年9月時点の推奨版は「v20.17.0 LTS」となっていますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。

インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。

インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。

  • macOSの場合は、「ターミナル」アプリ
  • Windowsの場合は「PowerShell」または「コマンドプロンプト」

以下のコマンドを実行し、結果を確認します。

node -v
npm -v

実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。

Webアプリケーションの準備

まずはNext.jsで簡単なWebアプリを作成しましょう。下記のコマンドでNext.jsのプロジェクトが作成され、必要なパッケージを含めて一括でインストールできます。

npx create-next-app@latest web-app
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes

プロジェクトが作成できたら、そのディレクトリ内に含まれる既存のファイルのコードを以下のように修正していきましょう。

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

さらに、appディレクトリ内にaboutディレクトリを作り、page.tsxのファイルを新規作成しましょう。

import Link from 'next/link'

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

コードの修正と追加ができたら、ローカル環境で動作させてみましょう。

cd web-app
npm run dev

コンソール上に表示されるURLにブラウザでアクセスして、下記の画面が表示されれば成功です。

Next.jsで作成したWebアプリの画面

Playwrightのインストールと設定

次に、下記のコマンドでPlaywrightをインストールしましょう。

npm init playwright@latest
√ Where to put your end-to-end tests? · tests
√ Add a GitHub Actions workflow? (y/N) · false
√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

インストールができたら、設定ファイルの「playwright.config.ts」を編集します。

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

export default defineConfig({
  // Look for test files in the "tests" directory, relative to this configuration file.
  testDir: 'tests',

  // Run all tests in parallel.
  fullyParallel: true,

  // Fail the build on CI if you accidentally left test.only in the source code.
  forbidOnly: !!process.env.CI,

  // Retry on CI only.
  retries: process.env.CI ? 2 : 0,

  // Opt out of parallel tests on CI.
  workers: process.env.CI ? 1 : undefined,

  // Reporter to use
  reporter: 'html',

  use: {
    // Base URL to use in actions like `await page.goto('/')`.
    baseURL: 'http://127.0.0.1:3000',

    // Collect trace when retrying the failed test.
    trace: 'on-first-retry',
  },
  // Configure projects for major browsers.
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  // Run your local dev server before starting the tests.
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI,
  },
});

続けて、テストコードの「tests/example.spec.ts」を編集しましょう。

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

test('should navigate to the about page', async ({ page }) => {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // Find an element with the text 'About' and click on it
  await page.click('text=About')
  // The new URL should be "/about" (baseURL is used there)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // The new page should contain an h1 with "About"
  await expect(page.locator('h1')).toContainText('About')
})

これでテストの準備は完了です。

PlaywrightでE2Eテストを実行

Webアプリケーションをビルドしてから、Playwrightのテストを実行してみましょう。

npm run build
npx playwright test

コンソールに下記のようなテストの実行結果が表示されれば成功です。

Playwrightのテスト結果

また、下記のコマンドでUIモードによるテスト実行が可能です。

npx playwright test --ui

UIモードでは、テストの追跡やデバッグを視覚的に行えます。

さいごに

今回は、クロスブラウザで高速なE2Eテストが実施できるPlaywrightの特長と使い方を解説しました。E2Eテストは品質向上に大きくつながる反面、実施テストの高さが問題でしたが、Playwrightの活用によりコスト削減の効果が期待できます。WebアプリケーションのE2Eテストにお悩みの方は導入を検討してみてください。

メシウスでは様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。

メシウスのJavaScriptライブラリ

無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。

＼  この記事をシェアする  ／