Clicking elements before taking screenshots

For this example, we are going to be capturing the branches of the US government website. Also, for visual evidence beforehand, this is how the webpage looks like before clicking any elements

Note: The screenshot was cropped to fit into the area where we will be clicking the element 

Step 1: Selecting the element

The portion pointed with an arrow is where we will be clicking so that we can expand its content before taking our screenshot. Practically, this can be any part of the webpage.

Step 2: Inspecting the element

Now that we know what to click on the page before taking our screenshot, let's dive straight into the mechanics of doing that. After navigating to that URL in your browser (we are using Google Chrome browser here), "right-click" the portion you want to click before taking the screenshot. A little dialog box appears, Look for "Inspect" from the list of items shown and then click on it.

Step 3: Copying the element's selector

Clicking this will open a pane (usually by the right-hand side of the screen). This pane already highlights the element that we are targeting, so right-click on it, click "Copy" + "Copy selector". Now we have obtained the selector that we will use in our expert mode

Step 4: Pasting the selector to expert mode

At this point, head over to your Stillio account, add this URL - https://www.usa.gov/branches-of-government and turn on the expert mode option. Paste the selector you had copied earlier into the "Click" field. It should look something like this:

Adding this webpage with the current settings will cause our render engine to click the selected element and hence render it like this:

Congratulations! 🎉🎉🎉 Now we are successfully clicking that element before taking our screenshot. Remember that this technique can be used to click any element on the page e.g newsletter pop-ups, subscription pop-ups, or any unwanted element interfering with your screenshots.