Agent skill

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

View SKILL.md on GitHub Repository
Stars 2
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/eabait/product-agents/tree/main/skills/create-product-agent-playwright-tests

SKILL.md

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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

mattpocock/skills

obsidian-vault

Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.

111,310 9,758
Explore
mattpocock/skills

edit-article

Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.

111,310 9,758
Explore
mattpocock/skills

migrate-to-shoehorn

Migrate test files from `as` type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace `as` in tests, or needs partial test data.

111,310 9,758
Explore
mattpocock/skills

setup-pre-commit

Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.

111,310 9,758
Explore
mattpocock/skills

git-guardrails-claude-code

Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git push/reset in Claude Code.

111,310 9,758
Explore
mattpocock/skills

scaffold-exercises

Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.

111,310 9,758
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results