← Back to Tutorials

How to automatically take a screenshot of a specific website element in Make

Learn how to capture automatic screenshots of a selected element on a web page in your Make automations with the PagePixels Screenshots Make app.

Introduction

Looking for a way to automate screenshots of only a specific part of a web page in your Make.com Scenarios? With PagePixels' CSS Selector Screenshot feature, you can capture screenshots of just the element that interest you.

PagePixels is free to start and once you've setup your CSS Selector screenshot in Make, you can send the images to one of the thousands of apps Make supports, like Google Drive, OneDrive, and Discord.

As an example, this tutorial demonstrates how to create a Make screenshot automation that automatically takes a screenshot of an element on a Wikipedia page and sends the screenshot image in a Gmail message as an attachment.

Make automation we'll create in this tutorial:

Element we're going to capture in this tutorial from this web page.

How to take automatic screenshots of an element on a web page and send as a Gmail email attachment in Make.com

To automatically take a screenshot of a certain part of a website and email the image as an attachment in a Gmail message, follow these steps:

1

Open the web page

Visit the web page in an incognito browser. For example: https://en.wikipedia.org/wiki/Pinniped

2

Open Dev Tools

Right-click on the element you want to screenshot, and select the "Inspect" option.

3

Confirm Element in Dev Tools

Hover over the element in your developer tool's Elements tab. This will highlight the element in the web page.

Confirm this is the element you want to screenshot and that the element has a height greater than 1px (e.g. the image above shows 316.38 x 1245.08 dimensions).

Note: If the element has a 0 height dimension (e.g. 256 x 0, 0 x 0), you cannot capture that specific element.

4

Get CSS Selector

For this example, we're going to use the unique class "infobox" on the table element as the selector:

table.infobox

Save this CSS selector to use in the PagePixels Make app.

5

Click the + Create a new scenario button

6

Add the PagePixels Create a Web Page Screenshot Action

Search for and click on the PagePixels Screenshots app.

Select "Create a Screenshot of a Web Page"

7

Configure your Screenshot

Add a webpage link to the Website URL field.

Add the selector you retrieved from the web page into the CSS Selector field.

Finish configuring your screenshot. Click Save.

8

Add the HTTP Get a file Action

Click the "Add another module" button.

Search for and click on the "HTTP" app and choose the "Get a file" Action module.

9

Configure the Get a file Action to fetch the screenshot

In the "Get a file" module, click into the "URL" field, and select the "Direct Link" item option.

Click the Save button.

10

Add the Gmail Send an Email Action

Click the "Add another module" button.

Search for and click on the "Gmail" app and choose the "Send an email" Action module.

11

Configure your Gmail module

Add an email recipient and use the Attachments field to add your screenshot image file.

Note: The File field should auto-select the HTTP - Get a file item option for you.

Complete the other fields to your preference and click Save.

12

Test your Scenario

Click on the "Run once" play button to test your scenario.

After a successful test run in Make, an email should arrive with the screenshot file attached.

Example:

13

Schedule your Scenario

Click the Every 15 minutes scheduling toggle in your bottom toolbar to the "ON" position.

Set your desired schedule and click the Save button.

Click the Save icon in the bottom toolbar.

🎉 Your Make automation is officially set and running on your set schedule.

Your Make screenshot automation is active and will automatically take daily CSS Selector screenshots and email the images as attachments using Gmail.

See our Make Help Guide for more comprehensive information about our Make integration.

Frequently Asked Questions

Where can I find more information about CSS Selector Screenshots, including other examples?

Check out our CSS Selector Help Guide for helpful details and examples of how you can use the PagePixels' CSS Selector feature.

I'm getting a Node has 0 height error. How do I resolve this?

This error occurs if the element you've selected has no height. To resolve, you'll need to select a different element on the page that has a minimum 1px height.

Where can I find more information about the PagePixels Screenshots Make app, including examples?

Check out our Make Help Guide for helpful details and examples of how you can use the PagePixels Screenshots Make integration.

Can I get help finding the CSS Selector I need for my screenshot?

We understand that CSS Selectors can be tricky at first, and we're happy to offer free personalized setup guidance for your first CSS Selector Screenshot.

To help us assist you more effectively, please share the following information:

  • The web page URL where the content you want to capture is located.
  • An image example of how you'd like the final screenshot to look.
  • Let us know where you're using PagePixels: our web app, API, Make, Zapier, or something else.

Please send the information from the email associated with your PagePixels account to:

support-tickets@pagepixels.com

There's no single element that contains only the information I want to screenshot. Is there a way I can remove the stuff I don't want in the screenshot?

You can remove elements you don't want appearing in the screenshot using CSS in the CSS Injection field in the PagePixels Screenshots Make app.

For example: #element-to-remove{display:none !important;}

Want to learn more about CSS? Mozilla has great documentation.

Need help getting your screenshot to look just right? Contact us and we can help.

What else can PagePixels do?

When you automate screenshots with PagePixels and Make, you can also:

  • Automate clicking buttons, filling out forms, performing a search, and more - all before taking a screenshot with Multi-Step functionality in Make.
  • Take and have AI analyze your screenshots with PagePixels' Create a Screenshot of a Web Page and Analyze the Image with OpenAI's ChatGPT Action module in Make.
  • Create screenshots from data in Make apps, including emails, using the Create a Screenshot of Custom HTML Action module.
  • Compare, contrast, and extract insights from screenshots and other images with the PagePixels' Analyze any Image with OpenAI's ChatGPT Action module in Make. See an example in this tutorial.
  • Automate structured data extraction and AI-powered text analysis for your marketing, sales, and lead generation needs with PagePixels' Create a Domain Research Report Action module in Make.
  • Use an Embed URL to dynamically share and display the latest screenshot on your website, dashboard, presentation app, and more.
  • Remove elements and customize the style of your resulting screenshots with PagePixels' Custom CSS injection feature.
  • Take screenshots of entire webpages with the Full Page option.
  • Block ads and stop cookie banners from appearing in your screenshots with PagePixels' "No Ads" and "No Cookie Banners" options.
  • Leverage PagePixels' full-featured Screenshots API to programmatically take scheduled and instant screenshots of websites and online images.

Explore even more possibilities of what you can do on our Features page →

Support

Questions? Contact us anytime by email:

support-tickets@pagepixels.com

Or send us a message through our Support page.