search

alixaxel / chrome-aws-lambda

Chromium Binary for AWS Lambda and Google Cloud Functions
MIT License
3.2k stars 292 forks source link

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

Open JoeVanGundy opened 2 years ago

JoeVanGundy commented 2 years ago

Environment

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();
pavelloz commented 2 years ago

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