/qa-ui

Phase: 3 - Design
Domain: UI
Command: /qa-ui
Prerequisite: qa-plan.md must exist, app must be reachable
Allowed tools: Bash, Read, Write

---

What it does

Explores the live application using a11y-cli's Playwright browser, then generates a YAML interaction script that describes every user flow to be tested. This script is executed by /qa-exec and also used by /qa-a11y as the basis for accessibility scanning.

App must be reachable

If the application URL in dq-qa.config.json is not responding, /qa-ui will wait and report the issue rather than skipping or substituting. Do not bypass this check.

---

How it works

1. Reads qa-plan.md for UI scope - which pages and flows to cover
2. Reads dq-qa.config.json for ui.baseUrl
3. Opens the app in a Playwright browser via a11y-cli
4. Explores each in-scope page and flow, taking screenshots
5. Generates qa-reports/ui/ui-test.yaml - the interaction script

---

Output: ui-test.yaml format

version: 1
baseUrl: https://app.example.com

flows:
  - name: Login flow
    steps:
      - navigate: /login
      - fill:
          selector: '[data-testid="email"]'
          value: test@example.com
      - fill:
          selector: '[data-testid="password"]'
          value: TestPassword123
      - click:
          selector: '[data-testid="submit"]'
      - assert:
          selector: '[data-testid="dashboard"]'
          visible: true

  - name: Password reset flow
    steps:
      - navigate: /login
      - click:
          selector: 'a[href="/reset"]'
      - fill:
          selector: '[data-testid="reset-email"]'
          value: test@example.com
      - click:
          selector: '[data-testid="send-reset"]'
      - assert:
          text: Check your email

---

After UI design

Run /qa-a11y to layer WCAG accessibility checks on top of the same interaction script.