以下の手順で、Playwright を使ってテストを作成していきます。
※使用言語はReactです。
内容の要約
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のテストが実行され、結果がターミナルに表示されるので確認してみましょう。
テストが成功した場合、緑色のメッセージが表示され、失敗した場合は赤色のエラーメッセージが表示されます。
以上で、Playwrightを使った基本的なテストケースの作成と実行が完了です。必要に応じて、より複雑なテストケースや設定を追加していってください。