AgentSkillsCN

create-product-agent-playwright-tests

在此仓库中为产品代理前端创建或更新 Playwright 端到端测试，尤其关注设置验证、对话工件可见性、研究计划的审批与拒绝，以及澄清问题流程。当被要求编写、扩展或运行前端/产品代理的 Playwright 测试时（包括由 E2E_LIVE 限制的实时端到端测试），请使用本工具。

SKILL.md
--- frontmatter
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.