PlaywrightでE2Eテストを自動化してみた（カート機能編）

はじめに

前回の記事では、Playwrightを使用してログイン機能のE2Eテストを実装しました。

今回は続編として、ECサイトのカート機能のテストをPlaywrightで実装してみました。

この記事では以下の内容を紹介します。

• カート機能のテスト設計
• Page Object Modelを使ったテスト実装
• fixturesを使ったログイン処理の共通化

テスト対象

ログイン機能に引き続き、今回も以下のサイトでカート機能のテストを実装しました。

カート機能のテスト設計

まずカート機能についてテストシナリオを整理しました。

TS-CART-01 Add Item to Cart（商品をカートに追加できる）
TS-CART-02 Remove Item from Cart（カートから商品を削除できる）
TS-CART-03 Add Multiple Items to Cart（複数商品をカートに追加できる）
TS-CART-04 Cart persists after reload（ページリロード後もカート内容が保持される）

特にTS-CART-04は、ブラウザをリロードしてもカート内の状態が保持されることを確認するテストで、個人的にはカート機能の信頼性をチェックする上で重要なシナリオだと思い追加しました。

テストケースはtest-designディレクトリで管理しています。

test-design
├ cart-test-scenarios.md
└ cart-test-cases.md

Page Object Model

UI操作はPage Object Modelを使用してテストコードから分離しています。

export class InventoryPage {

  async addItemToCart(itemName: string) {
    await this.page.locator(`#add-to-cart-${itemName}`).click();
  }

}

テストコード

テストコードでは、ログイン済み状態のfixtureを利用してカート機能のテストを実行します。

test('TC-CART-01 Add item to cart', async ({ loggedInPage }) => {

  const inventoryPage = new InventoryPage(loggedInPage)

  await inventoryPage.addItemToCart('sauce-labs-backpack')
});

fixturesでログイン共通化

複数のテストでログイン処理を繰り返さないように、Playwrightのfixturesを使用してログイン処理を共通化しました。

export const test = base.extend<LoggedInFixtures>({

  loggedInPage: async ({ page }, use) => {

    const loginPage = new LoginPage(page);

    await loginPage.goto();

    await loginPage.login(
      users.standardUser.username,
      users.standardUser.password
    );

    await use(page);
  }
});

GitHub

今回作成したカート機能のテストコードは、ログイン機能のE2Eテストとあわせて以下のリポジトリに公開しています。
https://github.com/yuribow/playwright-e2e-demo

まとめ

今回はカート機能をPlaywrightでE2Eテストを実装しました。

ポイントは以下の通りです。

• テストシナリオとケースを整理し、ページリロード後もカートが保持される状態を確認
• Page Object ModelでUI操作を分離して、テストコードをシンプルに
• ログイン処理をfixturesで共通化し、複数テストで再利用

ログイン状態やカート内状態など、テストの前提条件や状態管理が重要になる機能を対象にしたため、テスト設計の考え方も可視化できました。