playwright-whileinview-screenshots
CommunityFix blank Playwright screenshots
Software Engineering#screenshots#web testing#animation#playwright#framer motion#intersection observer
Authorhubeiqiao
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill addresses the issue of blank or invisible sections appearing in Playwright full-page screenshots when animations are triggered by scroll events, ensuring accurate visual captures of dynamic web content.
Core Features & Use Cases
- Animation Triggering: Programmatically scrolls through a webpage to ensure animations (like Framer Motion's
whileInView) are triggered before capturing screenshots. - Reliable Screenshots: Captures accurate full-page or per-section screenshots of dynamic content that would otherwise appear blank.
- Use Case: When using Playwright to test a marketing website with animated hero sections that only appear on scroll, this skill ensures those sections are visible and correctly captured in automated screenshots.
Quick Start
Use the playwright-whileinview-screenshots skill to capture a screenshot of the 'features' section from the provided URL.
Dependency Matrix
Required Modules
None requiredComponents
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: playwright-whileinview-screenshots Download link: https://github.com/hubeiqiao/skills/archive/main.zip#playwright-whileinview-screenshots Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.