Screenshot from URL

The "Screenshot from URL" step allows you to capture screenshots of webpages directly within your workflow. This is useful for creating visual references, analyzing website designs, or including webpage captures in your content.

How to Configure the Screenshot from URL Step

Configuring the step requires setting the parameters shown below:

[IMAGE: Screenshot of the Screenshot from URL step configuration panel]

URL

Enter the complete URL of the webpage you want to capture. Make sure to include the protocol (http:// or https://).

You can use Liquid syntax to dynamically reference a URL from a previous step:

{{ step_1.output.website_url }}

Width (Optional)

Specify the viewport width in pixels for the screenshot. This determines how wide the browser window will be when capturing the screenshot.

Default: 1280 pixels

Height (Optional)

Specify the viewport height in pixels for the screenshot. This determines how tall the browser window will be when capturing the screenshot.

Default: 800 pixels

Full Page (Optional)

Toggle this option to capture the entire webpage, including content that extends beyond the initial viewport. When enabled, the screenshot will include the full scrollable content of the page.

• Enabled: Captures the entire page from top to bottom

• Disabled: Captures only the content visible in the specified viewport dimensions

Format (Optional)

Select the image format for the output:

• PNG

• JPEG

PNG is preferable for screenshots with text as it provides better quality, while JPEG may result in smaller file sizes.

Wait Before Capture (Optional)

Specify the time in milliseconds to wait after the page loads before capturing the screenshot. This is useful for pages that have animations, load content dynamically, or require extra time to render properly.

Default: 0 milliseconds

Output Format

The Screenshot from URL step returns a JSON object containing details about the captured screenshot:

{
  "url": "https://example.com/screenshot.png",
  "captured_url": "https://website-that-was-captured.com",
  "width": 1280,
  "height": 800,
  "is_full_page": true,
  "timestamp": "2024-02-26T15:30:45Z"
}

[IMAGE: Screenshot showing an example of the capture results in the AirOps interface]

How to Use the Results

You can access the screenshot properties in subsequent workflow steps using Liquid syntax. For example:

{{ step_2.output.url }}

This will reference the URL of the captured screenshot.

Common Use Cases

• Creating visual evidence or references

• Monitoring website changes

• Including webpage captures in reports or presentations

• Analyzing UI/UX designs

• Capturing social media posts or comments

• Visual quality assurance

How to Continue if the Screenshot Fails

By default, the Screenshot from URL step will terminate the workflow if it fails. To continue the workflow if the step fails, click "Continue" at the bottom of the settings panel.

[IMAGE: Screenshot showing the "Continue" option in the step settings]

The step will return the following keys when it fails:

• output: this will be null

• error:

  • message: the message returned from the step

  • code: the error code representing the error

Common error scenarios include:

• Invalid URLs

• Websites that block screenshots

• Pages that require authentication

• Network timeouts

Example Workflow

Here's a common pattern using the Screenshot from URL step:

1. Use a "Google Search" step to find relevant websites

2. Extract the top result URL

3. Use the "Screenshot from URL" step to capture the webpage

4. Pass the screenshot to an LLM with vision capabilities for analysis

5. Generate a summary or insights based on the visual content

This approach allows you to automate the process of researching, capturing, and analyzing web content visually within a single workflow.