Show-Buff Demo

Show-Buff is the official Specwright demo app — a TV show watchlist with lists, favourites, and search. It demonstrates OAuth authentication and a multi-phase workflow test.

Live app: specwright-show-buff.vercel.app

What the demo covers

• OAuth auth strategy (Google sign-in bypassed via localStorage injection)
• Multi-phase @ListWorkflow with 3 phases:
  • @0-CreateList — creates a watchlist, saves name as predata
  • @1-AddShows — loads predata, adds TV shows to the list
  • @2-VerifyList — verifies list contents

Instructions config

export default [
  {
    moduleName: '@ListWorkflow',
    category: '@Workflows',
    subModuleName: ['@0-CreateList', '@1-AddShows', '@2-VerifyList'],
    fileName: 'list_workflow',
    pageURL: 'https://specwright-show-buff.vercel.app/lists',
    instructions: [
      '@0-CreateList (precondition @cross-feature-data): Navigate to /lists. Click "Create List". Enter a list name with <gen_test_data>. Save as predata under scope "listworkflow".',
      '@0-CreateList: Attempt to create a list with an empty name — verify validation error.',
      '@1-AddShows (workflow-consumer): Load predata. Open the list. Search for "Breaking Bad" and add it.',
      '@2-VerifyList (workflow-consumer): Load predata. Open the list. Verify "Breaking Bad" appears.',
    ],
    explore: true,
    runGeneratedCases: false,
  },
];

Auth configuration

AUTH_STRATEGY=oauth
TEST_USER_EMAIL=your-google-email@gmail.com
TEST_USER_NAME=Your Name
OAUTH_STORAGE_KEY=specwright-show-user

Running the demo

cd apps/examples/show-buff
# Set credentials in e2e-tests/.env.testing
npx playwright install chromium
# Open in Claude Code:
/e2e-automate

Running the generated tests

npx bddgen && npx playwright test --project setup --project run-workflow --grep "@ListWorkflow"

Test Artifacts

Specwright captures screenshots, traces, and videos for both passing and failing tests automatically — no extra config needed.

Two report types, side by side

pnpm report:bdd        # Cucumber BDD HTML report
pnpm report:playwright # Playwright HTML report with embedded video

Cucumber BDD report — scenario-level pass/fail grouped by module and workflow phase. The Show-Buff report shows @ListWorkflow broken into its three phases in order, with cross-phase predata flow visible in the scenario names.

Playwright HTML report — timeline view per test, with network requests, console logs, and embedded video playback. Click any test to watch the full browser recording.

Module / Workflow report segregation

Each category appears as its own section in both reports. Workflow phases are listed in execution order (@0-CreateList → @1-AddShows → @2-VerifyList), making it easy to trace exactly where a cross-phase failure originates — whether in the precondition that creates data or the consumer that reads it.

This segregation is automatic — it comes from the subModuleName[] array and @cross-feature-data tags in the generated feature files. No report configuration is needed.

Artifacts captured per test run

Viewing traces

Traces capture a full DOM snapshot, network requests, and console output at every step — useful for diagnosing flaky tests or selector regressions.

npx playwright show-trace test-results/{test-name}/trace.zip