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

See Example

POST /screenshot

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

Have a look at the full list of step options.

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.

See Example

POST /screenshot

{
  "elementSelector": [
    "body > div.app-shell > div > div"
  ],
  "prefersColorScheme": "light",
  "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"
    }
  ]
}