Playwrightの使い方をインストール方法から実践例まで解説

Playwrightの使い方をインストール方法から実践例まで解説

Playwrightを使ったテスト自動化を始めたい方に向けて、Playwrightの概要や特徴、Seleniumとの違い、環境構築から基本的な使い方までをわかりやすく解説します。初めてPlaywrightに触れる方でも、実践的な知識を体系的に学べる内容になっています。

目次

Playwrightとは

Playwright（プレイライト）とは、Microsoftが2020年1月に公開したオープンソースのブラウザテスト自動化ツールです。E2E（エンドツーエンド）テストフレームワークとして設計されており、Webアプリケーションのテスト自動化を効率的に行うことができます。

Playwrightは完全に無料で使用できるオープンソースソフトウェアであり、GitHubで公開されています。以下に、主な特徴を紹介します。

対応ブラウザ

  • Chromium（Google Chrome、Microsoft Edgeなどがベースになっているブラウザ）
  • Firefox
  • WebKit（Safariのエンジン）

対応プログラミング言語

  • TypeScript
  • JavaScript
  • Python
  • .NET
  • Java

Playwrightでできること

  • E2Eテストの自動化
  • Webスクレイピング
  • スクリーンショット撮影
  • PDF生成（Chromium）
  • ブラウザ操作の自動化全般

Playwrightの最大の特徴は、Auto-wait（自動待機）機能です。この機能により、要素が操作可能になるまで自動的に待機してくれるため、タイミング問題によるテストの不安定さ（Flaky Test）を大幅に削減できます。

また、クロスブラウザ対応により、複数のブラウザで同時にテストを実行できるため、異なる環境での動作確認を効率的に行えます。さらに、Windows、Linux、macOSといったクロスプラットフォーム対応により、開発環境を選ばず使用できる点も魅力です。

PlaywrightとSeleniumの違いを比較

Playwrightの特徴を理解すると、Seleniumとは何が違うのかが気になる方も多いのではないでしょうか。 そこで本章では、テスト自動化ツールとして長年利用されてきたSeleniumとPlaywrightの主な違いを比較表で整理し、それぞれのメリットについても解説します。

項目 Playwright Selenium
開発元 Microsoft オープンソースコミュニティ
公開年 2020年 2004年
実行速度 高速（WebSocket通信） やや遅い（HTTP通信）
セットアップ 容易（ブラウザ自動インストール） やや複雑（WebDriver個別設定）
自動待機機能 ビルトイン（Auto-wait） 明示的な記述が必要
対応ブラウザ Chromium、Firefox、WebKit Chrome、Firefox、Safari、IE等
コミュニティ 成長中 非常に大きい
日本語情報 増加中 豊富

Playwrightの主なメリット:

  • WebSocketプロトコルによる高速で安定した通信
  • ブラウザが自動的にインストールされるため、セットアップが容易
  • Auto-wait機能により、明示的な待機処理が不要

Seleniumの主なメリット:

  • 20年近い歴史があり、情報が豊富
  • 大規模なコミュニティとエコシステム
  • より幅広いブラウザをサポート

どちらを選ぶかは、プロジェクトの要件やチームの状況によって異なります。新規プロジェクトでモダンなWebアプリケーションをテストする場合はPlaywrightが、既存のSelenium資産がある場合や特定のブラウザサポートが必要な場合はSeleniumが適しています。

PlaywrightとSeleniumの詳細な比較については、別の記事で解説しています。本記事では触れきれなかった点も含めて紹介していますので、あわせてご覧ください。

PlaywrightとSeleniumの違いを速度・機能の観点で比較
PlaywrightとSeleniumの違いを速度・機能の観点で比較


ただし、ツール導入後に「気づいたら誰も使っていなかった／うまく運用できていない」という現場は珍しくありません。実はツール導入よりも、導入後に自動化を続けられるかどうかの方が、自動化の成否を左右するポイントになります。テスト自動化ツールを現場に定着させるコツについては、こちらで詳しく解説しています。

「テスト自動化が続かない」はなぜ起きる？現場で本当に使われるツールとは
「テスト自動化が続かない」はなぜ起きる？現場で本当に使われるツールとは

Playwrightの環境構築手順

Playwrightの概要を理解した後は、実際に動かしてみることが重要です。本章では、Playwrightをインストールし、テストを実行できるようになるまでの手順を解説します。

前提条件

Playwrightをインストールする前に、以下の環境を準備してください。

必要な環境

  • Node.js: 20.x／22.x／24.x の最新バージョンを推奨
  • npm または yarn
  • サポートされているOS: Windows、Linux、macOS（詳細は、公式のSystem requirementsを参照）
  • 必要なディスク容量: 約500MB（ブラウザインストール含む）

Node.jsがインストールされているかは、以下のコマンドで確認できます。

node -v
# v18.17.0 などのバージョンが表示されればOK

Node.jsがインストールされていない場合は、Node.js公式サイトからダウンロードしてインストールしてください。

Playwrightのインストール手順

インストール

Node.jsの準備ができたら、Playwrightをインストールします。以下のコマンドを実行してください。

npm init playwright@latest

このコマンドを実行すると、対話的にいくつかの質問が表示されます。インストール時の質問と推奨設定は以下の通りです。

  1. Do you want to use TypeScript or JavaScript?
    TypeScript を選択（初心者の方はJavaScriptでもOK）

  2. Where to put your end-to-end tests?
    デフォルトの tests のままEnterを押す

  3. Add a GitHub Actions workflow?
    後で設定できるので false を選択（Nを入力）

  4. Install Playwright browsers?
    true を選択（Yを入力）してブラウザを自動インストール

すべての質問に答えると、以下のようなメッセージが表示されます。

✔ Success! Created a Playwright Test project at [インストール先]

Inside that directory, you can run several commands:

＊中略＊

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

インストールが完了すると、以下のファイルとフォルダが作成されます。

project/
├── node_modules/        # 依存パッケージ
├── tests/               # テストファイルを配置
│   └── example.spec.ts  # サンプルテスト
├── playwright.config.ts # Playwrightの設定ファイル
└── package.json         # プロジェクト設定

動作確認

インストールが正しく完了したか確認するため、サンプルテストを実行してみましょう。

npx playwright test

テストが実行され、以下のような結果が表示されれば成功です。

Running 6 tests using 5 workers
  6 passed (9.5s)

To open last HTML report run:

  npx playwright show-report

表示されたコマンドを実行することで、テスト実行結果を確認できます。

npx playwright show-report

これでPlaywrightの環境構築は完了です。

Playwrightの基本的なメソッドと使い方

環境構築が完了したら、次は実際にテストコードを書いていきます。 本章では、Playwrightでテストを記述する際に使用する基本的なメソッドを、カテゴリ別に解説します。

ページ操作の基本メソッド

ページ全体に対する操作を行うメソッドです。

主なメソッド

// ページ遷移
await page.goto('https://example.com');

// ページリロード
await page.reload();

// 戻る
await page.goBack();

// 進む
await page.goForward();

page.goto()は最も基本的なメソッドで、指定したURLにアクセスします。Playwrightは自動的にページの読み込みが完了するまで待機してくれるため、明示的な待機処理は不要です。

要素取得のメソッド

画面上の要素を取得するためのメソッドです。Playwrightは複数の方法で要素を取得できます。

主なメソッド:

// CSSセレクタで取得
const element = page.locator('#login-button');

// ロールで取得（推奨）
const button = page.getByRole('button', { name: 'ログイン' });

// テキストで取得
const heading = page.getByText('ようこそ');

// プレースホルダーで取得
const input = page.getByPlaceholder('メールアドレス');

// ラベルで取得
const emailInput = page.getByLabel('メールアドレス');

Playwrightでは、getByRole()やgetByLabel()などのメソッドを使うことが推奨されています。これらのメソッドは、アクセシビリティの観点から要素を取得するため、テストコードが読みやすく、メンテナンスしやすくなります。

要素操作のメソッド

取得した要素に対して操作を行うメソッドです。

主なメソッド

// クリック
await button.click();

// テキスト入力
await input.fill('user@example.com');

// チェックボックスをチェック
await checkbox.check();

// セレクトボックスで選択
await select.selectOption('option1');

// ホバー
await element.hover();

これらのメソッドは、要素が操作可能になるまで自動的に待機してくれます。たとえば、click()を実行すると、要素が表示され、有効化され、他の要素に隠されていない状態になるまで待機してからクリックします。

アサーション（検証）のメソッド

テストの検証に使用するアサーションメソッドです。

主なメソッド

// ページタイトルの検証
await expect(page).toHaveTitle('ホーム - Example');

// URLの検証
await expect(page).toHaveURL(/.*dashboard/);

// 要素の表示確認
await expect(element).toBeVisible();

// テキストの検証
await expect(heading).toHaveText('ダッシュボード');

// 有効状態の確認
await expect(button).toBeEnabled();

アサーションも自動的にリトライされます。たとえば、toBeVisible()は要素が実際に表示されるまで数秒間リトライし続けます。これにより、動的なコンテンツに対しても安定したテストを書くことができます。

実装例：ログインフローのテスト

これまでに紹介したメソッドを活用し、ログインフローを例に、実際のテストコードがどのようになるかを見ていきます。

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

test('ログインフローのテスト', async ({ page }) => {
  // ログインページにアクセス
  await page.goto('https://example.com/login');
  
  // ページタイトルを確認
  await expect(page).toHaveTitle(/ログイン/);
  
  // メールアドレスを入力
  await page.getByLabel('メールアドレス').fill('user@example.com');
  
  // パスワードを入力
  await page.getByLabel('パスワード').fill('password123');
  
  // ログインボタンをクリック
  await page.getByRole('button', { name: 'ログイン' }).click();
  
  // ダッシュボードに遷移したことを確認
  await expect(page).toHaveURL(/.*dashboard/);
  
  // ウェルカムメッセージが表示されることを確認
  await expect(page.getByText('ようこそ')).toBeVisible();
});

このように、これまで紹介したメソッドを組み合わせることで、実際のユーザー操作をテストとして自動化できます。

知っておくべきPlaywrightの主要機能

基本的なメソッドやコード例を確認した上で、Playwrightをより効果的に活用するための機能についても押さえておくことが重要です。本章では、テスト自動化を効率化する上で特に知っておきたい、Playwrightの主要な5つの機能を解説します。

Auto-wait（自動待機）機能

Playwrightの最も特徴的な機能が、Auto-wait（自動待機）です。

従来のテスト自動化ツールでは、要素が表示されるまで明示的に待機処理を書く必要がありました。たとえば、「3秒待つ」というような固定の待機時間を設定したり、「この要素が表示されるまで待つ」という条件付き待機を記述したりする必要がありました。

しかし、Playwrightでは、すべての操作（クリック、入力、アサーションなど）が自動的に要素が操作可能になるまで待機します。具体的には、以下の条件を満たすまで待機します。

  • 要素が存在する
  • 要素が表示されている
  • 要素が有効化されている（disabled属性がない）
  • 要素が安定している（アニメーション中でない）
  • 他の要素に隠されていない

この機能により、Flaky Test（タイミング問題で成功したり失敗したりする不安定なテスト）を大幅に削減でき、信頼性の高いテストを作成できます。

デフォルトのタイムアウトは30秒ですが、設定ファイルで変更することも可能です。

マルチブラウザ対応

Playwrightは、Chromium、Firefox、WebKitの3つのブラウザエンジンをサポートしています。これにより、異なるブラウザでの動作確認を効率的に行えます。

設定ファイル（playwright.config.ts）で、テストを実行するブラウザを指定できます。

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

この設定により、1つのテストコードで3つのブラウザでテストを実行できます。さらに、並列実行の設定を行うことで、複数のブラウザでのテストを同時に実行し、テスト時間を短縮することも可能です。

コード生成機能（Codegen）

Playwrightには、ブラウザ操作を記録してテストコードを自動生成する機能（Codegen）があります。

以下のコマンドを実行すると、ブラウザが起動し、操作を記録できます。

npx playwright codegen https://example.com

ブラウザ上で操作（クリック、入力など）を行うと、その操作に対応するコードがリアルタイムで生成されます。生成されたコードをコピーして、テストファイルに貼り付けることで、テストを作成できます。

Codegenは非常に便利な機能ですが、生成されたコードは必ずしも最適化されているわけではありません。特に、セレクタが脆弱で、UI変更に弱いコードが生成されることがあります。そのため、生成されたコードをそのまま使うのではなく、getByRole()やgetByLabel()などの推奨されるメソッドに書き換えることをおすすめします。

トレース機能とデバッグ

Playwrightには、テスト実行の詳細な記録を取るトレース機能があります。

たとえば設定ファイルで以下のように設定することで、トレースを記録できます。他にも失敗時のみ取得するなど、複数のオプションがあります。

export default defineConfig({
  use: {
    trace: 'on',
  },
});

記録されたトレースは、Trace Viewerで確認できます。

npx playwright show-trace trace.zip

Trace Viewerでは、以下の情報を確認できます。

  • 各ステップのスクリーンショット
  • DOMの状態
  • コンソールログ
  • ネットワークリクエスト
  • タイムライン

これらの情報により、テストが失敗した原因を効率的に特定できます。

モバイルエミュレーション

Playwrightは、モバイルデバイスをエミュレートしてテストする機能も提供しています。

設定ファイルで、以下のようにデバイスを指定できます。

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

export default defineConfig({
  projects: [
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },
  ],
});

Playwrightには、iPhone、iPad、Android端末など、一般的なデバイスのプリセットが用意されています。これらを使用することで、モバイル環境でのテストを簡単に行えます。

また、カスタムのビューポートサイズやユーザーエージェントを指定することも可能です。

まとめ

本記事では、Playwrightの概要から環境構築、基本的な使い方、主要機能までを解説しました。PlaywrightはMicrosoft製のオープンソースツールで、複数ブラウザに対応し、Auto-waitや豊富なデバッグ機能により安定したE2Eテストを実現できます。一方で、プログラミングスキルの習得や、UI変更に伴うテストコードのメンテナンスなど、運用面での課題も存在します。こうした点を踏まえると、チーム全体で効率的にテスト自動化を進めたい場合には、ノーコードツールという選択肢も有効です。MagicPodのようなツールを併用することで、より無理のない形でテスト自動化に取り組めるでしょう。

誰でもカンタンに使えるテスト自動化ツール MagicPodのご紹介

MagicPodを導入することで得られる効果や、多くの企業に選ばれている理由をわかりやすくまとめました。

ダウンロード 無料
ホワイトペーパー
MagicPod 編集部

MagicPod 編集部

テスト自動化の最新トレンドや品質向上のノウハウなど、現場で役立つ情報をお届けします。

タグ

#Allure #Android #Appium #Bitrisse #chromedriver #CICD #CircleCI #E2Eテスト #FluentLenium #Geb #iOS #Jenkins #MagicPod機能紹介 #MagicPod活用事例 #Magic_Pod #QA #QAエンジニア #reg-cli #Sahagin #Selenium #Selenium_Builder #Selenium_IDE #software_testing #Spock #test_automation #WebDriver #イベントレポート #テスト自動化 #モバイル #基礎知識 #技術解説