vibetesting - Browser Automation Testing Skill

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

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

Comprehensive Testing

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

Specific Test Type

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

Parameters

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: test@example.com
  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

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

GitHub Actions

- 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

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

Wait Strategies

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

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
   • Lighthouse score

5. Visual Comparison

   • Baseline vs current
   • Visual diff highlight
   • Change detection

6. Security Findings

   • Vulnerabilities
   • Recommendations
   • Risk level

Limitations

• Cannot test payment processing (requires real credentials)
• Limited to visible content (cannot bypass authentication barriers)
• Visual testing depends on rendering consistency
• Performance metrics may vary between runs

Future Enhancements

• Multi-browser support (Firefox, Safari)
• Cloud browser integration (BrowserStack, Sauce Labs)
• AI-powered test generation
• Custom test scripts (JavaScript/Python)
• Test recorder (record interactions)
• Integration with testing frameworks (Playwright, Cypress)
• Parallel test execution
• Distributed testing across nodes

Support

• Issues: Report bugs and feature requests
• Documentation: See OpenClaw docs
• Examples: Check the examples directory

Version

• Current: 1.0.0
• Last Updated: 2026-02-05
• Author: OpenClaw Community

Happy Testing! 🧪🔍✨