Filament Screenshot Catalogue Laravel Package

Product Decisions This Supports

• Visual QA & Regression Testing: Automate screenshot capture for every Filament panel page (desktop/tablet/mobile, light/dark mode) to detect UI inconsistencies early, reducing manual testing effort and catching visual bugs before release.
• Design Review & Handoff: Generate a browsable, versioned catalog of all UI states (e.g., v2.5.0) for designers, product managers, and stakeholders to review without needing live environments.
• Marketing & Documentation: Create shareable, self-contained assets (e.g., s3://screenshots/admin/latest/index.html) for marketing collateral, onboarding guides, or customer support portals.
• AI-Driven Visual Regression: Feed screenshots into tools (e.g., Perceptual Diff, custom ML models) for automated visual testing or training datasets.
• Build vs. Buy: Avoid reinventing a custom solution for screenshot automation, reducing dev time and maintenance overhead.
• CI/CD Integration: Trigger captures on PR merges or nightly builds to ensure UI consistency across deployments.

When to Consider This Package

• Adopt if:

  • Your team uses Filament v5 and needs automated UI documentation or visual testing.
  • You lack a dedicated visual regression testing tool (e.g., Percy, Applitools) but still want lightweight, self-hosted captures.
  • Your workflow involves frequent design reviews, marketing asset generation, or multi-tenant UI validation.
  • You’re comfortable with S3 storage, Node.js/Playwright, and Laravel’s Artisan CLI for setup.

• Look elsewhere if:

  • You need cross-framework support (not Filament-specific).
  • Your stack lacks S3 storage or Node.js (Playwright dependency).
  • You require real-time visual diffing (this package focuses on static catalogs).
  • Your team prefers commercial tools (e.g., Applitools, Storybook) over open-source solutions.
  • You’re using Filament v2/v3 (v5-only compatibility).

How to Pitch It (Stakeholders)

For Executives:

"This package automates the creation of a searchable, versioned catalog of every Filament admin panel page—captured at all breakpoints and themes—stored in S3. It eliminates manual screenshot hunts for QA, design reviews, or marketing, while enabling AI-driven visual testing. Think of it as ‘Git for UI assets’: always up-to-date, shareable, and tied to code versions. Setup is lightweight (Node.js + S3), and it integrates seamlessly with our Laravel stack."

Key Outcomes:

• Reduces manual QA effort by 30%+ for visual validation.
• Accelerates design reviews with self-service UI documentation.
• Enables marketing to pull fresh screenshots for collateral without dev overhead.
• Future-proofs for AI tools (e.g., training datasets, automated diffing).

For Engineering:

*"This is a drop-in Laravel package that:

1. Discover all Filament panel routes (resources, custom pages, auth screens) via a sitemap.
2. Captures screenshots at 3+ viewports (desktop/tablet/mobile) and themes (light/dark) using Playwright.
3. Uploads to S3 in a structured format (s3://prefix/{panel}/{version}/) with an interactive index.html for browsing.
4. Integrates with CI/CD via Artisan commands (e.g., trigger on PR merges).

Why it’s worth adopting:

• No frontend changes: Works with existing Filament panels.
• Dev-friendly: Uses Laravel’s queue system for scalability; Playwright handles headless browsing.
• Extensible: Override viewports, CSS, or S3 paths via config.
• Safe for prod: Blocks captures in APP_ENV=production by default.

Tradeoffs:

• Requires Node.js (Playwright) and S3 storage (no local-only option).
• Not a diffing tool: Best paired with external visual regression systems (e.g., Percy).
• Filament v5 only: Won’t work with older versions.

Proposal:

• Install as require-dev (no prod bloat).
• Register panels in a service provider (5-minute setup).
• Schedule captures in CI (e.g., nightly or post-deploy).
• Use the index.html for internal reviews or share links with stakeholders."*

Example Workflow:

# 1. Discover all panel routes
php artisan panel:sitemap --panel=admin

# 2. Queue captures (runs via queue worker)
php artisan screenshot:dispatch --panel=admin --tag=v1.2.0

# 3. Browse results
open s3://your-bucket/screenshots/admin/v1.2.0/index.html