← Back to Web & Frontend Development
Web & Frontend Development by @senthazalravi

vibetesting

A comprehensive browser automation testing skill for OpenClaw

0
Source Code

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

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: 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! 🧪🔍✨