chrome-aws-lambda icon indicating copy to clipboard operation
chrome-aws-lambda copied to clipboard

[BUG] Screenshots are only getting inline styles, no css

Open JoeVanGundy opened this issue 3 years ago • 1 comments

Environment

  • chrome-aws-lambda Version: 10.1.0
  • puppeteer / puppeteer-core Version: 10.1.0
  • OS: Mac
  • Node.js Version: 16.15.1
  • Lambda / GCF Runtime: nodejs12.x

Expected Behavior

When I take a screenshot, the results include all styles that the component included.

Current Behavior

I'm testing my lambda locally. When I take a screenshot of any site, no css is included. The only thing that works are inline styles.

Could this be because I'm testing locally? Or could there be some css configuration that I need to include to puppeteer? Any help is super appreciated!

Steps to Reproduce

let result = null;
  let browser = null;

  try {
    browser = await chromium.puppeteer.launch({
      args: chromium.args,
      defaultViewport: chromium.defaultViewport,
      executablePath: await chromium.executablePath,
      headless: chromium.headless,
      ignoreHTTPSErrors: true,
    });

    const page = await browser.newPage();

    await page.setViewport({
      width: 1002,
      height: 402,
      deviceScaleFactor: 2,
    });

    const node = (
      <html>
        <body
          style={{
            width: "1000px",
            minWidth: "1000px",
            height: "400px",
            padding: "0 !important",
            margin: "0 !important",
            overflow: "hidden !important",
          }}
        >
          <PlotRenderer plotData={plotData} />
        </body>
      </html>
    );
    const svgString = ReactDOMServer.renderToString(node);

    await page.setContent(svgString);
    const image = await page.screenshot();

JoeVanGundy avatar Jul 22 '22 03:07 JoeVanGundy

Have you tried experimenting with waitUntil? https://blog.cloudlayer.io/puppeteer-waituntil-options/

pavelloz avatar Aug 30 '22 14:08 pavelloz