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

object

Delays rendering until a specific element attribute is present on the page

Show Properties

string

required

CSS selector for the target element

string

required

Attribute name to wait for on the selected element

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:

Single-page applications: Wait for specific UI components to finish rendering before capturing the page.
Lazy-loaded content: Ensure images, data, or other resources that load asynchronously are fully rendered.
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"
  }
}

Get started

Page configuration

Content handling

Output options

Asynchronous processing

Overview

Parameter details

Usage

Behavior

Use cases

Examples

Waiting for content to load

Waiting for images to load

Waiting for application state

Combining with `evaluate_js`

​Overview

​Parameter details

​Usage

​Behavior

​Use cases

​Examples

​Waiting for content to load

​Waiting for images to load

​Waiting for application state

​Combining with evaluate_js

Overview

Parameter details

Usage

Behavior

Use cases

Examples

Waiting for content to load

Waiting for images to load

Waiting for application state

Combining with `evaluate_js`