Automate the page state before every screenshot.

Example 1: Step-by-step Instructions to Interact with a Website Using Automation

In the following example, we will use Post-Activities to interact with the https://dev.to/ website by searching for "Hello World" and clicking on the "Newest" tab on the search results page.

1. Let's start by visiting the website (https://dev.to/):

2. Create a Post Activity to type "Hello World" in the "Search..." text field:

3. Create a Post Activity to press the "Enter" key on the keyboard:

4. Create a Post Activity to click on the "Newest" tab:

The final result:

Here are the technical details to replay the login request using the website screenshot API:

POST https://api.addscreenshots.com/screenshots?apikey=YOUR_API_KEY

{
  "url": "https://dev.to",
  "viewport": "1024x768",
  "quality": "80",
  "activities_after": [
    {
      "type": "Hello World",
      "element": "Search..."
    },
    {
      "keypress": "Enter"
    },
    {
      "click": "Newest"
    }
  ]
}

Your API key can be found on the API Keys page. Need an API Key? Sign up to get started.
For internal applications, replace YOUR_API_KEY with your own unique API Key.
For public facing websites or hotlinks, generate a signed URL.

Example 2: How to Take Screenshots of Pages Behind a Login

In the following example we will use Pre-Activities to navigate to a login page (https://app.addscreenshots.com/login), fill in our credentials and complete the login. Once we're logged in, we will navigate to the Storage Account page (https://app.addscreenshots.com/storage).

1. First, navigate to the login page of the website.

2. Automate the website login using Pre-Activities to:
a) Navigate to the login page,
b) Type "you@mail.com" in the text field with the placeholder "Enter Email Address...",
c) Type "Secret321" in the password field with the placeholder "Password",
d) Click on the element with the "Login" text

The final result:

Here are the technical details to replay the search request using the Screenshot API:

POST https://api.addscreenshots.com/screenshots?apikey=YOUR_API_KEY

{
  "url": "https://app.addscreenshots.com/storage",
  "viewport": "1024x768",
  "quality": "80",
  "activities_before": [
    {
      "navigate": "https://app.addscreenshots.com/login"
    },
    {
      "type": "you@mail.com",
      "element": "Enter Email Address..."
    },
    {
      "type": "Secret321",
      "element": "Password"
    },
    {
      "click": "Login"
    }
  ]
}

Example 3: How to interact with an iFrame

In the following example we will use Post-Activities to interact with an iFrame (child page) on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe website by clicking on a menu item and only selecting the iFrame in the final screenshot.

1. Let's start by visiting the website:

2. Create a Post Activities to:
a) select the "iFrame" (make it the active document to interact with),
b) click on the "CSS" menu and
c) set the section to "iframe" (only show the iframe section)

The final result:

Here are the technical details to replay the iframe interaction request using the Screenshot API:

POST https://api.addscreenshots.com/screenshots?apikey=YOUR_API_KEY

{
  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe",
  "viewport": "1024x768",
  "wait": "250",
  "section": "iframe",
  "quality": "80",
  "activities_after": [
    {
      "iframe": "iframe"
    },
    {
      "click": "CSS"
    }
  ]
}