Execute Actions #

When taking a screenshot of your Application, you are often eager to set it up in a specific state before taking the screenshot. We support this by allowing you to execute a set of automated actions before the screenshot is captured. And if you think about it, this is essentially what is needed for password-gated Web Applications where you need to log in to see the feature you want to capture.

The bare minimum required to take an Action #

POST /screenshot

Request #

{
  "elementSelector": [
    [
      "xpath//html/body/div[1]/div[2]/section/main/section"
    ]
  ],
  "steps": [
    {
      "type": "navigate",
      "url": "https://demo.baremetrics.com/stats/mrr"
    }
  ]
}

Steps reference: #

Typically, before taking a screenshot, you might need to log in to a website, navigate to a specific page and click on a link. The screenshot API allows you to compose a series of steps that mimic the behavior of a user browsing.

The following step types can be combined to build a user flow before capturing a screenshot:

Step: change #

Allows you to change the input field e.g when filling an email or password

{
  "type": "change",
  "value": "hello@example.org",
  "selectors": [
    "input#email"
  ]
}

Step: click #

Click on an html element e.g a button or a hyperlink.

{
  "type": "click",
  "selectors": [
    "button.m-r-small > span > span",
    "xpath///*[@id=\"content\"]/div/span"
  ]
}

Step: hover #

Hover over an html element e.g a menu item or a button

 {
  "type": "hover",
  "selectors": [
    ".menu#ul li:nth-child(1)"
  ]
}

Step: keyDown #

A keyDown event is fired when a key is pressed.

{
  "type": "keyDown",
  "key": "Enter"
}

The key field can also support an array of keys to type.

{
  "type": "keyDown",
  "key": [
    "KeyH",
    "KeyE",
    "KeyL",
    "KeyL",
    "KeyO"
  ]
}

The list of key values can be found here (third-column: Code)

Step: keyUp #

A keyUp event is fired when a key is released.

{
  "type": "keyUp",
  "key": "Enter"
}

The key field can also support an array of keys to type.

{
  "type": "keyUp",
  "key": [
    "KeyH",
    "KeyE",
    "KeyL",
    "KeyL",
    "KeyO"
  ]
}

The list of key values can be found here (third-column: Code)

Step: write #

The write step mimics continuous typing of texts with a 200ms delay in between each typed character. This is useful in cases where you are typing in a search box that dynamically shows results as you are typing.

{
  "type": "write",
  "text": "Hello World",
  "selectors": [
    "input#search"
  ]
}

Step: navigate #

Navigates to a specific web page.

{
  "type": "navigate",
  "url": "https://example.org"
}

Step: waitFor #

Allows you to pause for x milliseconds.

{
  "type": "waitFor",
  "value": 3000
}

Step: waitForElement #

This step wait for the presence (or absence) of a number of elements identified by a selector. For example, the following step waits for the presence of css class .button#login.

{
  "type": "waitForElement",
  "selectors": [
    ".button#login"
  ],
  "visible": true
}

Step: hideElement #

This step hides an HTML element by setting its CSS property to display: none. You can either specify a CSS selector or an XPath expression.

 {
  "type": "hideElement",
  "selectors": [
    "body > div > h1",
    "xpath//html/body/div/header"
  ]
}

Step: removeElement #

This step completely removes the HTML element from the DOM, which will eventually hide the element. The main difference compared to a hideElement step is that this will cause a change in the layout. You can either specify a CSS selector or an XPath expression.

 {
  "type": "removeElement",
  "selectors": [
    "body > div > h1",
    "xpath//html/body/div/header"
  ]
}

Usage #

Below is a series of examples demonstrating various properties of the screenshot API endpoint.

Example 1: Login to baremetrics.com, capture a screenshot and add some styling. #

{
  "elementSelector": [
    "body > div.app-shell > div > div"
  ],
  "prefersColorScheme": "light",
  "responseType": "image",
  "deviceScaleFactor": 1,
  "margin": 10,
  "backgroundColor": "purple",
  "borderRadius": 25,
  "steps": [
    {
      "type": "navigate",
      "url": "https://app.baremetrics.com/users/sign_in"
    },
    {
      "type": "change",
      "value": "hyder+trial1@launchbrightly.com",
      "selectors": [
        "#signin-email-address",
        "xpath///*[@id=\"signin-email-address\"]"
      ]
    },
    {
      "type": "change",
      "value": "12345678",
      "selectors": [
        "aria/Password",
        "xpath///*[@id=\"signin-password\"]"
      ]
    },
    {
      "type": "click",
      "waitForNavigation": 1000,
      "selectors": [
        "aria/Sign in[role=\"button\"]",
        "#new_user > button",
        "xpath///*[@id=\"new_user\"]/button"
      ]
    },
    {
      "type": "navigate",
      "url": "https://app.baremetrics.com/setup"
    }
  ]
}