--- title: Self-updating screenshots | daily.dev description: A developer built an automated screenshot system for a help centre in their Rails app. Using Markdown comments as instructions, a Rake task fires up headless... canonical: https://daily.dev/posts/self-updating-screenshots-6qhtiffea twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Self-updating screenshots | daily.dev og:description: A developer built an automated screenshot system for a help centre in their Rails app. Using Markdown comments as instructions, a Rake task fires up headless... og:url: https://daily.dev/posts/self-updating-screenshots-6qhtiffea og:image: https://api.daily.dev/og/posts/6QhTifFEA.png og:image:alt: Self-updating screenshots og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Self-updating screenshots **[Hacker News](https://daily.dev/sources/hn)** · 4 min read · 4 upvotes · 1 comments ## Summary A developer built an automated screenshot system for a help centre in their Rails app. Using Markdown comments as instructions, a Rake task fires up headless Chrome via Capybara and Cuprite to capture screenshots of specific UI elements, full pages, or viewports. Options include clicking buttons to reveal popovers, waiting for animations, cropping, hiding elements, and applying visual effects. Running a single command rebuilds all screenshots and help pages, keeping documentation always in sync with the UI. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@allinonetools** · 1 upvotes > This is a really practical setup. Keeping screenshots auto-updated with the UI saves a lot of manual work and avoids outdated docs, especially when the product changes frequently. ## Similar posts on daily.dev - [We needed a screenshot pipeline; we got a design QA tool instead](https://daily.dev/posts/we-needed-a-screenshot-pipeline-we-got-a-design-qa-tool-instead-9mjwuqrug) · Calibre · 41 upvotes · 0 comments - [The Playwright debugging tool Rails devs aren't using](https://daily.dev/posts/the-playwright-debugging-tool-rails-devs-aren-t-using-9t2usr3w7) · thoughbot · 0 upvotes · 0 comments - [How a frustrating school project led me to build my first CLI tool.](https://daily.dev/posts/how-a-frustrating-school-project-led-me-to-build-my-first-cli-tool--difkziglc) · Medium · 27 upvotes · 1 comments - [GitHub - AmElmo/proofshot](https://daily.dev/posts/github---amelmo-proofshot-t6lz0cpbo) · Hacker News · 3 upvotes · 0 comments --- Tags: [#rails](https://daily.dev/tags/rails) [View this post on daily.dev](https://daily.dev/posts/self-updating-screenshots-6qhtiffea) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Self-updating screenshots","url":"https://daily.dev/posts/self-updating-screenshots-6qhtiffea","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/self-updating-screenshots-6qhtiffea"},"datePublished":"2026-04-27T03:09:41.295Z","dateModified":"2026-04-27T03:10:02.444Z","description":"A developer built an automated screenshot system for a help centre in their Rails app. Using Markdown comments as instructions, a Rake task fires up headless...","image":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","thumbnailUrl":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/self-updating-screenshots-6qhtiffea","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"rails","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"Self-updating screenshots"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/self-updating-screenshots-6qhtiffea","comment":[{"@type":"Comment","text":"This is a really practical setup. Keeping screenshots auto-updated with the UI saves a lot of manual work and avoids outdated docs, especially when the product changes frequently.","datePublished":"2026-04-28T04:02:08.477Z","url":"https://daily.dev/posts/6QhTifFEA#c-5eEPjKoKh","author":{"@type":"Person","name":"AllInOneTools","url":"https://daily.dev/allinonetools","image":"https://media.daily.dev/image/upload/s--4ZT8QlF0--/f_auto/v1769790028/avatars/avatar_igzBsWloJeaegzm9bQltZ?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```