はじめに
近年、Webアプリケーションの自動テストにおいて、Playwrightが注目されています。
今回は、Playwrightを使用してWebテストを自動化しましたので、Playwrightの特長などの概要、環境構築から自動テストの方法を皆さまに共有します！
また、有償ツールの自動化との違いも触れますので、ぜひ最後までお読みください。
Playwrightとは
Microsoftが開発した、Webアプリのテストを自動化するためのオープンソースの自動化ツールです。
Playwrightは、複数のブラウザをサポートし、高速かつ効率的なテスト自動化ができます。また、JavaScript、TypeScript、Python、C#など複数の言語をサポートし、豊富な機能を備えています。モダンなWebアプリケーションのテストやブラウザの自動化に最適なツールで、人気を集めています。
Playwrightの特長
Playwrightはクロスブラウザ対応や高速で信頼性の高いテスト、ヘッドレスブラウザのサポートなど、多くの便利な機能を提供しています。
また、新たな拡張機能であるPlaywright MCPを導入することで、AI機能を活用して簡単にコード生成が可能となります。AIによるコード生成により、自然言語の指示を受けてコードを生成し、ブラウザ自動化テストなどを効率的に実行できるため、今注目されています。
npm ダウンロード数
2024年ごろからダウンロード数が急激に伸びており、2024年頃からダウンロード数が1番になっており、2025年4月頃から圧倒的に伸びています。これは、AI搭載のPlayright MCPがこの時期にリリースされたことが影響しているものと思われます。
https://npmtrends.com/cypress-vs-playwright-vs-puppeteer-vs-selenium-webdriver
インストールと環境構築
1. Node.jsのインストール
PlaywrightはNode.jsを使用するため、まずはNode.jsをインストールします。
https://nodejs.org/ja
2. Playwrightのインストール
コマンドプロンプトを開き、以下のコマンドを実行してPlaywrightをインストールします。
npm install @playwright/test
3. Playwright CLIのインストール
コマンドプロンプトを開き、以下のコマンドを実行してPlaywright CLIをインストールします。
npm install -g @playwright/cli
4. プロジェクトの設定
コマンドプロンプトで、Playwrightを使用するディレクトリを作成します。
cd C:\Users\ksaito\Documents
mkdir playwright-project1
Playwrightを使用するプロジェクトのディレクトリに移動し、以下のコマンドを実行してプロジェクトを初期化します。
npx playwright init
上記の手順でPlaywrightプロジェクトが初期化されると、testsディレクトリや設定ファイルが自動的に作成されます。
テストコードの作成
PlaywrightのAPIを使用して、自分でコーディングすることで、テスト作成できます。
また、レコーディング機能を利用することで、操作を記録してテストコードを自動生成することもできるため、コーディングできない方でも簡単にテストを作成できます。
今回は、レコーディング機能を利用してテストコードを作ってみました。
※testディレクトリに移動して以下のコマンドを実行します。
・レコーディング
1. コード生成（レコーディング）を行うために、以下のコマンドを使用します。
npx playwright codegen
2. レコーディング機能が開始されると、以下のように、レコーダー、コードエディタ(レコーディング内容を格納)、Chromiumブラウザが起動され、レコーディングモードが開始されます。
３. ブラウザ上部のアドレスバーに、テスト対象のURLを入力して、Enterキーを押します。
サンプルサイトとして、自動化テストのために一般公開されている外部サイトを使用します。
・HOTEL PLANISPHERE
https://hotel-example-site.takeyaqa.dev/ja/
4.開かれたテスト対象ページにて、テストシナリオの操作してレコーディングします。
1) ログイン画面を開く
2) ログインする
3) ログイン画面に表示された文字列を検証
4) ログアウトする
5. レコーディングを終了します。
コメント：
実際に操作してみると、レコーディング時の操作が軽快で、テストがスムーズに進みました。Playwrightの特長である高速かつ安定したテストフレームワークであることを実感しました。
・生成されたテストコードのコピーをコピー&JSファイルに貼り付け
testsディレクトリ配下にあるテストスクリプト(JSファイル)を開き、生成されたコードを貼り付ける
・レコーディングで生成されたテストコード
Playwrightでできること
・クロスブラウザテスト
(Google Chrome、Microsoft Edge、WebKit（Safari）、Firefox)
・Webページの表示
・マウスクリック
・キー入力
・スクリーンショットの取得
・アサーション(検証)
・データ駆動型テスト
・非同期処理
(待機時間やネットワークリクエストの完了を待つなど)
Playwright（無償ツール）のデメリット
・環境構築が面倒
・技術サポートなし
・コードベースのテストスクリプトによる、学習コスト、テスト作成・メンテナンスコストの増加
開発経験がない方が利用する場合、環境構築や使い慣れるのに時間がかかりやすいです。
また、条件分岐や変数などの複雑なテストをしたい場合、自分でコーディングする必要があるため、テスト作成コストがかかりやすく、メンテナンスしやすいような機能も特にないため、メンテナンスコストもかかりやすい傾向があります。
この場合、有償ツールの方が最終的に工数削減に繋がり、自動化の効果が出やすいケースがあります。
有償の自動化ツールのすすめ
弊社で取り扱っている自動化ツール「Ranorex」は、インストールが簡単でノーコードでテスト作成やメンテナンスがしやすいツールです。
また、無償のハンズオンセミナーやユーザーガイドなどの学習資材やテクニカルサポートも充実しております。
もし、Ranorexにご興味がありましたら、こちらからご確認ください。
テスト実行と結果確認
・テスト実行
デフォルトではヘッドレスモード（Headless Mode）でテストが実行されます。ヘッドレスモードでは、ブラウザウィンドウが表示されずに裏でテストが実行されます。
ヘッドレスモードを使用する利点は、テストを自動化する際に画面表示の負荷が少なく、高速にテストを実行できることです。ただし、テスト中に視覚的な検証が必要な場合や、UIの動作を確認したい場合は、ヘッドレスモードを無効にする必要があります。
ヘッドレスモードのコマンド
npx playwright test
ヘッドレスモード無効のコマンド
npx playwright test --headed
コメント：
テスト実行も高速で、スムーズにテストができました！
・レポート
テスト実行後、以下のコマンドを実行することで、レポートを確認できます。
npx playwright show-report
ブラウザにレポートが表示されます。
各テストケースを選択すると、ステップ内容などの詳細が確認できます。
まとめ
今回はPlaywrightを使用してWebテストを自動化しました。無償ツールであるにも関わらず、ここまで簡単にテスト自動化ができることに驚きました。テスト作成時のレコーディングやテスト実行も高速で安定している点がPlaywrightの利点だと感じました。
ただ、テストスクリプトがコードベースのため、コーディング経験がない方は使い慣れるまでに時間がかかりやすい印象です。また、担当者変更によりコードが解読できず、メンテナンスが困難になるリスクも考慮すると、直感的な操作が可能でサポートが充実している有償ツールを検討することも必要です。
無償ツールと有償ツールを長期間利用した場合の効果を比較検討することで、最適な自動化ツールの選択ができるかと思います。