エンジニア全般
Webアプリケーションの開発において、クロスブラウザテストは欠かせない要素です。この重要なプロセスを効率化し、より簡単にするツールがPlaywrightです。Playwrightは、Microsoftによって開発された最新のテスト自動化ツールで、複数のブラウザ（Chrome、Firefox、Safariなど）でのテストをシームレスに行うことができます。このツールは、ヘッドレスブラウザテストをサポートし、テストの実行速度が非常に速いのが特徴です。また、PlaywrightはAPIの操作がシンプルで、Webページの全体的な挙動やユーザーインタラクションのテストを正確にシミュレートできます。開発者は、Playwrightを使って、簡単に高品質な自動テストを構築することが可能になります。
本記事では、テスト自動化ツールPlaywrightの概要や使い方について詳しく解説します。
東京在住、大手IT企業出身、Web業界10年以上のアラサーです。新規事業開発やシステム開発にプロジェクトベースで関与したりこれまでの経験をもとに執筆活動を行っています。
Playwrightとは何か？
Playwrightは、テスト自動化ツールの一つで、最近話題となっています。Webアプリケーションのテストを自動化するために使用されます。
Playwrightの概要
Playwrightは、使いやすさや対応言語の多さが特徴のテスト自動化ツールです。Google ChromeやMicrosoft Edge、Firefoxなどのさまざまなブラウザに対応しています。
Playwrightは、C#、Java、JavaScript、TypeScript、Pythonなどのプログラミング言語で利用することができます。さまざまな開発環境での利用が可能で、幅広い開発者に使われています。
Puppeteerとの違い
PlaywrightとPuppeteerは、どちらもテスト自動化ツールですが、いくつかの違いがあります。
まず、対応しているブラウザの数が異なります。PuppeteerはGoogle Chromeのみに対応していますが、PlaywrightはGoogle Chrome、Microsoft Edge、Firefoxなど、より多くのブラウザに対応しています。
また、Playwrightはシングルスレッドだけでなく、マルチスレッドでのテスト実行もサポートしており、高速かつ効率的なテスト実行が可能です。一方、Puppeteerはシングルスレッドでの実行となります。
さらに、Playwrightはフルページスクリーンショットや、ルートノードの取得などの機能も提供しています。これにより、より幅広いテストケースをカバーすることができます。
Playwrightの特徴
Playwrightは、E2Eテスト自動化ツールの一つです。その使いやすさや対応言語の多さが特徴とされています。Webアプリを開発する際のテストを自動化するために使用されます。
Playwrightは、Google ChromeやMicrosoft Edge、Firefoxなどのさまざまなブラウザに対応しています。さらに、C#、Java、JavaScript、TypeScript、Pythonなどの様々なプログラミング言語で利用することができます。
ヘッドレスブラウザーの利用
Playwrightは、ヘッドレスブラウザーの利用が可能です。ヘッドレスブラウザーとは、GUIを表示せずにコマンドラインで操作するブラウザのことを指します。これにより、テストの実行速度を向上させることができます。
複数ブラウザへの対応
Playwrightは、複数のブラウザに対応しています。これにより、プロジェクトの要件に合わせて最適なブラウザを選択することができます。また、同じコードベースを使用して、異なるブラウザでのテストを行うことも可能です。
以上が、Playwrightの特徴の一部です。これらの特徴により、Playwrightは使いやすいテスト自動化ツールとして人気を集めています。
Playwrightの使い方
Playwrightの使い方について説明します。
インストール方法
Playwrightを使用するには、まずNode.jsがインストールされている環境が必要です。Node.jsがインストールされていない場合は、公式サイトからダウンロードしてインストールしてください。
次に、ターミナルまたはコマンドプロンプトで以下のコマンドを実行して、Playwrightをインストールします。
上記のコマンドを実行すると、Playwrightが自動的にインストールされます。
テストコードの作成と実行
Playwrightを使用したテストコードを作成するには、以下の手順に従ってください。
- テストコードを保存するフォルダを作成します。
- 作成したフォルダに移動し、ターミナルまたはコマンドプロンプトで以下のコマンドを入力して空のプロジェクトを作成します。
上記のコマンドを実行すると、自動的にプロジェクトの雛形が作成されます。
- テストコードを作成します。テストコードは、テスト対象のWebアプリケーションを操作する手順や期待される結果を記述します。
- テストコードを保存したファイルを実行するには、以下のコマンドを使用します。
上記のコマンドを実行すると、テストコードが実行されます。テストの進行状況や結果が表示されます。
以上で、Playwrightのインストール方法とテストコードの作成・実行方法の説明を終わります。
実用例とテストケースの作成
Playwrightを使用した実用例とテストケースの作成方法を紹介します。
URL遷移のテスト
まず、URL遷移のテストケースを作成してみましょう。このテストケースでは、指定したURLにアクセスし、正常にページが表示されるかどうかをテストします。
以下は、Playwrightを使用したURL遷移のテストケースの一例です。
import { test, expect } from ‘@playwright/test’;
test(‘URL遷移のテスト’, async ({ page }) => {
// 指定したURLにアクセス
await page.goto(‘https://example.com’);
// ページのタイトルを取得
const title = await page.title();
// ページのタイトルが正しく表示されているかをアサート
expect(title).toBe(‘Example Domain’);
});
このテストケースでは、page.goto()を使用して指定したURLにアクセスし、page.title()を使用してページのタイトルを取得しています。そして、expect()を使用してページのタイトルが正しいかどうかをアサートしています。
URL遷移のテストでは、他にもリンクのクリックやフォームの入力など、様々な場面でテストを行うことができます。具体的なテストケースは、アプリケーションの要件やシナリオに合わせて作成してください。
画面遷移のテスト
次に、画面遷移のテストケースを作成してみましょう。このテストケースでは、ページ内のリンクをクリックし、正常に画面が遷移するかどうかをテストします。
以下は、Playwrightを使用した画面遷移のテストケースの一例です。
import { test, expect } from ‘@playwright/test’;
test(‘画面遷移のテスト’, async ({ page }) => {
// 指定したURLにアクセス
await page.goto(‘https://example.com’);
// リンクをクリックして画面遷移
await page.click(‘a’);
// 新しいページのURLを取得
const newURL = await page.url();
// 新しいページのURLが正しいかをアサート
expect(newURL).toBe(‘https://example.com/new’);
});
このテストケースでは、page.click()を使用してリンクをクリックし、page.url()を使用して新しいページのURLを取得しています。そして、expect()を使用して新しいページのURLが正しいかどうかをアサートしています。
画面遷移のテストでは、ページ内の要素の存在確認や表示内容の検証など、さまざまなアサーションを組み合わせてテストケースを作成することができます。具体的なテストケースは、アプリケーションの画面遷移の仕様や挙動に基づいて設計してください。
まとめ
Playwrightは、テスト自動化ツールとして注目を集めているツールです。使いやすさや対応言語の多さが特徴であり、E2Eテストを自動化する際に重宝されています。Playwrightは、Google ChromeやMicrosoft Edge、Firefoxなどのブラウザに対応しており、C#、Java、JavaScript、TypeScript、Pythonなどのプログラミング言語で利用することができます。インストールも簡単で、Node.jsの環境があればすぐに導入できます。Playwrightを使用すると、ブラウザの起動やテストコードの作成が容易になります。また、Playwright Testingというマイクロソフトが提供するマネージドサービスもあり、大規模な並列処理によるテスト実行が可能です。Playwrightは、テスト自動化を行う際に頼りになるツールであり、開発効率を向上させることができます。是非、Playwrightを活用して効果的なテスト自動化を行いましょう。
この記事ではPlaywrightの基礎知識をご紹介しました。Playwrightについてまずはどのようなものか理解したいと考えている方、Playwrightを取り入れるべきか検討されている方にとって、参考になりましたら幸いです。
Playwright含めた開発環境の検討など開発課題をお持ちの方はぜひ一度Jiteraまでご相談ください。
