E2Eの自動テストは、とにかくコードを書きまくる必要があります。
一挙手一投足を全てコードを書いて操作する必要があるので、なかなかはじめの一歩が踏み出せない人もいるかもしれません。
そんな人は、まずは「骨格テンプレート」を使ってみると良いでしょう。
なぜ「骨格テンプレート」を先に作るのか？
毎回テストを書くときに 構造・命名・共通コードの整理で脳が疲れます。（これホント）
テスト方針やフォルダ構成がブレて チームや未来の自分が困ることも多分にあります。
Playwright は柔軟すぎるため 書き方がバラバラになりやすいんですよね。
そこで最初に「骨格」を作っておくと、書くときの思考を減らしてもらえるという利点があります。
コードが統一されて読みやすい上、規模が大きくなるほどメリットが膨らむんです。
コピペで素早くテストが増やせる（自動テストの量産が可能）なのもポイントですよね。
テストを“組み立てるための型”を
最初に作るのが超効率的だと思います。
標準型
最もミニマルなテンプレートです。
import { test, expect } from "@playwright/test";
test.describe("機能名（例：ログイン機能）", () => {
test.beforeEach(async ({ page }) => {
// 前準備：ログインや初期化など
});
test("シナリオ名（例：正常ログイン）", async ({ page }) => {
// 手順
// 検証
});
test("別シナリオ（例：パスワード誤り）", async ({ page }) => {
// 手順
// 検証
});
});
正常系テスト型
使用頻度は超高いテンプレートです。
import { test, expect } from "@playwright/test";
test.describe("◯◯ページ：正常系", () => {
test("表示される", async ({ page }) => {
await page.goto("/target");
await expect(page.getByRole("heading", { name: "◯◯" })).toBeVisible();
});
test("フォーム送信が成功する", async ({ page }) => {
await page.goto("/target");
await page.getByLabel("名前").fill("テスト");
await page.getByRole("button", { name: "送信" }).click();
await expect(page.getByText("登録しました")).toBeVisible();
});
});
異常系テスト型
こちらも、使用頻度は高めです。
test.describe("◯◯ページ：バリデーション", () => {
test("未入力でエラーが出る", async ({ page }) => {
await page.goto("/target");
await page.getByRole("button", { name: "送信" }).click();
await expect(page.getByText("名前は必須です")).toBeVisible();
});
});
ログイン前の共通処理テンプレ
入力フォームの内容を少し変えると、利用幅は多くなります。
test.beforeEach(async ({ page }) => {
await page.goto("/login");
await page.getByLabel("メール").fill("user@example.com");
await page.getByLabel("パスワード").fill("password");
await page.getByRole("button", { name: "ログイン" }).click();
});
ページオブジェクト構造のテンプレ
ページ単位でクラスを作る構造。
テスト側のクラス
import { test, expect } from "@playwright/test";
import { LoginPage } from "./pages/LoginPage";
test("ログインの成功", async ({ page }) => {
const login = new LoginPage(page);
await login.goto();
await login.login("user@example.com", "password");
await expect(page.getByText("ダッシュボード")).toBeVisible();
});
ページ側のクラス
export class LoginPage {
constructor(private page) {}
goto() {
return this.page.goto("/login");
}
async login(email, pass) {
await this.page.getByLabel("メール").fill(email);
await this.page.getByLabel("パスワード").fill(pass);
await this.page.getByRole("button", { name: "ログイン" }).click();
}
}
テスト骨格テンプレート化のポイント
1. 固定構造
「describe → beforeEach → test」構造は固定で設置しておくと良いでしょう。
2. 正常系 / 異常系のテンプレを分離
一緒にしておくと、結果のエラー数が混ざってわかりにくくなります。
3. 共通処理
（ログインなど）は beforeEach に統一すると良いでしょう。
4. Selector処理ではなくLocator
getByRole など壊れにくい Locator をテンプレに含むことで依存回避できます。
5. ページオブジェクト
page object の雛形を作っておくと拡張しやすいでしょう。
6. コピペで作れる
テストの増産が容易になるということは、テスト業務の効率がが測れて、本来の開発業務に集中しやすくなります。
初めの一歩が大事
最初のルールがテスト全体の品質を決めるため、しっかりとルール構築も忘れずに行いましょう。
あとがき
GUIのPlaywrightと今回紹介した、骨格テンプレートを使えば、かなり手軽にテストコードを作成することができるはずです。
Playwrightを使ったE2Eテストは、ローカルPCでも実行してテストすることができるので、開発段階だけでなく、本番デプロイ直後に実行したり、
バッチ処理として、定期的にサイト監視をする、定期テストチェックとして利用することもできます。
もはやこうしたテストを実施していないこと自体が、不安に駆られてしまう心境になれば、「やらなければいけない」から、「自然にやる」になるかもですね。
0 件のコメント:
コメントを投稿