Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: element screenshot not vertically aligned with element #7999

Closed
travisgroth opened this issue Feb 10, 2022 · 5 comments · Fixed by #8018
Closed

[Bug]: element screenshot not vertically aligned with element #7999

travisgroth opened this issue Feb 10, 2022 · 5 comments · Fixed by #8018
Labels

Comments

@travisgroth
Copy link

Bug description

When selecting an element and then taking a screenshot, I consistently get screenshots that are a fair number of pixels further down the page than the element I'm targeting.

Steps to reproduce the problem:

import puppeteer from 'puppeteer';

const run = async () => {
  const browser = await puppeteer.launch({
    headless: false,
  }); 
  const page = await browser.newPage();
  await page.goto('https://stackoverflow.com/');

  const header = await page.waitForSelector('body > header');
  await header?.screenshot({ path: 'header.png' });
  await browser.close();
};

run();

This is the page itself:

image

Given the selector, I'd expect a result like this:

image

Instead, I get something like this from the code above:

image

It's clearly just below the header. If the element is large enough, I'll get most of the element but the top will be missing and I'll have content from below it included. It's like everything is vertically offset by 100-200 pixels.

This is consistent across several sites I've tried. The reproduction is intentionally contrived on a stable selector.

Puppeteer version

13.3.0

Node.js version

v16.13.2

npm version

8.1.2

What operating system are you seeing the problem on?

macOS

Relevant log output

N/A
@travisgroth
Copy link
Author

Additional data point - if I manually use Chrome dev tools to take a screenshot of the node, I get the expected result:

image

@OrKoN
Copy link
Collaborator

OrKoN commented Feb 10, 2022

cc @sadym-chromium

@lowvisiondave
Copy link

I am experiencing this also with 13.3.1

@khanisak
Copy link

Same issue even on simple html with only one paragraph.
Works fine if I use puppeteer v10.1 and below.

Seems a bug from v10.2 and newer.

OrKoN added a commit that referenced this issue Feb 14, 2022
This PR partially reverts #7390
until crbug.com/1297087 is resolved. The pageX/pageY values returned
by Page.getLayoutMetrics don't look correct.

Fixes: #7999
OrKoN added a commit that referenced this issue Feb 14, 2022
This PR partially reverts #7390
until crbug.com/1297087 is resolved. The pageX/pageY values returned
by Page.getLayoutMetrics don't look correct.

Fixes: #7999
OrKoN added a commit that referenced this issue Feb 15, 2022
OrKoN added a commit that referenced this issue Feb 15, 2022
OrKoN added a commit that referenced this issue Feb 15, 2022
OrKoN added a commit that referenced this issue Feb 15, 2022
OrKoN added a commit that referenced this issue Feb 15, 2022
This was referenced May 30, 2022
This was referenced May 30, 2022
@ali-habibzadeh
Copy link

I have this issue too. Screenshoting elements is just completely broken and takes random screenshots

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment