Code & Dev Compatible: claude

Playwright and axe Accessibility Test Suite

Complexity Level: Beginner
Prompt Code Block

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

### Generated Component Preview: ```typescript // Fully validated modern structure import { z } from 'zod'; export const RequestSchema = z.object({ id: z.string().uuid(), createdAt: z.date().default(() => new Date()), data: z.record(z.string(), z.any()) }); export type ValidatedRequest = z.infer<typeof RequestSchema>; ```

Prompt Metadata

DifficultyBeginner
Compatibilityclaude

Primary Use Cases:

  • •Legacy code modernization & technical refactoring
  • •Full-stack layout generation & component structuring
  • •CI/CD workflow automation & unit/E2E testing suites

Associated Tags:

#playwright #accessibility #a11y #testing

💡 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

Code & Dev
★ Featured

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

Compatible:claudeDiff:Advanced
#landing-page #saas #seo #nextjs #tailwind
Code & Dev
★ Featured 🔥 Trending

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

Compatible:claudeDiff:Intermediate
#dashboard #saas #ui #tailwind #seo
Code & Dev

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

Compatible:claudeDiff:Intermediate
#admin #dashboard #saas #crud #tailwind