Playwright の POM を Storybook 上で確認してから E2E テストを書く

src/
├─ components/
│  ├─ Product.tsx
│  └─ Product.stories.tsx
├─ e2e/
│  ├─ product.page.ts
│  └─ product.page.spec.ts
├─ features/
│  ├─ product.feature.md
│  └─ product.steps.ts
├─ playwright.config.ts
├─ cucumber.config.js
└─ package.json

// src/components/Product.tsx
type Props = {
  product: {
    name: string;
    description?: string;
    features: { id: number; title: string }[];
  };
  onDelete?: () => void;
};
 
export function Product({ product, onDelete }: Props) {
  return (
    <div>
      <h1>プロダクトの管理</h1>
 
      <section>
        <h2>{product.name}</h2>
        {product.description && <p>{product.description}</p>}
      </section>
 
      <ul>
        {product.features.length === 0 ? (
          <li>リクエストはまだありません</li>
        ) : (
          product.features.map((feature) => (
            <li key={feature.id}>{feature.title}</li>
          ))
        )}
      </ul>
 
      <button onClick={onDelete}>
        プロダクトを削除
      </button>
    </div>
  );
}

// src/components/Product.stories.tsx
import type { Meta, StoryObj } from "@storybook/nextjs-vite";
import { Product } from "./Product";
 
const meta = {
  title: "Feature/Product",
  component: Product,
  args: {
    product: {
      id: 1,
      name: "サンプルプロダクト",
      description: "ユーザーからの要望を集めるプロダクトです。",
      features: [
        { id: 1, title: "プロフィール画像アップロード" },
        { id: 2, title: "管理画面のフィルタ機能" },
      ],
    },
    onDelete: async () => {
      console.log("delete product");
    },
  },
} satisfies Meta<typeof Product>;
 
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

// src/e2e/product.page.ts
import { expect, type Page } from "@playwright/test";
 
export class ProductPage {
  constructor(private page: Page) {}
 
  async goto(url: string) {
    await this.page.goto(url, { waitUntil: "networkidle" });
  }
 
  async expectVisible() {
    await expect(
      this.page.getByRole("heading", { name: "プロダクトの管理" }),
    ).toBeVisible();
  }
 
  async deleteProduct() {
    await this.page.getByRole("button", { name: "プロダクトを削除" }).click();
    await this.page.waitForLoadState("networkidle");
  }
}

// src/e2e/product.page.spec.ts
import { test } from "@playwright/test";
import { ProductPage } from "./product.page";
 
test("product page (storybook)", async ({ page }) => {
  const productPage = new ProductPage(page);
 
  await productPage.goto(
    "/iframe.html?id=feature-product--default",
  );
 
  await productPage.expectVisible();
});

{
  "scripts": {
    "storybook:e2e": "STORYBOOK_PORT=6000 playwright test"
  },
  "devDependencies": {
    "@playwright/test": "~1.57.0",
    "playwright": "~1.57.0",
    "@storybook/nextjs-vite": "^10.1.10"
  }
}

// playwright.config.ts
import { defineConfig } from "@playwright/test";
 
const port = Number(process.env.STORYBOOK_PORT ?? 6000);
 
export default defineConfig({
  testDir: "./src/e2e",
  use: {
    baseURL: `http://localhost:${port}`,
    viewport: { width: 1280, height: 720 },
  },
  webServer: {
    command: `storybook dev -p ${port}`,
    port,
    reuseExistingServer: true,
    timeout: 120_000,
  },
});

シナリオ: プロダクト管理画面を表示できる
  前提 管理画面が起動している
  もし プロダクト管理画面を開く
  ならば プロダクト管理画面が表示される

// src/features/product.steps.ts
import { Given, When, Then } from "@cucumber/cucumber";
import { ProductPage } from "../e2e/product.page";
 
let productPage: ProductPage;
 
Given("管理画面が起動している", async function () {
  // Testcontainers で adminUrl, page が用意済み
  productPage = new ProductPage(this.page);
});
 
When("プロダクト管理画面を開く", async function () {
  await productPage.goto(
    `${this.adminUrl}/products/${this.productId}`,
  );
});
 
Then("プロダクト管理画面が表示される", async function () {
  await productPage.expectVisible();
});