0

Using Puppeteer I'm trying to navigate to a page and then take a screenshot of an element on the page.

const page = await browser.newPage();

await page.goto('some-url');

const myElement = await page.waitForSelector('.my-class', { visible: true });

const myElementHtml = await page.evaluate((el) => el.innerHTML, myElement);
console.log(myElementHtml); // this contains everything I expect

const myElementScreenshot = await myElement.screenshot({
  type: 'png',
  encoding: 'base64',
});

When I select and console.log the html for the element I see that everything is there that I want to capture with the screenshot. However my screenshot sometimes does not include a nested element.

If I visit the url I do see that the nested element loads in after the parent is visible. However even if I waitForSelector on the nested element and then select the parent for screenshot it sometimes still does not include the nested element. I do not control the page content but it does appear to load in via a fetch.

How can I be sure the nested element will be captured in the screenshot?

Simian
  • 814
  • 11
  • 21
  • 1
    Hard to help without `some-url`. Screenshots are notoriously fussy, depend on viewport, styling, async DOM manipulation/network timing and a lot of other factors, so it's hard to make a recommendation blindly. One trick that sometimes helps is to rip out other elements until there's only the one element left as shown [here](https://stackoverflow.com/questions/73654629/why-puppeteer-doesnt-screenshot-the-whole-element/73655210#73655210). Sometimes you can remove other elements but keep the overall tree path to the one you want to screenshot, if parent containers are important. – ggorlen Oct 08 '22 at 18:12

0 Answers0