Playwright and axe Accessibility Test Suite
Specify a Playwright suite that fails CI on serious accessibility regressions for the flows that make money or block users. APP Base URL: [URL] Auth pattern: [STORAGE STATE | LOGIN FORM | NONE] Critical flows: [SIGNUP, CHECKOUT, SETTINGS, THE EMPTY STATE — pick from these or replace] Component library: [SHADCN | CUSTOM | OTHER] Known issues we are allowing temporarily: [LIST OR NONE] WCAG target: [2.2 AA] DELIVER 1) Dependency and config notes: @axe-core/playwright, how the test is tagged so it can run separately from the functional suite, and the CI command. 2) A helper that runs axe on a page, fails on serious and critical violations, and prints the rule id, impact, and target selector. Show the TypeScript. 3) Three tests: - a public page at desktop width - the same page at 375px, including a menu that must be opened first so hidden controls are tested in their visible state - an authenticated flow using storageState, with at least one dialog opened before the scan 4) What not to scan: third-party iframes, and how to exclude them without hiding our own bugs. 5) A triage policy: which rules may be disabled, where the disable lives (test vs global), and the expiry comment format. 6) One manual check the scanner cannot do for these flows (focus order in the dialog, or a custom widget) written as a Playwright keyboard test. Do not disable color-contrast globally to get green. If a known issue is in my allow list, scope the exception to that selector.
🌟 Example Output / Preview
Prompt Metadata
Primary Use Cases:
- •Legacy code modernization & technical refactoring
- •Full-stack layout generation & component structuring
- •CI/CD workflow automation & unit/E2E testing suites
Associated Tags:
💡 Pro Tips & Advice
1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.
2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.
🔗 Related AI Prompts
Full SaaS Landing Page Build Spec (SEO + Conversion)
You are a Staff Product Designer + Frontend Engineer + SEO strategist. Build a complete, production-ready marketing landing page f...
SaaS Analytics Dashboard Full Build Spec
You are a Principal Product Designer + Frontend Lead. Design and specify a complete [LIGHT | DARK] analytics dashboard for [PRODUC...
SaaS Admin Panel Dashboard Build Spec
Design a full internal Admin Dashboard for [PRODUCT_NAME] used by [ADMIN_ROLE: support | ops | super-admin]. --- 🎯 CONTEXT Adm...