はじめに
Playwrightを使ったE2Eテストの実装を試してみました。
今回はログイン機能を対象に、
テスト設計からテストコードの実装、CIの構築まで一通りの流れをまとめています。
この記事では以下の内容を紹介します。
- テストシナリオ / テストケースの作成（テスト設計）
- Playwrightのプロジェクト構成
- Page Object Modelを使ったテスト実装
- GitHub ActionsでのCI実行
使用技術
- Playwright
- TypeScript
- Node.js
- GitHub Actions
テスト対象
今回のテスト対象は以下のサイトです。
Playwrightのサンプルとしてよく使用されるECサイトで、
ログイン機能のテストを実装しました。
テスト設計
今回のテストでは、実装前にテストシナリオとテストケースを作成しました。
TS-LOGIN-01 Valid Login
TS-LOGIN-02 Invalid Login
TS-LOGIN-03 Locked User
TS-LOGIN-04 Empty Username
TS-LOGIN-05 Empty Password
TS-LOGIN-06 Empty Both Fields
テストケースはtest-designディレクトリで管理しています。
test-design
├ login-test-scenarios.md
└ login-test-cases.md
テスト設計を先に行うことで以下のメリットがあります。
- テストの抜け漏れを防ぐ
- 実装するテストコードを整理できる
- テストケースとコードの対応関係が明確になる
プロジェクト構成
今回作成したプロジェクトの構成は以下の通りです。
playwright-e2e-demo
│
├ tests
│ └ login.spec.ts
│
├ pages
│ └ LoginPage.ts
│
├ test-data
│ └ users.ts
│
├ test-design
│ ├ login-test-scenarios.md
│ └ login-test-cases.md
│
├ .github
│ └ workflows
│ └ playwright.yml
│
├ playwright.config.ts
└ README.md
説明
- tests：Playwrightのテストコードを配置するディレクトリ
- pages：Page Object Model（POM）を実装したページクラス
- test-data：テストで使用するユーザー情報などのテストデータ
- test-design：テストシナリオやテストケースなどのテスト設計ドキュメント
Page Object Model
Playwrightでは Page Object Model（POM）を使用して、
UI操作とテストロジックを分離することができます。
これにより以下のメリットがあります。
- UI操作を再利用できる
- テストコードがシンプルになる
- メンテナンスしやすくなる
例えばログイン処理をLoginPageクラスとして定義します。
export class LoginPage {
async login(username: string, password: string) {
await this.usernameInput.fill(username);
await this.passwordInput.fill(password);
await this.loginButton.click();
}
}
このようにログイン処理をメソッドとしてまとめることで、
テストコード側ではシンプルに呼び出すことができます。
テストコード
テストコードでは、先ほど作成したLoginPageクラスを利用して
ログイン処理を実行します。
test('Valid login', async ({ page }) => {
const loginPage = new LoginPage(page)
await loginPage.goto()
await loginPage.login('standard_user', 'secret_sauce')
await expect(page).toHaveURL(/inventory/)
})
このテストでは以下を確認しています。
- ログインページを開く
- 有効なユーザー情報でログインする
- ログイン後に
inventoryページへ遷移することを確認する
CI（GitHub Actions）
GitHub Actionsを使用してテストを自動実行するようにしました。
以下のタイミングでテストが実行されます。
- mainブランチへのpush
- Pull Request作成
GitHub
今回作成したリポジトリはこちらです。
PlaywrightによるE2Eテストのサンプルとして、
テスト設計・POM構成・CIまで含めてまとめています。
まとめ
Playwrightを使用してログイン機能のE2Eテストを作成しました。
テスト設計 → テスト実装 → CI まで一通りの流れを構築することで、
Playwrightを使ったE2Eテストの基本的な流れを整理することができました。
今後、他の機能のテストも追加していきたいと思います。