Playwright を使ってテストを作成する方法

以下の手順で、Playwright を使ってテストを作成していきます。

内容の要約

1.Playwrightの公式サイトにアクセスします。
2.ページのタイトルが「Playwright」を含んでいることを確認します。
3.「Playwright」というテキストを含む最初の要素がページ上に表示されていることを確認します。

1. Playwrightのインストール

まず、プロジェクトにPlaywrightをインストールします。
以下のコマンドをターミナルで実行してください。

npm install -D @playwright/test

2. Playwrightの初期設定

Playwrightを初期化し、必要なブラウザバイナリをダウンロードします。
以下のコマンドを実行してください。

npx playwright install

3. テストファイルの作成

次にテストファイルを作成します。例えば、tests フォルダー内に example.spec.ts という名前のファイルを作成します。Playwrightはデフォルトで .spec.ts や .test.ts などの拡張子を持つファイルを認識します。

mkdir tests
touch tests/example.spec.ts

2行目のコードについて、PowerShellを使用する場合は、以下のコマンドを実行してください。

New-Item -Path tests\example.spec.ts -ItemType File

4. テストコードの作成

example.spec.ts にシンプルなテストケースを書きます。例えば、以下のようなコードを追加してみましょう。

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

test('should load the Playwright homepage', async ({ page }) => {
  // Playwrightのホームページにアクセスする
  await page.goto('https://playwright.dev');

  // ページタイトルを検証する
  await expect(page).toHaveTitle(/Playwright/);

  // 特定の要素がページに存在するか検証する
  // 最初の要素を選ぶ
  const headers = await page.locator('text=Playwright');
  await expect(headers.nth(0)).toBeVisible(); // 最初の要素を検証
});

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

test と expect をPlaywrightのテストライブラリからインポートしています。test はテストケースを定義するために使用し、expect はアサーション（検証）を行うために使用します。

test('should load the Playwright homepage', async ({ page }) => {

test 関数はテストケースを定義します。ここでは 'should load the Playwright homepage' という名前のテストケースを作成しています。テストの内容は非同期で実行されるため、async 関数として定義されています。

  // Playwrightのホームページにアクセスする
  await page.goto('https://playwright.dev');

page.goto メソッドを使って、指定されたURL（ここでは Playwright の公式サイト）にブラウザが移動します。この操作は非同期であり、await を使って完了するのを待ちます。

  // ページタイトルを検証する
  await expect(page).toHaveTitle(/Playwright/);

expect(page).toHaveTitle(/Playwright/) は、ページのタイトルが「Playwright」というテキストを含むことを検証します。/Playwright/ は正規表現で、タイトルに「Playwright」が含まれていればテストは成功です。

　// 特定の要素がページに存在するか検証する
　// 最初の要素を選ぶ
  const headers = await page.locator('text=Playwright');
  await expect(headers.nth(0)).toBeVisible(); // 最初の要素を検証
});

● page.locator('text=Playwright') は、ページ内の「Playwright」というテキストを含むすべての要素を選択しており、headers.nth(0) は、その中の最初の要素を選択します。
● await expect(headers.nth(0)).toBeVisible(); は、その最初の要素がページ上で表示されていることを検証します。これにより、指定された要素がページに正しく表示されているかを確認できます。

5. テストの実行

以下のコマンドでテストが実行されます。

npx playwright test

Playwrightのテストが実行され、結果がターミナルに表示されます。

6. テストの結果確認

テストが成功した場合、緑色のメッセージが表示され、失敗した場合は赤色のエラーメッセージが表示されます。

以上で、Playwrightを使った基本的なテストケースの作成と実行が完了です。必要に応じて、より複雑なテストケースや設定を追加していってください。