Playwright の前処理と後処理

メモレベルの記事ですが、ご容赦ください。

Playwright の前処理と後処理

Playwright でテスト実行する際の前処理 (setup) と後処理 (teardown) を実装する方法には、調べた限り以下の4つがある。

• Hooks
• Project Dependencies
• Configure globalSetup and globalTeardown
• Fixture

以下ではそれぞれの特徴を簡単にまとめる。

hooks

• API ドキュメント
  • test.beforeEach()
  • test.beforeAll()
  • test.afterEach()
  • test.afterAll()
• ユースケース
  • 公式ドキュメントのBest Practicesのように、テストケースごとに毎回ログインするなどの操作を行う場合に使用する。
• メモ
  • test.beforeEach と test.afterEach は、テストケースごとに実行される。
  • test.beforeAll と test.afterAll は並列実行時に注意が必要。playwrightのbeforeAll(), beforeEach()について解説が参考になる。

Project Dependencies

• 公式ドキュメント
  • Global setup and teardown の Project Dependencies のセクション
• メモ
  • 全テストケースの実行前/実行後に一度だけ実行できる (Global Setup/Teardown)
• ユースケース
  • 公式ドキュメントのAuthentication のように認証情報を持った Cookie の保存する。

Configure globalSetup and globalTeardown

• 公式ドキュメント
  • Global setup and teardown の Configure globalSetup and globalTeardown のセクション
• メモ
  • playwright.config.ts で globalSetup と globalTeardown のプロパティを設定することで、全テストケースの実行前/実行後に一度だけ実行できる (Global Setup/Teardown)

Fixture

• 公式ドキュメント
  • Fixtures の Execution order のセクションが実行順序の参考になる。
• メモ

  • await use() の前後がそれぞれ前処理と後処理になる。

  • Fixture が test と hooks に呼び出された場合にのみに実行される。

  • Fixture を string[] などとすると test() 内で変数を追加して、後処理でその値を参照することができる。以下実装例。

    import { test, expect } from "@playwright/test";
    
    type MyTestFixture = {
      sample: string[];
    };
    
    test.describe("Teardown with the Fixture", () => {
      test.use({
        sample: async(use) => {
          const sample: string[] = [];
          await use(sample);
          console.log(sample);
          // ["foo", "bar"]
        }
      })
    
      test("push value to the fixture", async ({ sample }) => {
        sample.push("foo");
        sample.push("bar");
      });
    });