# QA Agent Skill

> Automated quality assurance using browser automation.

## Overview

The QA Agent tests web applications by:
- Navigating through user flows
- Comparing UI against designs
- Verifying functionality
- Documenting issues with screenshots

## When to Use

- **UI QA** — After UI screens are built (Stage 1)
- **Logic QA** — After business logic is added (Stage 2)
- **Regression** — After any changes

## QA Process

### 1. Setup
```
1. Get dev URL from progress.yaml
2. Get expected screens from Figma or screenshots
3. Get user stories for expected flows
4. Create test account if needed
```

### 2. UI QA (Stage 1)

Test focus: Visual accuracy and navigation flow

```
For each screen in user flow:
  1. Navigate to screen
  2. Take snapshot
  3. Compare against design (visual check)
  4. Check:
     - Layout matches design
     - All elements present
     - Responsive behavior
     - Navigation works
     - No console errors
  5. Document issues
```

### 3. Logic QA (Stage 2)

Test focus: Functionality and data flow

```
For each user story:
  1. Start from initial state
  2. Perform user actions
  3. Verify expected outcomes:
     - Data persists correctly
     - Validation works
     - Error states handled
     - Success states shown
  4. Test edge cases
  5. Document issues
```

## Browser Testing Commands

### Navigate and Snapshot
```javascript
// Use browser tool
browser.navigate(devUrl)
browser.snapshot()
```

### Form Testing
```javascript
// Fill form fields
browser.act({ kind: "type", ref: "email-input", text: "test@example.com" })
browser.act({ kind: "click", ref: "submit-btn" })
browser.snapshot()  // Verify result
```

### Flow Testing
```javascript
// Walk through multi-step flow
browser.act({ kind: "click", ref: "login-link" })
browser.snapshot()
browser.act({ kind: "fill", fields: [...] })
browser.act({ kind: "click", ref: "submit" })
browser.snapshot()  // Verify redirect
```

## QA Report Format

```yaml
qa_report:
  type: ui | logic
  tested_at: "2026-02-02T18:00:00Z"
  dev_url: "https://myapp.dev.apps.symph.co"
  
  summary:
    screens_tested: 12
    issues_found: 3
    passed: false
  
  screens:
    - name: "Login"
      path: "/login"
      status: pass
      notes: ""
      screenshot: "qa/login.png"
    
    - name: "Dashboard"
      path: "/dashboard"
      status: fail
      issues:
        - "Sidebar missing collapse button"
        - "Chart not rendering"
      screenshot: "qa/dashboard.png"
  
  issues:
    - id: 1
      severity: medium
      screen: "Dashboard"
      description: "Sidebar missing collapse button"
      expected: "Collapsible sidebar per design"
      actual: "No collapse control"
      screenshot: "qa/issue-1.png"
```

## QA Checklist

### Visual (UI Stage)
- [ ] Layout matches Figma/screenshots
- [ ] Colors match design system
- [ ] Typography consistent
- [ ] Spacing/padding correct
- [ ] Icons present and correct
- [ ] Images loading
- [ ] Responsive on mobile viewport
- [ ] No horizontal scroll
- [ ] Loading states present

### Functional (Logic Stage)
- [ ] Forms submit correctly
- [ ] Validation messages show
- [ ] Error states handled
- [ ] Success feedback shown
- [ ] Navigation works
- [ ] Auth flow complete
- [ ] Data persists
- [ ] Logout works
- [ ] Protected routes redirect

### Console & Network
- [ ] No console errors
- [ ] No failed network requests
- [ ] API responses valid
- [ ] No CORS issues

## Integration with Build Phase

1. Build Agent completes UI → triggers QA Agent
2. QA Agent runs UI tests
3. Results written to progress.yaml
4. If issues found → Build Agent fixes
5. If passed → Request human review

## Output Location

```
agency/products/<product>/build/
├── progress.yaml          # Updated with QA results
├── qa/
│   ├── ui-report.yaml     # UI QA report
│   ├── logic-report.yaml  # Logic QA report
│   └── screenshots/       # Evidence screenshots
```
