AgentSkillsCN

playwright-validation

借助Playwright浏览器工具与屏幕截图,对UI变更进行有效性验证。当需要在完成前对UI相关改动进行可视化校验时,可选用此技能。

SKILL.md
--- frontmatter
name: playwright-validation
description: Validate UI changes using Playwright browser tools and screenshots. Use this skill when making UI-related changes that need visual verification before completion.

This skill ensures UI changes are properly validated using Playwright MCP browser tools before marking tasks as complete.

Validation Requirements

For ANY UI-related task, you MUST validate changes using Playwright MCP browser tools before considering the task complete.

Validation Steps

  1. Take screenshots to prove the implementation works as expected
  2. Handle authentication if required by injecting the saved auth state from auth.json:
    • Set the Supabase cookie
    • Set the localStorage token before navigating
  3. Iterate on fixes if the validation reveals issues
  4. Continue until confirmed - screenshots must confirm the user's requirements are fully met

Completion Criteria

Do not mark a task as done until visual confirmation via Playwright demonstrates correct behavior.

Best Practices

  • Use Playwright's browser tools for navigation, interaction, and screenshot capture
  • Verify that all interactive elements work as expected
  • Check responsive behavior if applicable
  • Validate error states and edge cases when relevant
  • Document any issues found during validation