screenshotify

Automate full-page screenshots across viewports using Puppeteer or Playwright for frontend applications.

Updated Mar 17, 2023

Search Tags:#automation #testing #screenshots #frontend #playwright #puppeteer #visual regression

Ready to run

npx skills add https://github.com/gsarmaonline/nvim --skill screenshotify

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: screenshotify
Source: https://github.com/gsarmaonline/nvim/tree/main/claude/skills/screenshotify
Command: npx skills add https://github.com/gsarmaonline/nvim --skill screenshotify

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, playwright, and includes scripts (resource) components.

What problem does it solve?

This Skill automates the process of capturing screenshots of all pages within a frontend application, which is crucial for visual regression testing and documentation.

Core Features & Use Cases

Frontend Detection: Automatically identifies if a project is a frontend application.
Route Identification: Discovers all routes and pages within the application.
Browser Automation: Sets up and utilizes tools like Puppeteer or Playwright for capturing screenshots.
Visual Regression Testing: Facilitates the detection of visual changes in web applications.
Use Case: Ensure your website's UI remains consistent across different pages and devices by automatically generating up-to-date screenshots before each release.

Quick Start

Use the screenshotify skill to capture screenshots of all pages in the current frontend application.

Frequently Asked Questions about screenshotify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate capturing screenshots of all frontend application pages?▼

Visual regression testing detects unintended UI changes by comparing baseline screenshots of web pages against new captures. This skill automates that baseline capture process across all detected frontend routes and viewports.

Can I use Playwright or Puppeteer to take full-page screenshots across multiple viewports?▼

Yes, this skill utilizes Playwright and Puppeteer to automate browser interactions. It configures these tools to identify frontend routes and capture full-page screenshots across multiple specified viewports for comprehensive visual coverage.

How do I identify and capture screenshots of all routes in a frontend framework automatically?▼

The skill automatically detects your frontend framework and identifies all available routes and pages within the application. It then systematically navigates through these discovered routes to capture and organize the necessary screenshots.

What is the best way to generate up-to-date web application screenshots before a release?▼

The best way to generate up-to-date screenshots before a release is to automate the capture process across all application pages. This ensures your UI documentation and visual regression baselines accurately reflect the current state of your application.

Does automated screenshot capture work with any frontend framework?▼

Automated screenshot capture is designed to detect frontend frameworks automatically and identify their specific routes. As long as the application routes are accessible, the tool can navigate and capture the pages using Puppeteer or Playwright.