# 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).

- Author: eabait
- Repository: eabait/product-agents
- Version: 20260121150453
- Stars: 2
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/eabait/product-agents
- Web: https://mule.run/skillshub/@@eabait/product-agents~create-product-agent-playwright-tests:20260121150453

---

---
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.