Guide to Multi-Step Screenshots

Learn how to screenshot content that requires clicking buttons, logging in, navigating between pages, and more.

Introduction

With PagePixels' Multi-Step feature, you can automate a set of user actions on a website before capturing a screenshot.

Why use Multi-Step? When you can automate browser actions pre-screenshot, it makes it possible to capture content that requires you to:

Complete a password login,
Submit an online form,
Click a button,
Apply filters to a dataset,
And other similar interactions.

Multi-Step functionality is available in the PagePixels web app, Screenshot API, Zapier, and Make.

To get started, create your FREE PagePixels account today.

How Multi-Step Screenshots Work

PagePixels' Multi-Step features lets you define a series of actions (e.g. click, press Enter) to recreate the steps needed to navigate from a public web page, such as a login, to the content you want to screenshot.

To identify an element that PagePixels should interact with, such as clicking a specific button, you provide a unique CSS Selector for that element (e.g. #thisbuttonid, .thisbuttonclass).

Not sure how to get a CSS Selector? The easiest method is to use your browser's developer tools and the "Copy Selector" option, as demonstrated in this screencast.

Note: While “Copy Selector” is convenient, there is a trade-off, in that the selector it provides may not be the most reliable or unique option.

Want to learn more about CSS Selectors? You may find this Mozilla guide a helpful resource.

Need help with your Multi-Step Screenshot? Contact us.

Multi-Step Actions

Below is a list of actions you can automate using PagePixels' Multi-Step feature.

✔️

Click

Clicks on an element, such as a button or a text link.

Element must be clickable and available for this action to work. If the element is not consistently on the page, you may want to use the "Insert CSS" or "Run Javascript" actions instead.

✔️

Hover

Hovers over an element.

✔️

Change Notification

Use this action to detect when text changes on a web page (such as pricing), and send an alert to Slack or a Custom Webhook address.

✔️

Goto URL

Navigates to a page. Useful for getting to a specific page after logging in or refreshing the current page.

✔️

Run Javascript

Run custom JavaScript on the page. JavaScript must be on a single line.

✔️

Insert CSS

Adds custom CSS to the page. Useful for removing or styling elements that are not available when the page initially loads. CSS must be on a single line.

✔️

Text Field Input

Adds text to an input or textarea field. Useful for filling out search, login, and other forms.

✔️

Dropdown Field Selection

Selects a specific field in a dropdown menu.

The dropdown menu must be a select element.

✔️

Checkbox Field Input

Checks or unchecks a checkbox field element. Useful for forms that require checking an item before submission.

✔️

Press Enter

Emulates pressing the Enter key. Useful for forms that allow pressing the Enter key to submit.

✔️

Wait X milliseconds

Waits a custom amount of time, specified in milliseconds. Useful for giving pages enough time to load before performing another action.

Max is 15000 (value in ms) unless you've purchased the 5-minute Time Out Addon.

✔️

Wait for Selector

Waits for a specific CSS Selector to appear in the DOM. Useful for ensuring a selector is available before performing an action on it.

How to add Multi-Step Actions

How to add Multi-Step Actions in PagePixels

To add Multi-Step actions in the PagePixels web app:

Click +Add Step

Select your action

"Click" is the default action.

To change the action, click on "Click", and select your desired action from the drop-down menu that opens.

Input the values for your selected actions.

Add more actions as needed

To add more actions, click "+Add step" again.

To remove actions, click the "X" icon on the left side of the action.

How to add Multi-Step Actions in Zapier

For details on how to access Multi-Step Actions in Zapier, please see the Multi-Step section of the Zapier Help Guide.

How to add Multi-Step Actions in Make (Integromat)

For information on how to add Multi-Step Actions in Make, please see the Multi-Step section of the Make Help Guide.

How to add Multi-Step Actions through the Screenshot API

To create Multi-Step Screenshots through the Screenshot API, please see the Multi-Step section of our Screenshot API documentation.

Multi-Step Screenshot Examples

Below are examples to help demonstrate how you can automate actions on a web page using PagePixels' Multi-Step functionality.

For these examples, we're going to use the Internet Archive's website. Please note, the CSS Selectors used in these examples were retrieved from Internet Archive's website and are not universal.

Example: Logging in with Multi-Step

Using Multi-Step, you can automate filling out a password login form and navigating to the page you want to screenshot.

To demonstrate, we're going to create a screenshot configuration that takes daily screenshots of a user's private Internet Archive list.

For example:

Below are instructions for how to create this Multi-Step screenshot in PagePixels, Zapier, Make, and through the Screenshot API.

📝 Important Note: This example is for demonstrative purposes only and contains placeholder values for the Archive credentials and private list URL.

PAGEPIXELS WEB APP

Create a screenshot

Set your schedule

By default, recurring screenshots are set to every 5 minutes.

For a daily screenshot, change the default frequency values from every "5" "Minutes" to every "1" "Days" using the input field and drop-down menu.

Add login page URL

Copy and paste the login page's URL into the "Website URL to Capture" field.

This field is the starting point for your first Multi-Step action (instead of the page you want to capture).

Add Multi-Step Actions

For this Multi-Step flow, we're going to do add the following actions.

Wait For Selector

This action it to ensure that the email input field is available to perform the next action.

Text Field Input (email)

This action it to add the account email into the email input field.

Text Field Input (password)

This action it to add the account password into the password input field.

Press Enter

This action emulates pressing the "Enter" key to submit the login form.

Wait X milliseconds

This action is to give the website time to authenticate before moving onto the next step.

Goto URL

This action navigates to the private page we want to screenshot.

Save Screenshot

Click the green "Save Screenshot" button (top-right).

zapier

To create the Multi-Step login example in Zapier, you can use the PagePixels Screenshots Zapier app Take a Screenshot of a Web Page action and the following inputs.

Website URL

https://archive.org/account/login

Multi-Step Actions (Zapier)

{"type": "wait_for_selector", "selector": "input[type=\"email\"]"} {"type": "text_field", "selector": "input[type=\"email\"]", "value":"email@example.com"} {"type": "submit"} {"type": "wait", "value": "2000"} {"type": "redirect", "value": "https://archive.org/details/username/lists/1/books"}

Example in Zapier

make

To create the Multi-Step login example in Make, you can use the PagePixels Screenshots Make app Create a Screenshot of a Web Page action and the following inputs.

Website URL

https://archive.org/account/login

Multi-Step Actions

[{"type": "wait_for_selector", "selector": "input[type=\"email\"]"},{"type": "text_field", "selector": "input[type=\"email\"]", "value":"email@example.com"},{"type": "text_field", "selector": "input[type=\"password\"]", "value":"your-password"},{"type": "submit"},{"type": "wait", "value": "2000"},{"type": "redirect", "value": "https://archive.org/details/username/lists/1/books"}]

Example in Make

screenshot api

Here's how you can create the login example using the API and cURL:

POST

/screenshot_configs



$


curl -X POST "https://api.pagepixels.com/screenshot_configs" \
  -d scheduled_screenshot=true \
  -d scheduled_every=1 \
  -d scheduled_interval="days" \
  --data-urlencode url="https://archive.org/account/login" \
  --data-urlencode multi_step_actions='[{"type":"wait_for_selector","selector":"input[type=\"email\"]"},{"type":"text_field","selector":"input[type=\"email\"]","value":"email@example.com"},{"type":"text_field","selector":"input[type=\"password\"]","value":"your-password"},{"type":"submit"},{"type":"wait","value":"2000"},{"type":"redirect","value":"https://archive.org/details/username/lists/1/books"}]' \
  -d access_token="api-key"

Example: Performing a search with Multi-Step

You can use Multi-Step to complete and submit a search form before taking a screenshot.

To demonstrate this example shows how to use Multi-Step to do an advanced search of Internet Archive's website and screenshot the search results page on a daily schedule.

For example:

pagepixels web app

Create a screenshot

Set your schedule

By default, recurring screenshots are set to every 5 minutes.

For a daily screenshot, change the default frequency values from every "5" "Minutes" to every "1" "Days" using the input field and drop-down menu.

Add search page URL

Copy and paste a link to the search page into the "Website URL to Capture" field.

This field is the starting point for your first Multi-Step action (instead of the page you want to capture).

Add Multi-Step Actions

For the search Multi-Step flow, we're going to do add the following actions.

Wait For Selector

Waits for the "Any Field" text input element to be present. See an image of finding the CSS Selector used for this field.

Text Field Input

This action adds the text "mariner 10" to the "Any Field" text field input element.

Dropdown Field

This action chooses the "image" option from the "Mediatype" dropdown select element. See an image of finding the CSS Selector used for this field.

Click

This action clicks the search button identified by a unique CSS Selector to perform the search.

Wait X milliseconds

This action wait 4000ms for the page to load before taking the screenshot.

Save Screenshot

Click the green "Save Screenshot" button (top-right).

zapier

To create the Multi-Step search example in Zapier, you can use the PagePixels Screenshots Zapier app Take a Screenshot of a Web Page action and the following inputs.

Website URL

https://archive.org/advancedsearch.php

Multi-Step Actions (Zapier)

{"type": "wait_for_selector", "selector": "input[name=\"any_field\"]"} {"type": "text_field", "selector": "input[name=\"any_field\"]", "value":"mariner 10"} {"type": "select", "selector": "select[name=\"mediatype_query\"]", "value":”image"} {"type": "click", "selector": "[value=\"Search\"]"} {"type": "wait", "value": "4000"}

Example in Zapier

make

To create the Multi-Step search example in Make, you can use the PagePixels Screenshots Make app Create a Screenshot of a Web Page action and the following inputs.

Website URL

https://archive.org/advancedsearch.php

Multi-Step Actions

[{"type": "wait_for_selector", "selector": "input[name=\"any_field\"]"},{"type": "text_field", "selector": "input[name=\"any_field\"]"]", "value":"mariner 10"},{"type": "select", "selector": "select[name=\"mediatype_query\"]"], "value":"image"},{"type": "click", "selector": "[value=\"Search\"]"},{"type": "wait", "value": "4000"}]

Example in Make

screenshot api

Here's how you can create the search example using the API and cURL:

POST

/screenshot_configs



$


curl -X POST "https://api.pagepixels.com/screenshot_configs" \
  -d scheduled_screenshot=true \
  -d scheduled_every=1 \
  -d scheduled_interval="days" \
  --data-urlencode url="https://archive.org/advancedsearch.php" \
  --data-urlencode multi_step_actions='{"type": "wait_for_selector", "selector": "input[name=\"any_field\"]"},{"type": "text_field", "selector": "input[name=\"any_field\"]"]", "value":"mariner 10"},{"type": "select", "selector": "select[name=\"mediatype_query\"]"], "value":"image"},{"type": "click", "selector": "[value=\"Search\"]"},{"type": "wait", "value": "4000"}]' \
  -d access_token="api-key"

Frequently Asked Questions

How do I bypass bot verification, such as CAPTCHAs?

Multi-Step does not support bypassing bot verification tools. Depending on the content you want to screenshot, you can try:

Real Locations: Captures screenshots through real local IP addresses, which are less likely to be flagged as bots.
Chrome Extension: Take automatic screenshots directly through your browser (instead of PagePixels' servers). Screenshots are saved to your PagePixels account, making them accessible to the API, Zapier, and Make.

How do I complete a login that requires 2FA, MFA, Social Sign in (e.g. Google), or email verification?

Multi-Step does not support logging in with 2FA, MFA, Social Sign in (Google), email verification, and other advanced authentication methods.

To capture content with more advanced authentication, you can try:

Chrome Extension: The extension can use your authenticated browser session to capture screenshots of private content.
Custom HTML: If the content is accessible through an API, Zapier, or Make, you can use Custom HTML functionality to convert HTML and data into screenshots (including emails).
Public Share Link: If the site offers a public share URL option for the content you want to screenshot, you can use PagePixels directly, without dealing with authentication.

I'm getting a 400 invalid_multi_step_actions error. How do I resolve this?

This error indicates a problem occurred when our system tried to parse the value sent for Multi-Step Actions.

How to resolve this depends on what's making the value invalid. The most common causes are:

Invalid JSON: Multi-Step actions sent through the API, Zapier, or Make, need to be valid JSON. Tip: You can quickly check if your JSON is valid using a tool line JSONLint.
Special characters not escaped: If values in your Multi-Step Actions contain special characters, such as double quotes ("), you'll want to escape these values before sending them over the API, Zapier, or Make.
- For example, let's say you send: [{"type": "text_field", "selector": "input[name="search"]", "value": "harbor seal"}, {"type": "click", "selector": "#search-form button"}]
  
  This input would return the 400 error, because of the double quotes in this selector: input[name="search"]
  
  To fix, you can escape the double quotes with backslashes (\): input[name=\"search\"]
JSON is not an array of hashes: When sending Multi-Step Actions over the API or Make, you'll want to make sure the input you're providing is an array of hashes.
- For example: [{"type": "text_field", "selector": "#searchInput", "value": "harbor seal"}, {"type": "click", "selector": "#search-form button"}]
  
  Note: In Zapier, you only need to add the individual hashes. The array brackets and comma separation are handled automatically for you. For example:
  
  {"type": "text_field", "selector": "#searchInput", "value": "harbor seal"}
  
  {"type": "click", "selector": "#search-form button"}

What value am I supposed to put for the selector field?

The selector field takes in a CSS Selector that identifies the element you'd like to perform an action on. It's how our system knows which button to click or which input to fill in on the page.

For example, if you'd like to add text to this input element on Wikipedia's home page:

<input id="searchInput" name="search" type="search" size="20" autofocus="autofocus" accesskey="F" dir="auto" autocomplete="off" style="padding-right: 64px;">

You could use the selector: #searchInput

Note: For best results, you'll want to choose a selector that's unique to that element.

If you'd like to learn more about CSS Selectors, we recommend MDN's documentation on this topic.

Do you have any best practices for logging in using Multi-Step?

Yes. When logging in with Multi-Step, we recommend the following:

Use an account with the lowest necessary permissions to capture the content.
Use an account dedicated for use with PagePixels only.
- This can be especially helpful if the app content you're trying to screenshot limits how many devices can login at any one time for a single account.
- Important Note: Some applications charge per user, and creating a dedicated account for PagePixels could increase your costs for that app.
Confirm with your team that logging in with Multi-Step is an acceptable use of credentials.
Want to avoid storing credentials in PagePixels' system altogther? Consider using our Chrome Extension instead.
- Our Chrome Extension uses your authenticated browser session (not your credentials) to screenshot private content.

Help with Multi-Step Screenshots

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

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

The URL for the public web page where Multi-Step Actions will start (e.g. a login page).
An image example of how you'd like the final screenshot to look.
A detailed description or ideally a video recording of how to go from the public web page to the content you'd like to screenshot.
Let us know where you're using PagePixels: our web app, API, Zapier, Make, or something else.

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

support-tickets@pagepixels.com

___

Need help setting up more than one Multi-Step Screenshot? We offer Premium Support for additional full guided setups of Multi-Step Screenshots.

Premium Support starts at $300 USD and includes:

A full review of your use case. This includes an evaluation to ensure Multi-Step is a viable solution for your needs. If it's not, we will offer possible alternatives.
The steps needed to complete the task specific to the app you're using or our API.
Recommendations tailored to your setup
Guided support to help get you unblocked

For a full quote, please contact us with your requirements at the email above.

Note: We're always happy to answer specific questions or help troubleshoot issues for free. Premium Support is only required if you'd like us to handle the full step-by-step setup for additional Multi-Step Screenshots.

Support

Questions? Contact us anytime by email:

support-tickets@pagepixels.com

Or send us a message through our Support page.