[COMPLETED] Web Testing Infrastructure - Visual, Links, Forms, Console Errors with Auto-Fix #62

Open
opened 2026-04-07 05:48:08 +00:00 by NW · 0 comments
Owner

? Implementation Complete

Automated web application testing suite is now available.

Created Files

File Purpose
docker-compose.web-testing.yml Docker config for Playwright MCP
tests/run-all-tests.js Main test runner
tests/scripts/compare-screenshots.js Visual regression testing
tests/scripts/link-checker.js Broken link detection
tests/scripts/console-error-monitor.js Console error capture
tests/package.json Dependencies (pixelmatch, pngjs)
tests/README.md Documentation (RU)
web-test.sh Quick start script
.kilo/skills/web-testing/SKILL.md Skill documentation
.kilo/commands/web-test.md /web-test command
.kilo/commands/web-test-fix.md /web-test-fix command

Features

? Visual Regression Testing

  • Screenshots at mobile/tablet/desktop viewports
  • Pixelmatch comparison with configurable threshold
  • Diff images generation
  • HTML report with visual comparison

? Link Checking

  • Crawl all linked pages
  • Detect 404/500 errors
  • Report broken links with context

? Form Testing

  • Fill and submit forms
  • Validate responses
  • Test empty and invalid fields

? Console Error Detection

  • Capture console.error and network failures
  • Parse stack traces
  • Auto-create Gitea Issues

? Auto-Fix Pipeline

  • /web-test-fix triggers @the-fixer
  • Auto-implement fixes
  • Verify with tests
  • Create PRs

Usage

Kilo Code Commands

Next Steps

  • Add baseline screenshots for your app
  • Configure AUTO_CREATE_ISSUES=true for production
  • Set up GITEA_TOKEN for auto-fix
  • Integrate with CI/CD pipeline
## ? Implementation Complete Automated web application testing suite is now available. ### Created Files | File | Purpose | |------|---------| | docker-compose.web-testing.yml | Docker config for Playwright MCP | | tests/run-all-tests.js | Main test runner | | tests/scripts/compare-screenshots.js | Visual regression testing | | tests/scripts/link-checker.js | Broken link detection | | tests/scripts/console-error-monitor.js | Console error capture | | tests/package.json | Dependencies (pixelmatch, pngjs) | | tests/README.md | Documentation (RU) | | web-test.sh | Quick start script | | .kilo/skills/web-testing/SKILL.md | Skill documentation | | .kilo/commands/web-test.md | /web-test command | | .kilo/commands/web-test-fix.md | /web-test-fix command | ### Features ? Visual Regression Testing - Screenshots at mobile/tablet/desktop viewports - Pixelmatch comparison with configurable threshold - Diff images generation - HTML report with visual comparison ? Link Checking - Crawl all linked pages - Detect 404/500 errors - Report broken links with context ? Form Testing - Fill and submit forms - Validate responses - Test empty and invalid fields ? Console Error Detection - Capture console.error and network failures - Parse stack traces - Auto-create Gitea Issues ? Auto-Fix Pipeline - /web-test-fix triggers @the-fixer - Auto-implement fixes - Verify with tests - Create PRs ### Usage ### Kilo Code Commands ### Next Steps - [ ] Add baseline screenshots for your app - [ ] Configure AUTO_CREATE_ISSUES=true for production - [ ] Set up GITEA_TOKEN for auto-fix - [ ] Integrate with CI/CD pipeline
Sign in to join this conversation.