Wait for element

The wait_for parameter allows you to delay rendering until a specific element attribute is present on the page.

​

Overview

When rendering pages with dynamic content, you may need to ensure certain elements are fully loaded before capturing the page. The wait_for parameter lets you specify an element and attribute to wait for before proceeding with rendering.

​

Parameter details

​

Usage

{
  "parts": "https://example.com",
  "wait_for": {
    "selector": "#dynamic-content",
    "attribute": "data-loaded"
  }
}

​

Behavior

The rendering process will wait until the specified attribute exists on the element matching the provided CSS selector. This is useful for ensuring that dynamic content has finished loading before the PDF is generated.

​

Use cases

This parameter is particularly useful for:

1. Single-page applications: Wait for specific UI components to finish rendering before capturing the page.

2. Lazy-loaded content: Ensure images, data, or other resources that load asynchronously are fully rendered.

3. Custom loading indicators: Wait for your application’s own loading state to indicate completion.

​

Examples

​

Waiting for content to load

{
  "parts": "https://example.com",
  "wait_for": {
    "selector": "#content-container",
    "attribute": "data-loaded"
  }
}

​

Waiting for images to load

{
  "parts": "https://example.com",
  "wait_for": {
    "selector": ".hero-image",
    "attribute": "data-loaded"
  }
}

​

Waiting for application state

{
  "parts": "https://example.com",
  "wait_for": {
    "selector": "body",
    "attribute": "data-app-ready"
  }
}

​

Combining with evaluate_js

You can use evaluate_js to set the attribute that wait_for is looking for:

{
  "parts": "https://example.com",
  "evaluate_js": {
    "expression": "setTimeout(() => { document.querySelector('#content').setAttribute('data-ready', 'true'); }, 2000)"
  },
  "wait_for": {
    "selector": "#content",
    "attribute": "data-ready"
  }
}