claude-code-viewer/e2e/captureSnapshot/projects.ts

import { resolve } from "node:path";
import { testDevices } from "../testDevices";
import { withPlaywright } from "../utils/withPlaywright";

// Test different states on projects page
const testStates = [
  { name: "default", action: null },
  {
    name: "empty",
    action: async (page) => {
      // Check for empty state (this will capture whatever state exists)
      await page.waitForTimeout(500);
    },
  },
];

for (const state of testStates) {
  for (const { device, name } of testDevices) {
    await withPlaywright(
      async ({ context, cleanUp }) => {
        const page = await context.newPage();
        await page.goto("http://localhost:4000/projects");
        await page.waitForLoadState("networkidle");

        if (state.action) {
          await state.action(page);
        }

        await page.screenshot({
          path: resolve(
            "e2e",
            "snapshots",
            "projects",
            state.name,
            `${name}.png`,
          ),
          fullPage: true,
        });
        await cleanUp();
      },
      {
        contextOptions: {
          ...device,
        },
      },
    );
  }
}