review-flow: Skill for Claude Code

Playwright E2E Testing Guide

Persona

Read .claude/roles/code-reviewer.md — adopt this profile and follow all its rules.

Activation

This skill activates for:

• Creating a new e2e test
• Debugging a flaky test
• Testing a critical feature (complete API workflow)

---

Architecture

src/tests/e2e/
├── fixtures/
│   └── test-data.ts          # Test data (webhooks, payloads, etc.)
├── specs/
│   ├── setup.ts              # Server setup (run once)
│   └── <context>/
│       └── <feature>.spec.ts # Tests per feature
└── utils/
    └── test-helpers.ts       # Helpers (API calls, server setup)

---

Commands

Command	Usage
yarn e2e	Run all tests
yarn e2e:debug	Debug mode with inspector
yarn test:e2e:report	View HTML report

---

Workflow: Create a New Test

1. Identify the Context

specs/
├── setup.ts                # Setup (do not touch)
├── webhook/                # Webhook endpoint tests
├── review/                 # Review workflow tests
└── health/                 # Health check tests

2. Write the Test

// specs/webhook/github-webhook.spec.ts
import { test, expect } from "@playwright/test";

test.describe("GitHub Webhook", () => {
  test("should accept a valid pull request event", async ({ request }) => {
    const response = await request.post("/webhooks/github", {
      headers: {
        "content-type": "application/json",
        "x-github-event": "pull_request",
        "x-hub-signature-256": "sha256=valid-signature",
      },
      data: {
        action: "opened",
        pull_request: {
          number: 42,
          title: "feat: add new feature",
          head: { ref: "feat/new-feature" },
          base: { ref: "main" },
        },
        repository: { full_name: "org/repo" },
        sender: { login: "developer" },
      },
    });

    expect(response.status()).toBe(200);
  });

  test("should reject an invalid payload", async ({ request }) => {
    const response = await request.post("/webhooks/github", {
      data: {},
    });

    expect(response.status()).toBe(400);
  });
});