Puppeteer: Node has 0 width.

The element screenshot’s bounding box has zero width.

Error message

Node has 0 width.

How this error happens

An element can exist in the DOM but have a zero-sized bounding box. For example, a collapsed preview can have width set to zero.

The snippets use an open Puppeteer page named page.

await page.setContent(
    '<div id="preview" style="width: 0px; height: 100px;"></div>'
);

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

await preview.screenshot();

How to fix

Wait for the element to have a usable size. In this controlled example, restore the intended layout before taking the screenshot.

await page.$eval("#preview", (element) => {
    element.style.width = "200px";
    element.style.height = "100px";
});

await page.waitForFunction(() => {
    const element = document.querySelector("#preview");
    const box = element.getBoundingClientRect();

    return box.width > 0 && box.height > 0;
});

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

await preview.screenshot();

Things to keep in mind

On a real website, let the application expand or finish rendering the element. Do not change its CSS just to hide a layout bug.

All Puppeteer errors