Playwrightで実際のDBを用いてテストを並列実行し高速化する

1
import type { User } from "next-auth";
2

3
export const user1: User = {
4
  id: "id1",
5
  name: "user1",
6
  email: "[email protected]",
7
  image:
8
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAMElEQVR42u3OMQEAAAQAMDrpp4Zuyojh2RIsa7bjUQoICAgICAgICAgICAgICHwHDhv0ROEuXMGUAAAAAElFTkSuQmCC",
9
  role: "USER",
10
};

1
import { defineConfig, devices } from "@playwright/test";
2

3
export default defineConfig({
4
  testDir: "./e2e",
5
  fullyParallel: true, // 並列実行させる
6
  projects: [
7
    {
8
      name: "setup",
9
      testMatch: /.\/e2e\/setup\/.*.ts/,
10
    },
11
    {
12
      name: "chrome",
13
      use: {
14
        ...devices["Desktop Chrome"],
15
      },
16
      dependencies: ["setup"], // setupの後に実行
17
    },
18
  ],
19
});

1
import type { BrowserContext, TestType } from "@playwright/test";
2
import type { User } from "next-auth";
3
import type { JWT } from "next-auth/jwt";
4

5
export async function createUserAuthState(context: BrowserContext, jwt: JWT) {
6
  // Next.jsのNextAuthで使用されるCookieを手動で設定
7
  // 実際のログインプロセスを省略し、認証済み状態を直接作成
8
  await context.addCookies([
9
    {
10
      name: "next-auth.session-token",
11
      value: btoa(
12
        JSON.stringify({
13
          ...jwt,
14
          sub: jwt.user.id,
15
        }),
16
      ),
17
      domain: "localhost",
18
      path: "/",
19
      httpOnly: true,
20
      sameSite: "Lax",
21
      expires: Math.round((Date.now() + 60 * 60 * 24 * 1000 * 7) / 1000),
22
    },
23
  ]);
24

25
  // ブラウザの認証状態をファイルに保存し、各テストでこのファイルを読み込むことにより認証済み状態を復元
26
  await context.storageState({
27
    path: getStorageStatePath(jwt.user.id ?? ""),
28
  });
29
}

1
import { test as setup } from "@playwright/test";
2
import { user1 } from "../dummyUsers";
3
import { createUserAuthState } from "../helpers/users";
4

5
setup("Create user1 auth", async ({ context }) => {
6
  await createUserAuthState(context, {
7
    user: user1,
8
  });
9
});

1
services:
2
  db:
3
    image: postgres:17
4
    ports:
5
      - "${DATABASE_PORT:-5432}:5432" # 動的ポート対応のため、上書きできるようにしておく
6
    environment:
7
      POSTGRES_DB: testdb
8
      POSTGRES_USER: testuser
9
      POSTGRES_PASSWORD: testpass

1
import { exec } from "node:child_process";
2
import { promisify } from "node:util";
3
import { DockerComposeEnvironment, Wait } from "testcontainers";
4
import { Prisma, PrismaClient } from "../src/app/__generated__/prisma";
5
import { createDBUrl } from "../src/app/_utils/db";
6

7
const execAsync = promisify(exec);
8

9
export async function setupDB({ port }: { port: "random" | number }) {
10
  const container = await new DockerComposeEnvironment(".", "compose.yml")
11
    .withEnvironmentFile(".env.test") // テスト専用の環境変数ファイル
12
    .withEnvironment({
13
      // 0を指定することでOSが自動的に空きポートを割り当て
14
      DATABASE_PORT: port === "random" ? "0" : `${port}`,
15
    })
16
    .withWaitStrategy("db", Wait.forListeningPorts())
17
    .up(["db"]);
18

19
  const dbContainer = container.getContainer("db-1");
20
  const mappedPort = dbContainer.getMappedPort(5432);
21
  const url = createDBUrl({
22
    host: dbContainer.getHost(),
23
    port: mappedPort,
24
  });
25

26
  // migrate
27
  await execAsync(`DATABASE_URL=${url} npx prisma db push`);
28

29
  const prisma = new PrismaClient({ datasources: { db: { url } } });
30

31
  async function down() {
32
    await prisma.$disconnect();
33
    await container.down();
34
  }
35

36
  return {
37
    url,
38
    container,
39
    port: mappedPort,
40
    prisma,
41
    down,
42
    async [Symbol.asyncDispose]() {
43
      await down();
44
    },
45
  } as const;
46
}

1
import { exec } from "node:child_process";
2
import { getRandomPort } from "./getRandomPort";
3
import { waitForHealth } from "./waitForHealth";
4

5
export async function setupApp(dbPort: number) {
6
  const appPort = await getRandomPort();
7
  const baseURL = `http://localhost:${appPort}`;
8
  const cp = exec(
9
    `NEXTAUTH_URL=${baseURL} DATABASE_PORT=${dbPort} pnpm start --port ${appPort}`,
10
  );
11
  await waitForHealth(baseURL);
12

13
  return {
14
    appPort,
15
    baseURL,
16
    async [Symbol.asyncDispose]() {
17
      if (cp.pid) {
18
        process.kill(cp.pid);
19
      }
20
    },
21
  } as const;
22
}

1
import { createServer } from "node:http";
2

3
export async function getRandomPort() {
4
  return new Promise<number>((resolve) => {
5
    const server = createServer();
6

7
    server.listen(0, () => {
8
      const address = server.address();
9
      const port = address && typeof address === "object" ? address.port : null;
10

11
      if (port) {
12
        server.close();
13
        resolve(port);
14
      }
15
    });
16
  });
17
}

1
import { setTimeout } from "node:timers/promises";
2

3
export async function waitForHealth(baseUrl: string) {
4
  const maxAttempts = 30;
5
  const interval = 100;
6
  const healthUrl = `${baseUrl}/api/health`;
7
  let attempts = 0;
8

9
  while (attempts < maxAttempts) {
10
    try {
11
      const response = await fetch(healthUrl);
12

13
      if (response.ok) {
14
        const data = await response.json();
15

16
        if (data.status === "ok") {
17
          return;
18
        }
19
      }
20
    } catch {}
21

22
    attempts++;
23
    await setTimeout(interval);
24
  }
25

26
  throw new Error(`Server health check failed after ${maxAttempts} attempts`);
27
}

1
import { test as base } from "@playwright/test";
2
import type { User } from "next-auth";
3
import { setupDB } from "../tests/db.setup";
4
import { setupApp } from "./helpers/app";
5
import { generatePrismaClient } from "./helpers/prisma";
6

7
export type TestFixtures = {};
8

9
export type WorkerFixtures = {
10
  setup: Awaited<{
11
    prisma: Awaited<ReturnType<typeof setupDB>>["prisma"];
12
    appPort: number;
13
    baseURL: string;
14
    dbURL: string;
15
  }>;
16
};
17

18
export const test = base.extend<TestFixtures, WorkerFixtures>({
19
  setup: [
20
    async ({ browser }, use) => {
21
      await using dbSetup = await setupDB({ port: "random" });
22
      await using appSetup = await setupApp(dbSetup.port);
23
      const baseURL = appSetup.baseURL;
24
      const originalNewContext = browser.newContext.bind(browser);
25

26
      // 新しいbaseURLを含んだコンテキストを新たに作成
27
      browser.newContext = async () => {
28
        return originalNewContext({ baseURL });
29
      };
30

31
      await use({
32
        prisma: dbSetup.prisma,
33
        appPort: appSetup.appPort,
34
        baseURL,
35
        dbURL: dbSetup.url,
36
      });
37
    },
38
    {
39
      scope: "worker",
40
      auto: true,
41
    },
42
  ],
43
});

1
import { PrismaClient } from "../../src/app/__generated__/prisma";
2

3
export async function generatePrismaClient(url: string) {
4
  const prisma = new PrismaClient({
5
    datasources: {
6
      db: {
7
        url,
8
      },
9
    },
10
  });
11

12
  return {
13
    prisma,
14
    async [Symbol.asyncDispose]() {
15
      await prisma.$disconnect();
16
    },
17
  } as const;
18
}

1
import { test as base } from "@playwright/test";
2
import type { User } from "next-auth";
3
import { setupDB } from "../tests/db.setup";
4
import { setupApp } from "./helpers/app";
5
import { generatePrismaClient } from "./helpers/prisma";
6
import { registerUserToDB } from "./helpers/users";
7

8
export type TestFixtures = {
9
  storageState: string;
10
  registerToDB: (user: User) => Promise<void>;
11
  reset: () => Promise<void>;
12
};
13

14
export type WorkerFixtures = {
6 collapsed lines
15
  setup: Awaited<{
16
    prisma: Awaited<ReturnType<typeof setupDB>>["prisma"];
17
    appPort: number;
18
    baseURL: string;
19
    dbURL: string;
20
  }>;
21
};
22

23
export const test = base.extend<TestFixtures, WorkerFixtures>({
24
  setup: [
24 collapsed lines
25
    async ({ browser }, use) => {
26
      await using dbSetup = await setupDB({ port: "random" });
27
      await using appSetup = await setupApp(dbSetup.port);
28
      const baseURL = appSetup.baseURL;
29
      const originalNewContext = browser.newContext.bind(browser);
30

31
      // 新しいbaseURLを含んだコンテキストを新たに作成
32
      browser.newContext = async () => {
33
        return originalNewContext({
34
          baseURL,
35
        });
36
      };
37

38
      await use({
39
        prisma: dbSetup.prisma,
40
        appPort: appSetup.appPort,
41
        baseURL,
42
        dbURL: dbSetup.url,
43
      });
44
    },
45
    {
46
      scope: "worker",
47
      auto: true,
48
    },
49
  ],
50
  registerToDB: async ({ reset, setup }, use) => {
51
    await use(async (user: User) => {
52
      await registerUserToDB(user, setup.dbURL);
53
    });
54
    await reset();
55
  },
56
  reset: ({ context, setup }, use) => {
57
    use(async () => {
58
      await using db = await generatePrismaClient(setup.dbURL);
59
      await Promise.all([truncate(db.prisma), context.clearCookies()]);
60
    });
61
  },
62
});

1
import type { BrowserContext, TestType } from "@playwright/test";
2
import type { User } from "next-auth";
3
import type { JWT } from "next-auth/jwt";
4
import type { TestFixtures, WorkerFixtures } from "../fixtures";
5
import { generatePrismaClient } from "./prisma";
6

7
export async function registerUserToDB(user: User, dbUrl: string) {
8
  await using db = await generatePrismaClient(dbUrl);
9
  await db.prisma.user.create({
10
    data: {
11
      ...user,
12
      accounts: {
13
        create: {
14
          type: "oauth",
15
          provider: "google",
16
          providerAccountId: `${Math.random()}`,
17
          id_token: "id_token",
18
          access_token: "access_token",
19
          token_type: "Bearer",
20
          scope: "scope",
21
        },
22
      },
23
    },
24
  });
25
}
26

27
export async function createUserAuthState(context: BrowserContext, jwt: JWT) {
20 collapsed lines
28
  await context.addCookies([
29
    {
30
      name: "authjs.session-token",
31
      value: btoa(
32
        JSON.stringify({
33
          ...jwt,
34
          // google provider attaches `sub` to the token
35
          sub: jwt.user.id,
36
        }),
37
      ),
38
      domain: "localhost",
39
      path: "/",
40
      httpOnly: true,
41
      sameSite: "Lax",
42
      expires: Math.round((Date.now() + 60 * 60 * 24 * 1000 * 7) / 1000),
43
    },
44
  ]);
45
  await context.storageState({
46
    path: getStorageStatePath(jwt.user.id ?? ""),
47
  });
48
}
49

50
export async function useUser<T extends TestType<TestFixtures, WorkerFixtures>>(
51
  test: T,
52
  user: User,
53
) {
54
  test.use({ storageState: getStorageStatePath(user.id) });
55
  // 毎テストごとにDBにもuserの情報を登録しておく
56
  test.beforeEach(async ({ registerToDB: registerToDB }) => {
57
    await registerToDB(user);
58
  });
59
}
60

61
function getStorageStatePath(id: string) {
62
  return `e2e/.auth/${id}.json`;
63
}

1
import { user1 } from "../dummyUsers";
2
import { test } from "../fixtures";
3
import { useUser } from "../helpers/users";
4

5
test.describe("no sign in", () => {
6
  test("should redirect to signIn page", async ({ topPage, signInPage }) => {
7
    await topPage.goTo();
8
    await signInPage.expectUI();
9
  });
10
});
11

12
test.describe("sign in", () => {
13
  useUser(test, user1);
14

15
  test("should show my name", async ({ topPage }) => {
16
    await topPage.goTo();
17
    await topPage.expectUI("signIn", user1);
18
  });
19
});

1
import { expect, type Locator, type Page } from "@playwright/test";
2
import type { User } from "next-auth";
3
import { Base } from "./Base";
4

5
export class TopPage extends Base {
6
  textUserStatusLabelLocator: Locator;
7

8
  constructor(page: Page) {
9
    super(page);
10

11
    this.textUserStatusLabelLocator = this.page.locator(
12
      '[aria-label="User status"]',
13
    );
14
  }
15

16
  async goTo() {
17
    return await this.page.goto("/");
18
  }
19

20
  async expectUI(state: "signIn" | "signOut", user?: User) {
21
    if (state === "signIn") {
22
      await expect(this.textUserStatusLabelLocator).toContainText(
23
        `you are signed in as ${user?.name} 😄`,
24
      );
25
    }
26

27
    if (state === "signOut") {
28
      await expect(this.textUserStatusLabelLocator).toContainText(
29
        "you are not signed in 🥲",
30
      );
31
    }
32
  }
33
}

1
import { test as base } from "@playwright/test";
2
import type { User } from "next-auth";
3
import { setupDB, truncate } from "../tests/db.setup";
4
import { setupApp } from "./helpers/app";
5
import { generatePrismaClient } from "./helpers/prisma";
6
import { registerUserToDB } from "./helpers/users";
7
import { TopPage } from "./models/TopPage";
8

9
export type TestFixtures = {
10
  topPage: TopPage;
4 collapsed lines
11
  storageState: string;
12
  registerToDB: (user: User) => Promise<void>;
13
  reset: () => Promise<void>;
14
  a11y: () => AxeBuilder;
15
};
16

17
export type WorkerFixtures = {
6 collapsed lines
18
  setup: Awaited<{
19
    prisma: Awaited<ReturnType<typeof setupDB>>["prisma"];
20
    appPort: number;
21
    baseURL: string;
22
    dbURL: string;
23
  }>;
24
};
25

26
export const test = base.extend<TestFixtures, WorkerFixtures>({
27
  topPage: ({ page }, use) => {
28
    use(new TopPage(page));
29
  },
30
  setup: [
24 collapsed lines
31
    async ({ browser }, use) => {
32
      await using dbSetup = await setupDB({ port: "random" });
33
      await using appSetup = await setupApp(dbSetup.port);
34
      const baseURL = appSetup.baseURL;
35
      const originalNewContext = browser.newContext.bind(browser);
36

37
      // 新しいbaseURLを含んだコンテキストを新たに作成
38
      browser.newContext = async () => {
39
        return originalNewContext({
40
          baseURL,
41
        });
42
      };
43

44
      await use({
45
        prisma: dbSetup.prisma,
46
        appPort: appSetup.appPort,
47
        baseURL,
48
        dbURL: dbSetup.url,
49
      });
50
    },
51
    {
52
      scope: "worker",
53
      auto: true,
54
    },
55
  ],
56
  registerToDB: async ({ reset, setup }, use) => {
4 collapsed lines
57
    await use(async (user: User) => {
58
      await registerUserToDB(user, setup.dbURL);
59
    });
60
    await reset();
61
  },
62
  reset: ({ context, setup }, use) => {
4 collapsed lines
63
    use(async () => {
64
      await using db = await generatePrismaClient(setup.dbURL);
65
      await Promise.all([truncate(db.prisma), context.clearCookies()]);
66
    });
67
  },
68
});