Puppeteer: Node is either not visible or not an HTMLElement

The element action cannot obtain a visible HTMLElement box.

Error message

Node is either not visible or not an HTMLElement

How this error happens

An element screenshot needs a visible bounding box. An element with display: none has no box to capture.

The snippets use an open Puppeteer page named page.

await page.setContent(
    '<div id="preview" style="display: none;">Preview</div>'
);

const preview = await page.$("#preview");

await preview.screenshot();

How to fix

Wait until the application shows the element. Here, making the demo element visible supplies the missing box.

await page.$eval("#preview", (element) => {
    element.style.display = "block";
});

await page.waitForSelector("#preview", {
    visible: true,
});

const preview = await page.$("#preview");

await preview.screenshot();

Things to keep in mind

Visibility and nonzero dimensions are separate requirements. A visible but collapsed element can produce a zero-width or zero-height error.

All Puppeteer errors