Weave Code
Filament Screenshot Catalogue Laravel Package
visualbuilder/filament-screenshot-catalogue
Capture every Filament v5 panel page as desktop/tablet/mobile screenshots in light & dark mode. Queue Playwright capture jobs, upload PNGs to S3, and publish a shareable HTML index for visual QA, design reviews, and regression workflows.
Console commands to capture screenshots of all pages in Desktop, Tablet & Mobile sizes and publish an index.html catalogue
Frequently asked questions about Filament Screenshot Catalogue
- How do I capture screenshots for a Filament v5 admin panel?
- Run `php artisan panel:sitemap --panel=admin` to generate a sitemap, then dispatch captures with `php artisan screenshot:dispatch --panel=admin --tag=latest`. The package handles viewports (desktop/tablet/mobile) and themes (light/dark) automatically. Ensure your S3 disk (`s3_public`) is configured in Laravel’s filesystem settings.
- Does this work with Filament v2 or v3?
- No, this package is built specifically for **Filament v5** and leverages its routing and resource systems. If you’re using an older version, you’ll need a custom solution or wait for a compatible update.
- Can I customize which pages or records are captured?
- Yes. The sitemap generator uses representative records (e.g., the first `User` for `users.index`). Override the `PanelDescriptor` in your service provider to filter pages or mock dynamic data. For auth screens, ensure a test user exists or use the `authenticator` closure to log in programmatically.
- How do I handle authentication for protected pages?
- The package logs in as a predefined ‘screenshot user’ (configured in `PanelDescriptor`). For CI/CD, seed test users or use a shared service account. For tenanted panels, extend the `authenticator` closure to handle tenant-specific auth logic.
- Will this work in CI/CD (e.g., GitHub Actions)?
- Yes, but you’ll need Node 18+, Playwright installed (`npm install playwright && npx playwright install chromium`), and a test database seeded with representative data. Trigger captures post-deploy or manually with `php artisan screenshot:dispatch`. For large panels, parallelize jobs or use a dedicated capture server.
- How are screenshots stored, and can I use a different cloud provider?
- Screenshots upload to your configured S3 disk (default: `s3_public`). The package uses Laravel’s filesystem abstraction, so you can swap providers (e.g., Backblaze, DigitalOcean Spaces) by updating `config/filesystems.php`. Ensure the disk is publicly accessible for the shareable index.
- What if a capture job fails mid-run? How do I recover?
- Failed jobs are retried automatically (configurable in `.env`). If a job persists, manually resume with `php artisan screenshot:capture --panel=admin --page={slug} --tag=latest`. The index.html omits failed captures by default—add error handling to your `PanelDescriptor` to log or retry missing pages.
- Can I integrate this with visual regression tools like Percy or Applitools?
- Absolutely. The output (PNGs + index.html) is compatible with most tools. For AI-driven diffing (e.g., Claude), use the `claude-skills` publishable asset to compare screenshots against a baseline. Tag your runs (e.g., `v1.0.0`) for immutable comparisons.
- How do I handle complex animations or dynamic content?
- Use the `capture_time_css` option to pause rendering for animations. For dynamic content (e.g., real-time data), pre-seed your database or mock responses in the `PanelDescriptor`. Avoid WebSocket-heavy pages unless you implement custom Playwright waits.
- What’s the best way to manage S3 costs for large catalogues?
- Enable S3 lifecycle policies to archive or delete old tags (e.g., `v1.0.0`). Compress PNGs with tools like `pngquant` before upload. For versioned buckets, use S3 Object Lock to prevent accidental deletions. Monitor costs via AWS Cost Explorer.
Weaver
How can I help you explore Laravel packages today?