Build a TYPO3 v13 extension: “Frontend QA – Visual Diff”. Backend module accepts two base URLs and a sitemap or manual list. A Scheduler task crawls pages, renders screenshots (before/after) per viewport using Imagick, computes pixel diff with toleranc...

[Copilot]

TYPO3 v13 Extension: Frontend QA – Visual Diff

Building a complete TYPO3 v13 extension for visual regression testing with the following features:

Implementation Plan

• Create extension structure and configuration files
  • ext_emconf.php (extension metadata)
  • composer.json (dependencies and autoloading)
  • Configuration/TCA for database tables
  • Configuration/Services.yaml for dependency injection
• Create database schema (ext_tables.sql)
  • visual_diff_comparison table
  • visual_diff_result table
• Implement Domain Model
  • Comparison model (stores base URLs, sitemap, configuration)
  • Result model (stores screenshot paths, diff data, status)
  • Repositories for database operations
• Create Backend Module
  • Module configuration
  • Controller for CRUD operations
  • Fluid templates for UI (list, create, detail views)
• Implement Scheduler Task
  • Task class for crawling and screenshot comparison
  • Screenshot rendering with Imagick
  • Pixel diff computation with tolerance
  • Save results to typo3temp/visual-diff/
• Create AJAX endpoints
  • Mark items as resolved
  • Export CSV/JSON
• Add frontend assets
  • CSS for grid layout and comparison UI
  • JavaScript for filtering, fullscreen compare
• Documentation and configuration examples

Progress

Starting with empty repository - building complete extension structure.

Original prompt

Build a TYPO3 v13 extension: “Frontend QA – Visual Diff”. Backend module accepts two base URLs and a sitemap or manual list. A Scheduler task crawls pages, renders screenshots (before/after) per viewport using Imagick, computes pixel diff with tolerance, and saves to typo3temp/visual-diff/ with metadata.json. UI grid shows thumbnails, filters by status/URL, marks items resolved via AJAX, offers fullscreen compare, and exports CSV/JSON.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[priebera1]

Build a TYPO3 v13 extension “devsk_visualdiff” (issues-only, Scheduler-first). Goal: compare two bases (A,B) and show ONLY pages with broken frontend.

Constraints:

• NO Chromium/Node. Render HTML→PNG via wkhtmltoimage; compute diff via PHP Imagick/GD.
• Store outputs under var/visual-diff/job-/run-// (before.png, after.png, diff.png, meta.json).

Implement:

• DB: tx_visualdiff_job (bases, sitemap/manual URLs, filters, viewports, tolerance, concurrency, headers/cookies, stabilizers, storage_path, keep_history_runs, active), tx_visualdiff_run (status, stats), tx_visualdiff_issue (run/job, url, viewport, percent_changed, bbox_count, max_box_area, before/after/diff paths, bbox_json, resolved, error_message).
• Scheduler: RunVisualDiffJobTask (crawl+render+diff), Resume task, Purge history. CLI: bin/typo3 lia-visualdiff:run --job=.
• Rendering: wkhtmltoimage with --javascript-delay and optional --user-style-sheet (qa-freeze.css disables animations & hides dynamic UI). Headers/cookies injection supported.
• Diff: Imagick compare (AE metric) + fuzz tolerance; produce heatmap diff.png; binarize+morphology to get connected components → bbox_json. Heuristics “broken”: percent≥1.5% OR maxBoxArea≥2% OR bboxCount≥5 (configurable).
• Cache/skip by HTML hash A/B; sitemap chunking; concurrency control; retries/timeouts; SSRF guard/host whitelist.
• BE module: default view lists ONLY issues (unresolved first) with URL, viewport, badges (%, bbox), thumb of diff.png; filters (URL regex, viewport, percent range, status); detail view with before/after slider + diff overlay; AJAX toggle resolved; export CSV/JSON honoring filters.
• Files: ext_emconf.php, composer.json (require ext-imagick), ext_tables.sql, TCA for 3 tables, Services.yaml (RendererInterface=WkhtmltoimageRenderer), Scheduler registrations, Repositories, Controllers, Fluid templates, minimal ES6 for grid/slider (optional Pixelmatch in-browser preview only).

Deliver: full skeleton + key classes, configs, and QA freeze CSS.

[priebera1]

Build a TYPO3 v13 extension “devsk_visualdiff” (issues-only, Scheduler-first). Goal: compare two bases (A,B) and show ONLY pages with broken frontend.

Constraints:

• NO Chromium/Node. Render HTML→PNG via wkhtmltoimage; compute diff via PHP Imagick/GD.
• Store outputs under var/visual-diff/job-/run-// (before.png, after.png, diff.png, meta.json).

Implement:

• DB: tx_visualdiff_job (bases, sitemap/manual URLs, filters, viewports, tolerance, concurrency, headers/cookies, stabilizers, storage_path, keep_history_runs, active), tx_visualdiff_run (status, stats), tx_visualdiff_issue (run/job, url, viewport, percent_changed, bbox_count, max_box_area, before/after/diff paths, bbox_json, resolved, error_message).
• Scheduler: RunVisualDiffJobTask (crawl+render+diff), Resume task, Purge history. CLI: bin/typo3 lia-visualdiff:run --job=.
• Rendering: wkhtmltoimage with --javascript-delay and optional --user-style-sheet (qa-freeze.css disables animations & hides dynamic UI). Headers/cookies injection supported.
• Diff: Imagick compare (AE metric) + fuzz tolerance; produce heatmap diff.png; binarize+morphology to get connected components → bbox_json. Heuristics “broken”: percent≥1.5% OR maxBoxArea≥2% OR bboxCount≥5 (configurable).
• Cache/skip by HTML hash A/B; sitemap chunking; concurrency control; retries/timeouts; SSRF guard/host whitelist.
• BE module: default view lists ONLY issues (unresolved first) with URL, viewport, badges (%, bbox), thumb of diff.png; filters (URL regex, viewport, percent range, status); detail view with before/after slider + diff overlay; AJAX toggle resolved; export CSV/JSON honoring filters.
• Files: ext_emconf.php, composer.json (require ext-imagick), ext_tables.sql, TCA for 3 tables, Services.yaml (RendererInterface=WkhtmltoimageRenderer), Scheduler registrations, Repositories, Controllers, Fluid templates, minimal ES6 for grid/slider (optional Pixelmatch in-browser preview only).

Deliver: full skeleton + key classes, configs, and QA freeze CSS.