vibetesting

What this skill does

# vibetesting - Browser Automation Testing Skill

A comprehensive browser automation testing skill for OpenClaw that performs functional, UI, accessibility, performance, and visual regression testing.

## Overview

This skill enables OpenClaw to spin up a browser and perform comprehensive testing on web applications. It supports multiple testing types and provides detailed reports.

## Capabilities

### 🧪 Testing Types

1. **Functional Testing**
   - Form validation
   - Button interactions
   - Link navigation
   - API interactions
   - Data entry and validation

2. **UI Testing**
   - Element visibility
   - Responsive design checks
   - Layout verification
   - Color contrast checks
   - Typography verification

3. **Accessibility Testing**
   - WCAG 2.1 compliance checks
   - ARIA label verification
   - Keyboard navigation
   - Screen reader compatibility
   - Alt text validation

4. **Performance Testing**
   - Page load times
   - Resource timing
   - Lighthouse metrics
   - Core Web Vitals (LCP, FID, CLS)
   - JavaScript execution time

5. **Visual Regression Testing**
   - Screenshot comparison
   - Layout shift detection
   - Visual diff generation
   - Threshold-based validation

6. **Security Testing**
   - HTTPS verification
   - Content Security Policy checks
   - XSS vulnerability scanning
   - Form security validation

7. **End-to-End Testing**
   - User journey testing
   - Checkout flow validation
   - Authentication flows
   - Multi-step form testing

## Usage

### Basic Testing

```markdown
[VibeTesting]
Target URL: https://example.com
Testing Type: functional
```

### Comprehensive Testing

```markdown
[VibeTesting]
Target URL: https://myapp.com
Testing Type: comprehensive
Include: functional, accessibility, performance
Report Format: html
```

### Specific Test Type

```markdown
[VibeTesting]
Target URL: https://example.com
Testing Type: accessibility
WCAG Level: AA
```

## Parameters

| Parameter | Required | Description | Default |
|-----------|----------|-------------|---------|
| `target_url` | Yes | URL to test | - |
| `testing_type` | No | Type of testing | `comprehensive` |
| `include` | No | Test categories to run | All |
| `exclude` | No | Test categories to skip | None |
| `report_format` | No | Output format | `html` |
| `viewport` | No | Browser viewport size | `1920x1080` |
| `headless` | No | Run without browser UI | `true` |
| `timeout` | No | Test timeout (seconds) | `60` |
| `wait_for_network` | No | Wait for network idle | `true` |
| `cookies` | No | Cookies to set | `{}` |
| `auth` | No | Basic auth credentials | `null` |
| `wcag_level` | No | WCAG compliance level | `AA` |
| `performance_threshold` | No | Max load time (ms) | `3000` |
| `screenshot_baseline` | No | Baseline screenshot for comparison | `null` |
| `visual_threshold` | No | Visual diff threshold (0-1) | `0.01` |

## Testing Types

### quick
Fast smoke tests (5-10 seconds)
- Basic page load
- Main elements present
- No JavaScript errors

### functional
Full functional testing (30-60 seconds)
- Form testing
- Button interactions
- Navigation flows
- API validation

### comprehensive
Complete testing suite (2-5 minutes)
- All functional tests
- Accessibility audit
- Performance metrics
- Visual regression
- Security checks

### accessibility
Dedicated accessibility testing (1-2 minutes)
- WCAG compliance
- ARIA labels
- Keyboard navigation
- Screen reader text

### performance
Performance-focused testing (30-60 seconds)
- Page load time
- Core Web Vitals
- Resource timing
- Lighthouse score

### visual
Visual regression testing (1-2 minutes)
- Full-page screenshot
- Layout comparison
- Visual diff generation

### security
Security-focused testing (30-60 seconds)
- HTTPS check
- CSP validation
- Basic vulnerability scan

### e2e
End-to-end user journeys (varies)
- Multi-step flows
- Authentication
- Checkout processes
- User scenarios

## Examples

### Test a Simple Page

```
[VibeTesting]
target_url: https://example.com
testing_type: quick
```

### Run Full Accessibility Audit

```
[VibeTesting]
target_url: https://myapp.com
testing_type: accessibility
wcag_level: AA
report_format: detailed
```

### Performance Testing with Custom Viewport

```
[VibeTesting]
target_url: https://myapp.com
testing_type: performance
viewport: 390x844
performance_threshold: 2000
headless: true
```

### Visual Regression Testing

```
[VibeTesting]
target_url: https://myapp.com
testing_type: visual
screenshot_baseline: baseline.png
visual_threshold: 0.05
```

### E2E Checkout Flow Testing

```
[VibeTesting]
target_url: https://myshop.com
testing_type: e2e
steps:
  - add_item_to_cart
  - proceed_to_checkout
  - fill_shipping
  - fill_payment
  - complete_order
auth:
  user: [email protected]
  pass: testpass123
```

### Custom Test with Specific Elements

```
[VibeTesting]
target_url: https://myapp.com
testing_type: functional
elements:
  validate:
    - selector: "#login-form"
      fields: ["email", "password"]
    - selector: "#submit-btn"
      action: click
  expect:
    - selector: ".success-message"
      visible: true
```

## Output

### Console Output
Real-time test progress and results

### HTML Report
Detailed interactive report with:
- Test summary
- Pass/fail breakdown
- Performance metrics
- Accessibility score
- Visual diffs (if applicable)
- Screenshots
- Recommendations

### JSON Export
Machine-readable results for CI/CD integration

## Integration

### CI/CD Pipeline

```yaml
- name: Browser Testing
  uses: openclaw/vibetesting
  with:
    target_url: https://staging.example.com
    testing_type: comprehensive
    report_format: json
```

### GitHub Actions

```yaml
- name: VibeTesting
  run: |
    npx vibetesting \
      --url ${{ env.URL }} \
      --type comprehensive \
      --output results/
```

## Best Practices

1. **Test Environment**
   - Use staging/development URLs for testing
   - Avoid testing production without permission
   - Set up test accounts if needed

2. **Performance**
   - Use headless mode for CI/CD
   - Set appropriate timeouts
   - Don't overload target servers

3. **Security**
   - Never commit credentials
   - Use environment variables
   - Validate SSL certificates

4. **Visual Testing**
   - Establish baseline screenshots
   - Update baselines after design changes
   - Set appropriate thresholds

5. **Accessibility**
   - Test with real screen readers
   - Check keyboard navigation
   - Verify color contrast ratios

## Troubleshooting

### Browser Won't Start
- Ensure Chrome/Chromium is installed
- Check port availability
- Verify no conflicting processes

### Elements Not Found
- Check if page fully loaded
- Verify selectors are correct
- Wait for dynamic content

### Timeout Errors
- Increase timeout setting
- Check network connectivity
- Verify server responsiveness

### Memory Issues
- Run in headless mode
- Close other browser instances
- Increase system resources

## Requirements

- **Browser**: Chrome/Chromium (recommended)
- **OpenClaw**: Gateway running with browser support
- **Network**: Internet access for testing external URLs
- **Permissions**: No special system permissions needed

## Advanced Configuration

### Custom Viewports

```yaml
viewports:
  desktop: 1920x1080
  tablet: 768x1024
  mobile: 390x844
```

### Wait Strategies

```yaml
wait:
  network: idle  # Wait for network to be idle
  dom: stable   # Wait for DOM to be stable
  selector: "#loaded"  # Wait for specific element
  timeout: 30
```

### Retry Configuration

```yaml
retry:
  attempts: 3
  delay: 1000  # ms
  selectors:
    - ".loading-spinner"
    - "#async-content"
```

## Reporting

### Report Sections

1. **Executive Summary**
   - Overall score
   - Test statistics
   - Critical issues

2. **Functional Results**
   - Test cases
   - Pass/fail details
   - Error messages

3. **Accessibility Report**
   - WCAG compliance
   - Issues by severity
   - Recommendations

4. **Performance Metrics**
   - Load time breakdown
   - Core Web Vitals