e2e-testing

When to Use

Browser-level verification of user flows: smoke, forms, login/dashboard, visual regression. Quick Mode = fast smoke; Full Mode = CI pipelines, assertions, screenshots.

Quick Mode (e2e-test.js CLI)

.\scripts\e2e-test.ps1 -Url "http://localhost:3000" -Actions "click:#login"
.\scripts\e2e-test.ps1 -Url "http://localhost:3000" -Actions "fill:#email=test,fill:#pass=test,click:#submit"
# or: node scripts/e2e-test.js --url http://localhost:3000 --actions "click:#login" --analyze

Actions: click:#sel · fill:#sel=value · type · select · wait:#sel/wait:1000 · screenshot:name.png.

Full Mode (Playwright Test Runner)

Structure: tests/e2e/login.spec.js, dashboard.spec.js.

const { test, expect } = require('@playwright/test');
test('login flow', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.fill('#email', 'test');
  await page.click('#submit');
  await expect(page).toHaveURL(/dashboard/);
});

Run: npx playwright test · single file · --ui · show-report.

When to Use Which

Scenario	Mode	Why
Quick smoke test	Simple	Fast, no setup
Form validation	Simple	Interactive actions
CI/CD pipeline	Full	Assertions, reporting
Visual regression	Full	Screenshot comparisons

Requirements

Playwright: npm i -D playwright · Chromium: npx playwright install chromium · Ollama (optional): AI analysis.

Reference

Worked examples, testing patterns, edge cases, anti-patterns → docs/skills/e2e-testing/reference.md

Anti-Rationalization

Rationalization	Red Flag	Verification
"Playwright para smoke que e2e-test.js cubre"	Full Playwright para smoke simple	Quick Mode e2e-test.ps1 para smoke; Full solo assertions/visual
"Flows sin assertions"	goto/click sin expect	Cada flow con expect(page).toHaveURL / toHaveScreenshot / assertions
"E2E sin viewport ni reporte"	Solo chromium desktop sin CI report	Multi-viewport + show-report + Chromium install verify

Red Flags

• Doing work without checking output format → STOP, re-read skill
• Second occurrence of same rationalization → force RED zone

Verification

• Output matches skill ## Output contract + file:line citaton
• cross-ref-check.ps1 → SKILL.md OK

Refs

Cross-Refs: testing-strategy | api-testing