Agent-Skills.md

Agent Skills: Create Product Agent Playwright Tests

Create or update Playwright end-to-end tests for the Product Agents frontend in this repo, especially for settings validation, conversation artifact visibility, research plan approval/rejection, and clarifying-question flows. Use when asked to write, expand, or run Playwright tests for frontend/product-agent (including live E2E runs gated by E2E_LIVE).

UncategorizedID: eabait/product-agents/create-product-agent-playwright-tests

Repository

eabait/product-agents
eabait
21

Skill Files

Browse the full folder contents for create-product-agent-playwright-tests.

Download Skill

Loading file tree…

skills/create-product-agent-playwright-tests/SKILL.md

Skill Metadata

Name
create-product-agent-playwright-tests
Description
Create or update Playwright end-to-end tests for the Product Agents frontend in this repo, especially for settings validation, conversation artifact visibility, research plan approval/rejection, and clarifying-question flows. Use when asked to write, expand, or run Playwright tests for frontend/product-agent (including live E2E runs gated by E2E_LIVE).

Create Product Agent Playwright Tests

Use this skill to add or modify Playwright tests under frontend/product-agent/tests and to run the E2E suite safely.

Quick start

  • Prefer the existing test patterns in frontend/product-agent/tests/*.spec.ts.
  • Use stable selectors from references/ui-selectors.md.
  • Use scenario briefs from references/test-scenarios.md to translate prompts into assertions.

Workflow

  1. Decide test type

    • Use smoke tests for non-live UI checks (landing page, settings persistence).
    • Use live E2E tests when the scenario depends on the backend or streaming (research plan approval, artifact rendering).

  2. Pick a base pattern

    • For live tests, mirror frontend/product-agent/tests/run-progress.e2e.spec.ts.
    • For smoke tests, mirror frontend/product-agent/tests/app-smoke.spec.ts or frontend/product-agent/tests/conversations.spec.ts.

  3. Implement assertions

    • Use role- or label-based selectors first.
    • Keep assertions UI-facing (visible text, status badges, buttons).
    • For approval flows, assert both the pending state and the response after clicking Approve/Reject.

  4. Guard live tests

    • Gate live tests behind E2E_LIVE=1 and skip if base URL is unreachable.
    • If prompt input is missing, skip with a clear reason (see live test patterns).

  5. Run tests

    • Smoke tests: npm run test -w frontend/product-agent.
    • Live tests: E2E_LIVE=1 npm run test -w frontend/product-agent.
    • Targeted live file: E2E_LIVE=1 npx playwright test tests/run-progress.e2e.spec.ts (run inside frontend/product-agent).

References

  • UI selectors: references/ui-selectors.md
  • Scenario briefs: references/test-scenarios.md

Notes

  • Live tests require a running backend with streaming enabled and valid API keys; follow the skip patterns used in run-progress.e2e.spec.ts.
  • When validating settings persistence, confirm the Settings panel reflects saved values after reopening.
  • For clarifying-question flows, accept either explicit question text or the "Needs Clarification" status badge.