Playwrightで始めるWebテストの世界

Playwrightとは？

Playwrightは、Webアプリケーションのテストと自動化を行うための強力なオープンソースフレームワークです。Chromium、Firefox、WebKitといった主要なブラウザをサポートし、高速で信頼性の高いエンドツーエンドテストを可能にします。自動待機やテスト分離機能が充実している点が大きな特徴です。

---

VS Codeを使ったPlaywrightのセットアップ方法

1. Node.jsのインストール: まず、Playwrightを実行するためにNode.jsが必要です。公式サイトからLTS版をダウンロードしてインストールしてください。

2. VS Codeの拡張機能のインストール: VS Codeを開き、拡張機能ビュー（Ctrl+Shift+X）でPlaywright Test for VSCodeを検索し、インストールします。

3. プロジェクトの初期化: 新しいプロジェクトフォルダを作成し、VS Codeで開きます。ターミナル（Ctrl+Shift+@）で以下のコマンドを実行します。

   npm init playwright@latest
   

   このコマンドを実行すると、いくつかの質問に答えるプロンプトが表示されます。

   • Do you want to use TypeScript or JavaScript?: テストコードの言語を選択します。信頼性の高いTypeScriptがおすすめです。
   • Where to put your end-to-end tests?: テストコードを保存するフォルダ名を指定します。デフォルトのtestsで問題ありません。
   • Add a GitHub Actions workflow?: GitHubでテストを自動実行する設定ファイルを作成するかどうかを尋ねています。GitHubを利用する場合はyを選択します。
   • Install Playwright's browsers?: 主要なブラウザをインストールするかを尋ねています。テストを実行するために必ずyを選択してください。

---

簡単なPlaywrightの記録方法（Codegen）

Playwrightには、ブラウザの操作を自動で記録するCodegenという便利な機能があります。

1. Codegenの起動: VS Codeのターミナルで以下のコマンドを実行します。

   npx playwright codegen
   

2. 操作の記録: コマンドを実行すると、ブラウザウィンドウとPlaywright Inspectorという2つのウィンドウが開きます。InspectorにURLを入力し、ブラウザでテストしたい操作（例：リンクのクリック、テキストの入力）を実行します。操作はリアルタイムでコードとしてInspectorに記録されます。

3. コードの保存: 記録されたコードをコピーし、テストファイル（例：tests/example.spec.ts）に貼り付けます。

   import { test, expect } from '@playwright/test';
   
   test('example test', async ({ page }) => {
     await page.goto('https://playwright.dev/');
     await page.getByRole('link', { name: 'Get started' }).click();
     await expect(page).toHaveTitle(/Playwright/);
   });
   

4. テストの実行: VS Codeのテストランナーから実行するか、以下のコマンドをターミナルで実行します。

   npx playwright test
   

   テストが成功すると、結果が成功と表示されます。Codegenはテストのひな形を素早く作るのに役立ちます。複雑なテストには、手動でコードを編集してロジックやアサーションを追加しましょう。