`saveElementScreenshot()` captures wrong area

[stracker-phil]

What are you trying to achieve?

I want to use I.saveElementScreenshot() to capture a single element on a page, using the Puppeteer helper.

The resulting screenshot has the correct dimensions, but captures an area that's too far down on the page (i.e., the vertical offset is too big).

Sample Scenario

Scenario('Test Element Screenshot @test', async () => {
  I.amOnPage('https://google.com');
  I.saveElementScreenshot('.W2aPtb', 'actual-image.png');
})

Expected

Actual

Difference

Details

• CodeceptJS version: 3.1.1
• NodeJS Version: v14.15.4
• Operating System: MacOS 11.5.1
• puppeteer version: 10.2.0
• Configuration file:

exports.config = {
  tests: '../browser/**/*.js',
  output: '../_output',
  timeout: 1800000,
  helpers: {
    FileSystem: {},
    Mochawesome: {
      uniqueScreenshotNames: true
    },
    Puppeteer: {
      url: 'https://google.com',
      show: true,
      windowSize: '1280x900',
      uniqueScreenshotNames: true,
      restart: false,
      keepBrowserState: true,
      keepCookies: true
    }
  }
};

Is it Puppeteer?

I've done a quick test using https://try-puppeteer.appspot.com/:

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://google.com');

await page.waitForSelector('.lnXdpd');  // Wait for the Google logo.
const logo = await page.$('.lnXdpd');   // Grab the logo element.
await logo.screenshot({path: 'screenshot.png'}); // Screenshot the logo.
await browser.close();

→ This code resulted in the correct image (the Google Logo), so NO it's possibly not caused by Puppeteer. The bug seems to be introduced by the CodeceptJS helper.

[DavertMik]

@stracker-phil this doesn't seem to be a valid check

try-puppeteer.appspot.com runs Puppeteer version 1.9 while the current version is 10.2

Please try this script locally on latest Puppeteer version and check if it works there. I also noticed some regressions in latest Puppeteer so I think this is not something from CodeceptJS

Please reopen issue if you didn't reproduce this with raw Puppeteer.

[stracker-phil]

Hi @DavertMik

It turns out that you are right - the problem is not caused by CodeceptJS but by Puppeteer!

Note: The issue is related to the headless mode: When Puppeteer starts in headless mode, the screenshot is correct. When using headless: false to display the browser, then screenshot areas are incorrect.

→ So, the quick-fix in CodeceptJS is, to take screenshots in headless mode

I've filed a bug report for this issue in the puppeteer repo: https://github.com/puppeteer/puppeteer/issues/7514