I'm using puppeteer with node and express on Ubuntu.
I basically have an endpoint that, when I call it on a browser, I return a screenshot from puppeteer.
The weird thing though is that every time I do that, the page on chrome flashes (I'm not running headless because I want to see what's happening).
Here's a video of what's happening:
This causes some weird issues where, on some websites where there are menus or popups that close when you click outside, when you take a screenshot, that popup or menu disappears.
Here's another example with the google about page that illustrates that:
Here's what my endpoint that gets the screenshot looks like currently:
app.get("/ss/:id/*", async (req, res) => {
const { id } = req.params;
const page = await getPage(id);
const { resolution } = req.cookies;
let [width, height] = (resolution as string)
.split("x")
.map((o) => parseFloat(o));
width = Math.max(width, 1) - 4; // for netscape;
height = Math.max(height, 1) - 4; // for nestcape;
const ss = await page.screenshot({
quality: 100,
encoding: "binary",
type: "jpeg",
clip: { x: 0, y: 0, width, height },
});
res.type("jpg");
res.send(ss);
});
I have tried to use PNG instead of jpeg, I have also tried without the clip. With and without setting the viewport.
I don't understand why this happens.
Has anyone seen this behavior before and knows how to fix it?
Thanks!