PlayWrightとは？
Microsoft で開発およびメンテナンスが行われている
Node.js ベースの E2E テスト自動化フレームワークです。
そもそもE2Eテストって？
テスト手法の１つ
想定されるシナリオをシミュレートして、アプリケーションが期待通りに動くことを確認する。
例）会員登録フォーム
想定されるシナリオ
- Topページを表示
- 会員登録ページを表示
- 会員情報入力
- 有効なメールアドレスとパスワードを入力する
- 無効なメールアドレスとパスワードを入力する
- 登録ボタンクリック
- 登録成功 登録成功メッセージを表示
- 登録失敗 バリデーションメッセージ表示
上記のようなユーザが操作を行うシナリオを想定して意図通りにアプリケーションが動くか確認する手法
インストール
いずれかのコマンドを使ってインストール
npm を使う場合
$ npm init playwright@latest
yarn を使う場合
$ yarn create playwright
pnpm を使う場合
$ pnpm create playwright
以下を聞かれるので自分の環境に合わせて入力（とりあえず全部デフォルトにしました）
- テスト フォルダの名前 (デフォルトはtests)
- GitHub Actionsワークフローを追加する？(yes/no)
- Playwrightブラウザをインストールする？（yes/no）
インストール完了すると以下のフォルダができます
playwright.config.ts
tests/
example.spec.ts
example.spec.tsにサンプルのテストコードが生成されます
// @ts-check
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects page to have a heading with the name of Installation.
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
チュートリアル
以下のコマンドでテストが実行できます
npm を使う場合
$ npx playwright test
yarn を使う場合
$ yarn playwright test
pnpm を使う場合
$ pnpm exec playwright test
テスト結果のレポートを表示することもできます
npm を使う場合
$ npx playwright show-report
yarn を使う場合
$ yarn playwright show-report
pnpm を使う場合
$ pnpm exec playwright show-report
上記コマンドを実行するとブラウザが開きテスト結果のレポートが表示されます
複数ブラウザを一気にテストできるので便利！
サンプルコードを読み解いてみる
has title
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
await page.goto('https://playwright.dev/');
gotoメソッド内で指定したURLに遷移します
await expect(page).toHaveTitle(/Playwright/);
ページのタイトルに「Playwright」って文字が含まれることを確認します
toHaveTitleメソッドの引数は正規表現を指定します
get started link
test("get started link", async ({ page }) => {
await page.goto("https://playwright.dev/");
// Click the get started link.
await page.getByRole("link", { name: "Get started" }).click();
// Expects page to have a heading with the name of Installation.
await expect(
page.getByRole("heading", { name: "Installation" })
).toBeVisible();
});
await page.goto('https://playwright.dev/');
gotoメソッド内で指定したURLに遷移します
await page.getByRole("link", { name: "Get started" }).click();
「Get started」って名前のリンクをページ内で見つけてクリックします
await expect(
page.getByRole("heading", { name: "Installation" })
).toBeVisible();
「Installation」という名前の見出し（h1, h2など）を探して画面に表示されていることを確認する
.toBeVisible();が画面に要素が表示されているかチェックするアサーション
locators
Webページ上の要素（ボタン、テキストフィールド、リンクなど）を特定するための文字列やセレクターのこと。
テスト自動化において、ロケーターはテスト対象の要素を識別し、クリック、入力、取得などの操作を行うために使用される。
playWrightには組み込みで要素を特定できるメソッドが用意されている。
公式で勧められていたのはgetByRole()
await page.getByRole("link", { name: "Get started" }).click();
上記のように、「Get started」って表示されているリンク要素を取得してクリックさせるみたいなことができる
拡張機能
VSCode/Cursorで使える拡張機能が便利
https://playwright.dev/docs/getting-started-vscode
テスト実行
左のチェックボタンクリックで各ケースごとにテスト実行できる
テストの自動生成
画面を操作することでテストの自動生成を行うことも可能
拡張機能を入れると追加されるフラスコマーク＞下のRecord newをクリック
テスト用のファイルが新しく作られブラウザが立ち上がる
※今回だとtest-2.spec.tsってファイルが作られました
画面を操作することで、test-2.spec.tsに操作した内容がコードとして記述されていきます
- 起動したブラウザにURLを指定します。
https://playwright.dev/ - 指定したURLに遷移する処理が自動的に記述されます
3.表示されている文字などをブラウザでクリックするとコードにも反映される
※ハイライトされている箇所をクリックしました。
まとめ
ユーザ操作なしで複数ブラウザのテストができるのはテスト効率を上げられて便利だと感じました
画面を操作するだけでコードをある程度作ってくれるのも嬉しいポイントかなと思います。
どんなテストケースを自動化するかが一番重要だと思うので、自動化しやすいテストケースや、複雑なテストの書き方はもう少し深掘りしていきたいです。
参考
以下のYouTubeが画面付きで解説してくれたので手元で確認しやすかったです