npm install
npm run build

{
  "mcpServers": {
    "playwright-a11y": {
      "command": "node",
      "args": ["/absolute/path/to/playwright-axe-mcp/dist/server.js"]
    }
  }
}

{
  "mcpServers": {
    "playwright-a11y": {
      "command": "node",
      "args": ["/absolute/path/to/playwright-axe-mcp/dist/server.js"]
    }
  }
}

Use comprehensive-a11y-test prompt:
- url: https://example.com
- block: Rewards account
- steps: open menu, select provider, input value, click apply

{
  url: string;              // Required: URL to scan
  selector?: string;        // Optional: CSS selector to scan specific element
  waitForSelector?: string; // Optional: Wait for this element before scanning
  captureScreenshot?: boolean; // Optional: Capture screenshot (default: false)
  timeout?: number;         // Optional: Navigation timeout in ms (default: 30000)
}

{
  "url": "https://example.com",
  "selector": "header nav",
  "captureScreenshot": true
}

{
  url: string;              // Required: URL to navigate to
  containerText: string;    // Required: Visible text to find section (e.g., "Rewards")
  autoDiscover?: boolean;   // Optional: Auto-discover interactions (default: true)
  customInteractions?: Array<{
    stateName: string;      // Name for this interaction
    elementText: string;    // Visible text of element to interact with
    action: "click" | "hover" | "focus";
    waitAfter?: number;     // Wait time in ms (default: 500)
  }>;
  captureScreenshots?: boolean; // Optional: Screenshot each state
  timeout?: number;         // Optional: Navigation timeout in ms
}

{
  "url": "https://example.com",
  "containerText": "User Menu",
  "autoDiscover": true,
  "captureScreenshots": true
}

{
  "url": "https://example.com",
  "containerText": "Rewards",
  "customInteractions": [
    {
      "stateName": "After opening menu",
      "elementText": "View Details",
      "action": "click"
    }
  ]
}

{
  "url": "https://example.com",
  "timestamp": "2025-01-28T...",
  "summary": {
    "violations": 3,
    "passes": 12,
    "incomplete": 1
  },
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "Elements must have sufficient color contrast",
      "help": "Ensure contrast ratio is at least 4.5:1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.4/color-contrast",
      "tags": ["wcag2aa", "wcag21aa"],
      "nodes": [
        {
          "html": "<button class=\"btn\">Submit</button>",
          "target": [".btn"],
          "failureSummary": "..."
        }
      ]
    }
  ],
  "screenshotPath": "/path/to/screenshot.png"
}

{
  "url": "https://example.com",
  "containerText": "Rewards",
  "totalStates": 3,
  "states": [
    {
      "stateName": "Initial State",
      "summary": {"violations": 0, "passes": 5, "incomplete": 0},
      "violations": []
    },
    {
      "stateName": "After interacting with buttons: \"View Details\"",
      "action": "click",
      "elementText": "View Details",
      "summary": {"violations": 2, "passes": 8, "incomplete": 1},
      "violations": [...]
    }
  ]
}

server/
├── constants/          # Configuration and constants
│   ├── config.ts      # Application configuration
│   ├── selectors.ts   # Interactive element selectors
│   └── wcag-tags.ts   # WCAG compliance tags
├── types/             # TypeScript type definitions
│   └── scan-result.ts # Scan result interfaces
├── utils/             # Utility functions
│   ├── axe-scanner.ts      # Axe configuration and scanning
│   ├── browser.ts          # Browser management
│   ├── container-finder.ts # Find elements by text
│   └── screenshot.ts       # Screenshot utilities
├── tools/             # Tool implementations
│   ├── scan-url.ts                   # URL scanning tool
│   └── scan-interactive-by-text.ts   # Interactive testing tool
├── prompts/           # Prompt templates
│   └── comprehensive-a11y-test.ts    # Predefined test prompt
└── server.ts          # Main MCP server entry point

User: "Check accessibility of https://example.com"
Claude: → Calls a11y_scanUrl
        → Returns: 3 violations (2 serious, 1 moderate)

User: "Test the Navigation menu on https://example.com"
Claude: → Calls a11y_scanInteractiveByText with containerText="Navigation"
        → Auto-discovers all interactive elements
        → Returns: Issues found in different states

User: "Test the Rewards section - click 'View Details' then 'Redeem'"
Claude: → Parses your request
        → Calls a11y_scanInteractiveByText with custom interactions
        → Returns: Accessibility analysis for each state

# Build TypeScript
npm run build

# Watch mode for development
npm run watch

# Start server directly (for testing)
npm start

npm run build
# Check config path is absolute
# Restart MCP client

{"timeout": 60000}  // Increase to 60 seconds