DEV CommunityThursday · June 11, 2026FREE

I automated my Gumroad product screenshots with Playwright

playwrightautomationgumroadnextjs

A developer built a local screenshot workflow with Next.js and Playwright to automate Gumroad product screenshots. The workflow addresses common manual screenshot issues: different browser sizes, inconsistent cropping, blurry images, and the need for a square thumbnail. It captures desktop screenshots, mobile screenshots, square thumbnail images, and consistent PNG outputs. Additional features include route status checks, basic console error reporting, and basic horizontal overflow checks. The command flow is: npm run build, npm run start, npm run screenshots. The script reads a simple config file, opens configured local routes, captures each screenshot with consistent viewport settings, and exports images into a predictable folder (e.g., screenshots/gumroad/ with files like landing.png, dashboard.png, template-preview.png, mobile-preview.png, thumbnail.png). The developer found this especially useful for preparing Gumroad product galleries because it allowed regenerating all product images after any update.

// why it matters

Automating screenshots saves time and ensures consistency for developers selling digital products on platforms like Gumroad.

Sources

Primary · DEV Community
▸ Read original at dev.to

Like this? Get the next digest.