qa-interaction_skill

Overview

This skill is a QA Interaction Agent that plans user-interaction test strategies and writes Playwright end-to-end tests from UX/UI specifications. It generates detailed user-flow scenarios, edge-case matrices, and executable Playwright test suites to validate navigation, forms, state transitions, responsiveness, and accessibility. The agent also defines where artifacts live and how to run tests and reports.

How this skill works

It inspects UX/UI specs and user flows to produce test-plan documents and scenario templates, then translates scenarios into Playwright test files that exercise clicks, hovers, drags, form inputs, navigation, and keyboard interactions. The agent includes accessibility checks (keyboard navigation, ARIA attributes, WCAG validations), responsive viewport tests, and state-transition assertions. It outputs runnable Playwright code, test commands, and locations for reports, screenshots, and artifacts.

When to use it

• When you need E2E coverage driven by UX/UI specifications
• When validating complex user flows and state transitions
• When enforcing accessibility and keyboard navigation requirements
• When adding automated regression tests for forms and navigation
• When preparing cross-browser and responsive design verification

Best practices

• Start from clear UX/UI specs and defined user flows before writing tests
• Use data-testid attributes to make selectors resilient and readable
• Separate test plans (docs) from executable test files (e2e/) for traceability
• Include edge-case and network-failure scenarios in each flow
• Run accessibility checks and keyboard navigation tests in CI
• Keep tests deterministic: mock external services or seed test data

Example use cases

• Generate an interaction test plan for a profile editing flow and create Playwright specs that verify edit/save behaviors and success toasts
• Write registration form tests that assert validation messages, password strength indicators, and successful redirect on submit
• Implement cart state tests: add/remove items, update counts, and verify loading states during checkout
• Create responsive tests that assert mobile hamburger menu behavior and desktop navigation visibility
• Add accessibility tests that validate ARIA labels, tab order, and screen-reader compatible roles