Automate Web Page Screenshot Capture - URL to PNG

Webpage URL to Screenshot PNG

Taking a screenshot of a website is a fairly common task and can be performed simply enough via the “print screen” key to any number of browser plug-ins.

However, there are any number of reasons you might want to automate and schedule the process of taking a screenshot of a website, from testing the way the site renders on different device screen sizes to sending end-user error reporting to creating a snapshot archive.

For this use case, we’ll show how you can create a simple pipe that emails you each day with a screenshot of your site in a browser, a tablet like an iPad and a mobile device like an iPhone. The email will provide a quick visual check each day to make eyeball that your responsive display is working as expected.

Convert Any Webpage into a Screenshot


For this example, we’ll set up an automated process to convert a webpage url to screenshot image (PNG). Let’s start building!

  1. Input from a webpage; capture a screenshot

    We’ll use the ‘render’ command to capture the screenshot. It takes a webpage url (in this case, Hacker News) and converts it to a screenshot:

    render url: https://news.ycombinator.com/ format: png width: 1024 height: 768 scrollbars: false
    

    In addition to the url and format, we’re specifying the dimensions of our screenshot. Here we’ll take a standard monitor display size.

  2. Tablet Viewport

    We’ll add a second step to create a screenshot for a tablet, like an iPad:

    render url: https://news.ycombinator.com/ format: png width: 768 height: 1024 scrollbars: false
    
  3. Mobile Viewport

    And, to round off the example, we’ll add a third step to create a screenshot for mobile, like an iPhone:

    render url: https://news.ycombinator.com/ format: png width: 768 height: 1024 scrollbars: false
    
  4. Email attachments

    As a final step, we’ll output the screenshots as attachments and send them to ourselves daily via email:

     email to: [your-email-address] subject: Here are your screenshots data: attachment
    

Automating the process


You can run the process manually at any time. But, the next step is automating the process. To deploy you can do one of the following: