Guides · Node.js · axios

Wait for a specific element before capturing in Node.js with axios

A fixed delay is a guess: too short and you capture the spinner, too long and every render pays for the worst case. wait_for_selector replaces the guess with a condition — pass a CSS selector and the render proceeds the moment a matching element is visible. The dashboard's chart, the map's tiles, the price table: name the thing you are actually waiting for, and wait for that.

Below is a complete, runnable Node.js program using axios (npm install axios). It reads your API key from the SNAPDOK_KEY environment variable — free keys take about thirty seconds and need no card.

import { writeFile } from "node:fs/promises";
import axios from "axios";

const res = await axios.post(
  "https://snapdok.io/v1/render",
  {
    url: "https://your-app.com/report/42",
    format: "png",
    wait_for_selector: "#chart-ready",
    wait_until: "networkidle",
  },
  {
    headers: { "Authorization": `Bearer ${process.env.SNAPDOK_KEY}` },
    responseType: "arraybuffer",
    timeout: 90_000,
  },
);

await writeFile("ready.png", Buffer.from(res.data));
console.log(res.headers["x-cache"], "// the settled render is cached like any other");

Selector choice is the whole game. Pick an element that appears last in your page's load sequence — a #chart-ready marker your own code adds after drawing, the final list item, the element a skeleton placeholder is replaced by. An element that exists in the initial HTML matches immediately and waits for nothing; visibility is required precisely so a pre-rendered-but-hidden node does not count as ready.

The failure mode is the feature: if the element never becomes visible within timeout, the render fails with 504 SELECTOR_TIMEOUT — not metered, and unambiguous in your logs — instead of silently shipping a half-rendered image the way an expired delay does. The sequencing composes with the other waits: navigation finishes (wait_until), then delay runs, then the selector wait begins. It works on every format, pdf_forms included.

Same endpoint, one more trick: if the page you are rendering has a form on it, adding "pdf_forms": true to a PDF render brings it back with real, fillable AcroForm fields — a PDF people can type into, not a picture of one. How that works.

Notes for axios

The one axios setting that matters here is responseType: "arraybuffer" — axios defaults to parsing responses as JSON/text, which silently mangles binary bodies. Unlike fetch, axios does throw on non-2xx responses; the error's error.response.data will be an ArrayBuffer too (because of responseType), so decode it with Buffer.from(data).toString() when you want to read the JSON error message. Response headers arrive lower-cased on res.headers.

Response headers worth reading

Header	Meaning
`X-Cache`	HIT when an identical request rendered within 24h.
`X-RateLimit-Remaining`	Requests left in the current second.

Full parameter reference: the docs. Hard numbers on caps and timeouts: limits.

Wait for a specific element before capturing in Node.js with axios

Notes for axios

Response headers worth reading

Related guides

Same task, other stacks

More with Node.js + axios