🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Web Qa Bot
πŸ¦€ ClawHub

Web Qa Bot

by @nextfrontierbuilds

AI-powered automated QA for web apps. Smoke tests, accessibility, visual regression. Works with Cursor, Claude, ChatGPT, Copilot. Vibe-coding ready.

Versionv0.1.3
Downloads2,452
Installs1
#legal#automation
TERMINAL
clawhub install web-qa-bot

πŸ“– About This Skill

name: web-qa-bot description: AI-powered automated QA for web apps. Smoke tests, accessibility, visual regression. Works with Cursor, Claude, ChatGPT, Copilot. Vibe-coding ready. version: 0.1.3 author: NextFrontierBuilds keywords: [automated-qa, ai-testing, smoke-test, accessibility-testing, visual-regression, ci-testing, playwright-alternative, e2e-testing, qa, testing, automation, ai, ai-agent, vibe-coding, cursor, claude, chatgpt, copilot, github-copilot, mcp, llm, devtools, ai-tools, developer-tools, typescript, moltbot, openclaw]

web-qa-bot

AI-powered web application QA automation using accessibility-tree based testing.

Overview

This skill provides tools for automated QA testing of web applications. It uses browser accessibility trees for reliable element detection instead of fragile CSS selectors.

Installation

npm install -g web-qa-bot agent-browser
agent-browser install

Commands

Quick Smoke Test

web-qa-bot smoke https://example.com

Runs basic health checks:

  • Page loads successfully
  • No console errors
  • Navigation elements present
  • Images have alt text

    • Run Test Suite

    web-qa-bot run ./tests/suite.yaml --output report.md

    Generate PDF Report

    web-qa-bot report ./results.json -o report.pdf -f pdf

    Use Cases

    1. Quick Site Health Check

    # Smoke test a production URL
web-qa-bot smoke https://app.example.com --checks pageLoad,consoleErrors,navigation

    2. Pre-deployment QA

    Create a test suite and run before each deployment:

    # tests/critical-paths.yaml
name: Critical Paths
baseUrl: https://staging.example.com
    tests:
  - name: Login flow
    steps:
      - goto: /login
      - type: { ref: Email, text: test@example.com }
      - type: { ref: Password, text: testpass }
      - click: Sign In
      - expectVisible: Dashboard
      - expectNoErrors: true


    web-qa-bot run ./tests/critical-paths.yaml --output qa-report.pdf -f pdf

    3. Monitor for Regressions

    # Run tests and fail CI if issues found
web-qa-bot run ./tests/smoke.yaml || exit 1

    4. Programmatic Testing

    import { QABot } from 'web-qa-bot'
    const qa = new QABot({
  baseUrl: 'https://example.com',
  headless: true
})
    await qa.goto('/')
await qa.click('Get Started')
await qa.snapshot()
qa.expectVisible('Sign Up')
await qa.close()

    Integration with agent-browser

    This tool wraps agent-browser CLI for browser automation:

    # Connect to existing browser session
web-qa-bot smoke https://example.com --cdp 18800
    Run headed for debugging
    
web-qa-bot run ./tests/suite.yaml --no-headless

    Test Results Format

    Results are returned as structured JSON:

    {
  "name": "Smoke Test",
  "url": "https://example.com",
  "summary": {
    "total": 4,
    "passed": 3,
    "failed": 0,
    "warnings": 1
  },
  "tests": [
    {
      "name": "Page Load",
      "status": "pass",
      "duration": 1234
    }
  ]
}

    Tips

    1. Use role-based selectors - More reliable than CSS classes 2. Check console errors - Often reveals hidden issues 3. Test both navigation methods - Direct URL and in-app routing 4. Screenshot on failure - Automatic in test suites 5. Monitor for modals - Can block interactions

    Report Formats

  • Markdown - Default, human-readable
  • PDF - Professional reports via ai-pdf-builder
  • JSON - Machine-readable for CI/CD

    • Troubleshooting

    "agent-browser not found"

    npm install -g agent-browser
agent-browser install

    "Element not found"

    Take a snapshot first to see available refs: 
    agent-browser snapshot

    "Timeout waiting for element"

    Increase timeout or check if element is behind a loading state: 
    steps:
  - waitMs: 2000
  - waitFor: "Loading" # Wait for loading to appear
  - waitFor: "Content" # Then wait for content

    Links

  • GitHub
  • npm

    • ⚑ When to Use

    TriggerAction
    ```bash
    # Smoke test a production URL
    web-qa-bot smoke https://app.example.com --checks pageLoad,consoleErrors,navigation
    ```
    ### 2. Pre-deployment QA
    Create a test suite and run before each deployment:
    ```yaml
    # tests/critical-paths.yaml
    name: Critical Paths
    baseUrl: https://staging.example.com
    tests:
    - name: Login flow
    steps:
    - goto: /login
    - type: { ref: Email, text: test@example.com }
    - type: { ref: Password, text: testpass }
    - click: Sign In
    - expectVisible: Dashboard
    - expectNoErrors: true
    ```
    ```bash
    web-qa-bot run ./tests/critical-paths.yaml --output qa-report.pdf -f pdf
    ```
    ### 3. Monitor for Regressions
    ```bash
    # Run tests and fail CI if issues found
    web-qa-bot run ./tests/smoke.yaml || exit 1
    ```
    ### 4. Programmatic Testing
    ```typescript
    import { QABot } from 'web-qa-bot'
    const qa = new QABot({
    baseUrl: 'https://example.com',
    headless: true
    })
    await qa.goto('/')
    await qa.click('Get Started')
    await qa.snapshot()
    qa.expectVisible('Sign Up')
    await qa.close()
    ```

    πŸ“‹ Tips & Best Practices

    1. Use role-based selectors - More reliable than CSS classes 2. Check console errors - Often reveals hidden issues 3. Test both navigation methods - Direct URL and in-app routing 4. Screenshot on failure - Automatic in test suites 5. Monitor for modals - Can block interactions