Clicking elements before taking screenshots

In this example, we capture the branches of the US government website. First, this is how the webpage looks before we click anything:

The screenshot is cropped to the area where we'll click the element.

Step 1: Selecting the element

The arrow points at the part we'll click, to expand its content before the screenshot is taken. In practice, this can be any part of the webpage.

The usa.gov branches of government page with an arrow pointing at the element to click

Step 2: Inspecting the element

Now that we know what to click, let's get to the mechanics. Go to that URL in your browser (we're using Google Chrome here) and right-click the part you want to click before the screenshot. In the little menu that appears, click Inspect.

The browser's right-click menu with Inspect highlighted

Step 3: Copying the element's selector

This opens a pane, usually on the right-hand side of the screen, with the element we're targeting already highlighted. Right-click it and choose Copy > Copy selector. That's the selector we'll use in Stillio.

The browser developer tools with the Copy selector option highlighted

Step 4: Pasting the selector into Stillio

Now head over to your Stillio account and add this URL: https://www.usa.gov/branches-of-government. Open the Advanced settings tab, type the selector you copied into the Click field and press Enter. It should look something like this (see all advanced capture settings):

Advanced settings tab of the Edit Webpage form with a selector entered in the Click field

When you add the webpage with these settings, our render engine clicks the selected element and renders the page like this:

The same page after the click, with the infographic description expanded

Congratulations! 🎉 Stillio now clicks that element before taking the screenshot. You can use the same trick for any element on the page, like newsletter or subscription pop-ups, or anything else that gets in the way of your screenshots.