PlayWright+MonoRepoはどうするのがよいのだろう

monorepoとE2E

コンポーネントを共有するようなWebアプリケーションmonorepoがあるとして、これらはどのようにするのが良いのか悩んでいる(現在進行形)

こういうのにしてみたけど

monorepo/
├── common # コンポーネントなど、projectsが呼び出す共通のデータが格納されているディレクトリ
├── e2e # テストが入ったディレクトリ
└── projects # プロジェクトのモノレポ
    ├── hogehoge # hogehogeプロジェクト
    └── piypiyo # piyopiyoプロジェクト

hogehogeとpiyopiyoは似通ったシステムであり共通しているデータもあるが、それぞれ独自の機能も存在している。E2Eテストを書く場合はプロジェクトごとに書く必要がある。なお、すべてnode.js、またはtypescriptで記述されている。

e2eディレクトリには共通するテストを書き、それらは関数にて呼び出すようにする。

// e2e/toppage.test.ts
import { test, expect, Page } from "@playwright/test";
export const toppageTest = (specData: any) => {
  test("トップページテスト1", async ({ page }) => {
    await page.goto("/");
    // ...
  } );
}

projectはこれをimportして実行する。また、projectごとに行いたいテストはe2eディレクトリのnode_modules内のplaywrightをimportし、テストケースを記述する。

// projects/hogehoge/e2e/toppage.test.ts
import { toppageTest } from "../../../e2e/toppage.test;
import { test, expect, Page } from "../../../e2e/node_modules/@playwright/test";

const specData = {}; // hogehogeっぽいデータ

toppageTest(specData); // 共通のテスト

test("hogehogeプロジェクトのトップページ特有のテスト", async ({ page }) => {
  // hogehogeプロジェクトのトップページ特有のテスト
});

これらはtypescriptで記述してあるので、tsconfig.jsonのpathsで設定を変えてあげた。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@e2e": ["../../../e2e/*"],
    },
  }
}

とりあえずこういう形になった。

// projects/hogehoge/e2e/toppage.test.ts
import { toppageTest } from "@e2e/toppage.test;
import { test, expect, Page } from "@e2e/node_modules/@playwright/test";

const specData = {}; // hogehogeっぽいデータ

toppageTest(specData); // 共通のテスト

test("hogehogeプロジェクトのトップページ特有のテスト", async ({ page }) => {
  // hogehogeプロジェクトのトップページ特有のテスト
});

なんかやりかたに進展があったらまた書いてみます。