Skip to content

Overview

💡 Disclaimer

This API is still in development and is not yet available for public sign-up. If you are interested in using this API, please reach out to us at hello@launchbrightly.com for further info.

Debugging

There might be situation where your screenshots are failing and the error messages returned by the API are not enough.

The screenshot API allows you to visually debug at different steps by capturing snapshots of the page.

Enabling Debugging

Set the stepImages attribute to either onError or all to enable capturing snapshots.

ValueDescription
onErrorCapture snapshots only when screenshot capture fails.
allCapture snapshots regardless if screenshot capture is successful or fails.

When the stepImages is not explicitly specified, no snapshots are captured.

Example 1 : Capturing snapshots when a step fails

Request:

POST /screenshot

json
{
  "stepImages": "all",
  "elementSelector": [
    "body"
  ],
  "steps": [
    {
      "type": "navigate",
      "url": "https://example.org"
    },
    {
      "selectors": [
        "#fake"
      ],
      "timeout": 10000,
      "type": "waitForElement"
    }
  ]
}

Response:

json
{
  "id": "b79f639c-fcd7-4b4d-8326-7496efb310b3",
  "status": "failed",
  "message": "The following selector(s) associated with step 'waitForElement' were either not found or timed out: #fake",
  "createdAt": "2024-07-03T19:17:52.660Z",
  "updatedAt": "2024-07-03T19:18:11.599Z",
  "filesize": {
    "raw": null,
    "styled": null
  },
  "url": {
    "raw": null,
    "styled": null
  },
  "snapshots": {
    "steps": [
      {
        "description": "navigate",
        "type": "navigate",
        "data": "https://launchbrightlyf9ff5e67329842e1a3a8fc00d5a7569c145137-prod.s3.us-east-1.amazonaws.com/debug/2024-07-03/b74c93c172803c11cf60f8d4492569e1db06af5497e231d5d7a44ed0447ea788_navigate.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIASH5PNXSCN5O7E7U2%2F20240703%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240703T191813Z&X-Amz-Expires=86400&X-Amz-Signature=0203572c26614639fd6ccd00375cbda25ef2125cf8b31c5a4af0d9d868d88224&X-Amz-SignedHeaders=host&x-id=GetObject",
        "url": "https://example.org/"
      },
      {
        "description": "waitForElement",
        "type": "waitForElement",
        "selectors": [
          "#fake"
        ],
        "data": "https://launchbrightlyf9ff5e67329842e1a3a8fc00d5a7569c145137-prod.s3.us-east-1.amazonaws.com/debug/2024-07-03/b74c93c172803c11cf60f8d4492569e1db06af5497e231d5d7a44ed0447ea788_waitForElement.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIASH5PNXSCN5O7E7U2%2F20240703%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240703T191813Z&X-Amz-Expires=86400&X-Amz-Signature=2dd11bd985f14e070ec2ea64659a13ddb50b616d6419b128f76c93393335fa5f&X-Amz-SignedHeaders=host&x-id=GetObject",
        "message": "The following selector(s) associated with step 'waitForElement' were either not found or timed out: #fake",
        "url": "https://example.org/"
      }
    ]
  }
}

Example 2 : Capturing snapshots when an annotation fails

Request:

POST /screenshot

json
{
  "stepImages": "onError",
  "deviceScaleFactor": 1,
  "elementSelector": [
    "body"
  ],
  "steps": [
    {
      "type": "navigate",
      "url": "https://example.org"
    },
    {
      "value": 3000,
      "type": "waitFor"
    }
  ],
  "annotate": [
    {
      "type": "modifyText",
      "selectors": [
        ".fake",
        "xpath/html/body/div/fake"
      ],
      "value": "Hello World!!"
    }
  ]
}

Response:

json
{
  "id": "3cb78689-d421-49fd-81d8-990bc8d5ac6a",
  "status": "failed",
  "message": "The following selector(s) associated with the annotate type 'modifyText' were either not found or timed out: .fake,xpath/html/body/div/fake",
  "createdAt": "2024-07-03T19:20:21.002Z",
  "updatedAt": "2024-07-03T19:20:26.302Z",
  "filesize": {
    "raw": null,
    "styled": null
  },
  "url": {
    "raw": null,
    "styled": null
  },
  "snapshots": {
    "steps": [
      {
        "description": "navigate",
        "type": "navigate",
        "data": "https://screenshot-prod.s3.us-east-1.amazonaws.com/debug/image1.png",
        "url": "https://example.org/"
      },
      {
        "description": "waitForExpression",
        "type": "waitFor",
        "data": "https://screenshot-prod.s3.us-east-1.amazonaws.com/debug/image2.png",
        "url": "https://example.org/"
      }
    ],
    "annotate": [
      {
        "description": "modifyText",
        "type": "modifyText",
        "selectors": [
          ".fake",
          "xpath/html/body/div/fake"
        ],
        "data": "https://screenshot-prod.s3.us-east-1.amazonaws.com/debug/2024-07-03/cf696.png",
        "message": "The following selector(s) associated with the annotate type 'modifyText' were either not found or timed out: .fake,xpath/html/body/div/fake",
        "url": "https://example.org/"
      }
    ]
  }
}