Playwright自動テストの使い方

最近、自動化テストの分野を探求されている方なら、Playwright（プレイライト）について絶賛する声を耳にしたことがあるかもしれません。その盛り上がりの理由に疑問を感じているかもしれませんし、どこから手をつければいいのか悩んでいるかもしれません。ご安心ください。あなたは一人ではありませんし、正しい場所に来ました。

このガイドでは、自動化テストのためのPlaywrightについて、その絶対的な基礎から、成功へと導く実証済みのベストプラクティスまで、知っておくべきことすべてを順を追って説明します。自動化の世界に飛び込みたいマニュアルテスターの方も、ワークフローに信頼性の高いテストを追加したい開発者の方も、あるいは単に最新のテストツールに興味があるだけの方も、私たちが実際に理解できる方法で解説していきます。

button

Playwrightとは何か、なぜ注目すべきなのか？

Playwrightは、Microsoftが開発したオープンソースの自動化テストフレームワークで、シンプルに機能します。ボタンのクリック、フォームへの入力、動作の検証など、ブラウザをプログラムで制御でき、通常発生するような手間はかかりません。脆く動きが遅いと感じられる古いツールとは異なり、Playwrightは最新のWebアプリケーションを gracefully に処理し、要素をインテリジェントに待機し、Chrome、Firefox、Safariで同じコードでテストを実行します。時間を無駄にしない信頼性の高いテストを求めるなら、Playwrightはあなたの注目に値します。

自動化テストにPlaywrightを選ぶ理由

チームが自動化テストにPlaywrightを採用するのは、それが具体的な利点をもたらすからです。

真のクロスブラウザテスト：一度書けば、どこでも実行できます。Chrome、Firefox、Safari、Edgeなど、すべてがネイティブでサポートされています。
驚異的なスピード：デフォルトでの並列実行により、かつて数時間かかっていたテストスイートが数分で完了します。
モダンなアプリ向けに構築：SPA、シャドウDOM、動的コンテンツなど、Playwrightは今日のWebを回避策なしで処理します。
インテリジェントな信頼性：自動待機機能により、不安定なテストがなくなります。ランダムなスリープタイマーを散りばめる必要はもうありません。
簡単なデバッグ：詳細なトレース、スクリーンショット、ビデオにより、障害発生時に何が問題だったのかを正確に示します。

初めてのPlaywrightテストのセットアップ

a. 手動セットアップ

Playwrightの始め方は驚くほど簡単です。複雑な設定や不可解なセットアップ儀式と格闘する必要はありません。

まず、お使いのマシンにNode.jsがインストールされている必要があります。それが準備できたら、新しいプロジェクトディレクトリを作成し、次を実行します。

npm init playwright@latest

このコマンドは、簡単なセットアッププロセスをガイドします。テスト対象とするブラウザ（ヒント：最大のカバレッジのために3つすべてから始めるのがおすすめです）と、GitHub Actionsワークフローを追加するかどうかを尋ねます。セットアップ全体にかかる時間は約2分です。

完了すると、以下を含むプロジェクト構造が得られます。

テストファイル用のtests/ディレクトリ
設定用のplaywright.config.js

default playwright test folder and config file

始めに役立つサンプルテストファイル

b. VS CodeとCursorとのシームレスなIDE統合

VS CodeまたはCursorを使用している場合、Playwrightの開始はさらにスムーズになります。公式のPlaywright拡張機能は、エディター内でワンクリックでテストの記録、デバッグ、実行を可能にします。

マーケットプレイスからインストールすると、「Record new test（新しいテストを記録）」や「Pick locator（ロケーターを選択）」コマンドが表示され、推測作業が不要になります。

より深いプロジェクト統合のために、CursorユーザーはPlaywright MCP（Model Context Protocol）サーバーを活用して、自然言語を通じてテスト生成とプロジェクトセットアップを自動化できます。ワークフローを効率化する設定は次のとおりです。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PW_TEST_DIR": "./tests",
        "PW_CONFIG_PATH": "./playwright.config.js"
      }
    }
  }
}

この設定により、Cursorに「ページオブジェクトモデルを使用してログインテストを作成する」または「チェックアウトフローにアクセシビリティチェックを追加する」と尋ねると、プロジェクトの慣例に従った適切な構造のテストファイルが生成されます。MCPサーバーは既存のコードベースを理解するため、新しいチームメンバーのオンボーディングやテスト標準の維持がほとんど手間なく行えます。

初めてのテストスクリプトの作成

実際に使えるものを作成してみましょう。アプリケーションのログインページをテストしていると想像してください。そのテストは次のように記述できます。

const { test, expect } = require('@playwright/test');

test('successful login flow', async ({ page }) => {
  await page.goto('https://your-app.com/login');
  
  await page.locator('data-testid=username').fill('testuser');
  await page.locator('data-testid=password').fill('securepassword');
  await page.locator('button:has-text("Login")').click();
  
  await expect(page.locator('h1')).toContainText('Dashboard');
  await expect(page).toHaveURL('**/dashboard');
});

これがどれほど読みやすいかにお気づきでしょうか？コードはほとんど物語を語っています。ログインページに移動し、資格情報を入力し、ボタンをクリックして、正しい場所にたどり着いたことを確認します。これが自動化テストにおけるPlaywrightの美しさです。邪魔にならず、テスト方法ではなく、何をテストするかに集中できます。

ベストプラクティスのヒント：意味のあるテスト名を使用し、要素にdata-testid属性を追加します。これにより、テストはUIの変更に対してより堅牢になり、チームにとって理解しやすくなります。

成功のための主要機能とベストプラクティス

基本的な知識を習得したところで、自動化テストにPlaywrightを使用する際に、趣味でやっている人とプロとを区別するベストプラクティスについて説明しましょう。

1. ページオブジェクトモデルの使用

テストスイートが大きくなるにつれて、コードを適切に整理しておくことで後で感謝することになります。ページオブジェクトモデル（POM）パターンは、アプリケーションのページまたはセクションを表す再利用可能なコンポーネントを作成するのに役立ちます。テスト全体でロケーター戦略を繰り返す代わりに、ページオブジェクトで一度だけ定義します。

class LoginPage {
  constructor(page) {
    this.page = page;
    this.usernameInput = page.locator('data-testid=username');
    this.passwordInput = page.locator('data-testid=password');
    this.loginButton = page.locator('button:has-text("Login")');
  }
  
  async login(username, password) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

2. 設定機能を活用する

playwright.config.jsファイルは、あなたのコマンドセンターです。デフォルトを受け入れるだけでなく、ニーズに合わせて調整してください。異なる環境（開発、ステージング、本番）ごとに異なるプロジェクトを設定し、リトライ戦略を設定し、レスポンシブテスト用のビューポートサイズを定義します。

3. ロケーター戦略を習得する

Playwrightは要素を見つけるための複数の方法を提供しますが、一部は他よりも信頼性が高いです。優先順位は次のとおりです。

ロールロケーター（page.getByRole('button', { name: 'Submit' })）- 最もアクセスしやすく堅牢
テストID（page.locator('data-testid=submit-button')）- 明確なロールがない要素に最適
テキスト（page.locator('text=Submit')）- ユーザーに表示されるテキストに良い
CSS/XPath - 他に何も機能しない場合の最後の手段として使用

4. CI/CDで早期にテストを実行する

Playwrightは継続的インテグレーション環境で輝きを放ちます。セットアップコマンドは、GitHub Actionsワークフローの作成も提供します。すべてのプルリクエストで自動化テストスイートを実行することで、本番環境に到達する前にリグレッションを捕捉します。これを初日から習慣にしましょう。

5. テストフックを賢く使う

beforeEachとafterEachフックはセットアップとティアダウンに最適ですが、使いすぎないようにしましょう。テストを独立させることが重要です。共有状態は信頼性の高い自動化テストの敵です。各テストは単独で実行できる必要があります。

複雑なシナリオの処理

Playwrightが自動化テストで人気を集めている理由の1つは、現実世界の複雑さをいかにエレガントに処理するかです。

ファイルアップロード：ハックが必要な一部のツールとは異なり、Playwrightはファイルアップロードをファーストクラスの市民として扱います。page.locator('input[type="file"]').setFiles()を使用するだけです。

ネットワークインターセプション：アプリが低速ネットワークやAPI障害をどのように処理するかをテストする必要がありますか？Playwrightを使用すると、ネットワークリクエストをリアルタイムでインターセプトして変更できます。

await page.route('**/api/data', async route => {
  await route.fulfill({
    status: 500,
    body: JSON.stringify({ error: 'Server error' })
  });
});

認証：ログインが必要な機能をテストしていますか？storageStateを使用して、テスト間で認証状態を再利用し、時間を節約し、繰り返しのログイン手順を回避します。

tests with playwright — Playwrightを使用したテスト

よくある質問

Q1: PlaywrightはJavaScript開発者専用ですか？

A: 全くそんなことはありません！PlaywrightはもともとNode.js用に構築されましたが、現在ではPython、Java、.NETの公式言語バインディングがあります。チームは、同じ強力な自動化テスト機能を享受しながら、自社のスタックに最適な言語を選択できます。

Q2: Playwrightは自動化テストにおいてSeleniumと比較してどうですか？

A: Seleniumを信頼できる古い車と考えてください。目的地には着きますが、より多くのメンテナンスが必要で、走行も遅いです。Playwrightは現代の電気自動車で、より速く、より信頼性が高く、今日のWeb向けに構築されています。Playwrightの自動待機メカニズム、より優れたデバッグツール、およびネイティブの並列実行は、大幅な優位性をもたらします。

Q3: 既存のテストをPlaywrightに移行できますか？

A: もちろんです。多くのチームがSelenium、Cypress、その他のツールから正常に移行しています。Playwrightは、アクションを記録してテストコードを生成できるcodegen機能も提供しており、既存のテストシナリオを迅速に再作成するのに役立ちます。

Q4: モバイルテストについてはどうですか？

A: Playwrightはモバイルビューポートエミュレーションとタッチイベントをサポートしており、レスポンシブデザインを効果的にテストできます。ネイティブモバイルアプリのテストには他のツールが必要ですが、モバイルWeb自動化テストにはPlaywrightは優れています。

Q5: 初心者にとって学習曲線はどのくらい急ですか？

A: 驚くほど緩やかです。基本的なプログラミング知識があれば、1日以内にPlaywrightで生産的になれます。APIは直感的で、ドキュメントは優れており、組み込みのテストジェネレーターは例を通して学習するのに役立ちます。

最後に

Playwrightは、自動化テストを強力さを犠牲にすることなく、利用しやすくします。重要なユーザーフローのテストから始め、初日からCI/CDで実行し、徐々に拡張してください。ツールは、シンプルな記録済みスクリプトから洗練されたクロスブラウザスイートまで、あなたと共に成長します。Playwrightを後回しにするのではなく、開発プロセスの一部として扱うチームは、すべてのリリースで自信を得ることができます。学習曲線は緩やかですが、その影響は即座に現れます。1日試してみてください。なぜもっと早く始めなかったのか不思議に思うでしょう。

button