chrome-aws-lambda
chrome-aws-lambda copied to clipboard
[BUG] Screenshots are only getting inline styles, no css
Environment
chrome-aws-lambdaVersion: 10.1.0puppeteer/puppeteer-coreVersion: 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();
Have you tried experimenting with waitUntil?
https://blog.cloudlayer.io/puppeteer-waituntil-options/