UniqueSoft/APAW
2
0
Fork 0
Code Issues 31 Pull Requests Actions Packages Projects Releases Wiki Activity

[Web Testing] Automated visual regression, link checking, form testing, and console error auto-fix #60

New Issue
Open
opened 2026-04-06 23:51:49 +00:00 by NW · 0 comments
NW commented 2026-04-06 23:51:49 +00:00
Owner
Copy Link

User Story

As a developer building web applications, I need automated testing that detects visual regressions (overlapping elements, broken fonts, wrong colors), checks all links and forms, captures console errors, and auto-fixes them � so that I catch UI bugs before they reach production.

Acceptance Criteria

1. Visual Regression Testing

  • Take screenshots of all pages at 3 viewports (mobile 375px, tablet 768px, desktop 1280px)
  • Compare with baseline using pixelmatch
  • Detect: overlapping elements, font shifts, color mismatches, missing backgrounds
  • Generate diff images (baseline/current/diff)
  • HTML report with visual comparison

2. Link Checking

  • Crawl all pages and find all tags
  • Click each link and check for 404/500 errors
  • Report broken links with page URL and link text

3. Form Testing

  • Find all elements on each page
  • Fill all input fields with valid test data
  • Submit and verify response (success/error handling)
  • Test empty field validation
  • Test invalid data (SQL injection, XSS payloads)

4. Console Error Detection

  • Capture all console.error() and console.warn()
  • Capture uncaught exceptions
  • Capture network errors (failed XHR/fetch)
  • Report: error message, file, line number, stack trace

5. Auto-Fix Pipeline

  • Console errors create Gitea Issues automatically
  • @the-fixer agent analyzes error and proposes fix
  • @lead-developer implements the fix
  • Tests re-run to verify fix
  • PR created with fix

Architecture

Docker (no host pollution)

Kilo Code Integration

Tool Purpose
HTTP requests to Playwright MCP
Run docker-compose, pixelmatch
Delegate to @visual-tester, @the-fixer

Test Flow

Files to Create

    • Playwright MCP container
    • Testing skill documentation
    • /web-test command
    • /web-test-fix command (with auto-fix)
    • Baseline screenshots directory
    • Current screenshots
    • Diff images
    • HTML reports
    • Visual comparison script
    • Link validation script
    • Form testing script

Expected Output

Visual Regression Report

Console Error Report

Link Check Report

Milestone

Phase 0: Infrastructure - Docker Compose for MCP servers #54

## User Story As a developer building web applications, I need automated testing that detects visual regressions (overlapping elements, broken fonts, wrong colors), checks all links and forms, captures console errors, and auto-fixes them � so that I catch UI bugs before they reach production. ## Acceptance Criteria ### 1. Visual Regression Testing - [ ] Take screenshots of all pages at 3 viewports (mobile 375px, tablet 768px, desktop 1280px) - [ ] Compare with baseline using pixelmatch - [ ] Detect: overlapping elements, font shifts, color mismatches, missing backgrounds - [ ] Generate diff images (baseline/current/diff) - [ ] HTML report with visual comparison ### 2. Link Checking - [ ] Crawl all pages and find all <a> tags - [ ] Click each link and check for 404/500 errors - [ ] Report broken links with page URL and link text ### 3. Form Testing - [ ] Find all <form> elements on each page - [ ] Fill all input fields with valid test data - [ ] Submit and verify response (success/error handling) - [ ] Test empty field validation - [ ] Test invalid data (SQL injection, XSS payloads) ### 4. Console Error Detection - [ ] Capture all console.error() and console.warn() - [ ] Capture uncaught exceptions - [ ] Capture network errors (failed XHR/fetch) - [ ] Report: error message, file, line number, stack trace ### 5. Auto-Fix Pipeline - [ ] Console errors create Gitea Issues automatically - [ ] @the-fixer agent analyzes error and proposes fix - [ ] @lead-developer implements the fix - [ ] Tests re-run to verify fix - [ ] PR created with fix ## Architecture ### Docker (no host pollution) ### Kilo Code Integration | Tool | Purpose | |------|---------| | | HTTP requests to Playwright MCP | | | Run docker-compose, pixelmatch | | | Delegate to @visual-tester, @the-fixer | ### Test Flow ## Files to Create - - Playwright MCP container - - Testing skill documentation - - /web-test command - - /web-test-fix command (with auto-fix) - - Baseline screenshots directory - - Current screenshots - - Diff images - - HTML reports - - Visual comparison script - - Link validation script - - Form testing script ## Expected Output ### Visual Regression Report ### Console Error Report ### Link Check Report ## Milestone Phase 0: Infrastructure - Docker Compose for MCP servers #54
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
priority::critical
Critical priority
 priority::high
High priority
 priority::low
Low priority
 priority::medium
Medium priority
 size::l
Large (4-8 hours)
 size::m
Medium (2-4 hours)
 size::s
Small (1-2 hours)
 size::xl
Extra large (>8 hours)
 size::xs
Extra small (<1 hour)
 status::blocked
Blocked
 status::cancelled
Cancelled
 status::done
Completed
 status::in-progress
Work in progress
 status::new
New issue, not started
 status::planned
Planned for sprint
 status::review
Under review
 status::testing
In testing
 type::bug
Something is broken
 type::chore
Maintenance task
 type::documentation
Documentation
 type::enhancement
Improvement
 type::feature
New feature
 type::refactor
Code refactoring
 type::test
Testing
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
NW olilovedani
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: UniqueSoft/APAW#60
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?