saveFullPageScreen does not work

[mcosta74]

Environment (please complete the following information):

• Node.js version: v8.11.1
• NPM version: v6.4.0
• Browser name and version: Chrome 69
• Platform name and version: macOS 10.12.6
• protractor version: 5.4.1
• protractor-image-comparison version: 2.0.0

Config of protractor + protractor-image-comparison

const protractorImageComparison = require('protractor-image-comparison');
    browser.protractorImageComparison = new protractorImageComparison(
      {
        baselineFolder: path.join(__dirname, 'resources/goldens'),
        screenshotPath: path.join(__dirname, 'results/screenshots'),
        autoSaveBaseline: (process.env['UPDATE_GOLDENS'] === '1') ? true : false,
        debug: true,
      }
    );

Describe the bug saveFullPageScreen() takes screeshot only of the visible part of the screen

To Reproduce I'm running this test

it(`looks ok on small screen`, async () => {
        await window.setSize(576, 800);

        let golden = `demo_small`;

        expect(await browser.protractorImageComparison.checkFullPageScreen(golden)).toEqual(0);
});

on a page who needs scroll and the captured image does not contain not visible part

Expected behavior The generate image should contain the whole page

Log

####################################################
this.fullPageHeight =  686
this.screenshotHeight =  686
this.viewPortHeight =  686
previousVerticalCoordinate =  0
newVerticalCoordinate =  0
trying currentScreenshotNumber = 1
this.isLastScreenshot =  true
(this.viewPortHeight * part) - this.chromeShadowPadding > this.fullPageHeight = 686 > 686
cropTopPosition =  0
rectangles = { height: 1372, width: 1150, x: 0, y: 0 }
####################################################

####################################################
compareOptions =  [ isScreen: true,
  ignoreAlpha: false,
  ignoreAntialiasing: false,
  ignoreColors: false,
  ignoreLess: false,
  ignoreNothing: false,
  ignoreRectangles: [],
  ignoreTransparentPixel: false ]
####################################################

Additional context Attached here the HTML page used in the test

demo.html.txt

and the captured image

[wswebcreation]

Tnx for the issue,

I see there is more wrong with the fullpage, also on Chrome, initially it was only on Firefox. Need to dive into this. But don't know when that will be, care for bugfixing it yourself?

[Phonesis]

Hello, we are seeing this issue with both Chrome and Firefox. It was working fine (taking full page screenshots as baselines automatically) but a UI change was made to our site and this seems to have broken the full page screenshot functionality. It now only takes screenshots of the current view.

We think the change was to do making an element fixed at the top of the page (a preview bar) and set to top so nothing appears above it.

[wswebcreation]

Hi @Phonesis

What the full page screenshot does is checking the height of the page and divide it into multiple small screenshots which will be stitched together. If the size of the page will give back that it's the same height of the viewport, then only 1 screenshot is made.

I've already released a beta of protractor-image-comparion. This is a complete refactor and and the calculation is a little bit different now.

You can install it with npm install protractor-image-comparison@beta

And find more info here, the config has become much easier, so please check the dos

[Phonesis]

Hi again, thanks for your reply.

I have tried the beta but still can't seem to be able to get full page screenshots working. Not sure what I am doing wrong. I am using 1024 by 768 res.

[wswebcreation]

Hi @Phonesis

The module uses document.documentElement.scrollHeight. Please check that in the browser you need to test. If that is the same size as the screenshot you are getting then that is the limitation.

[Phonesis]

Thanks, still struggling sadly. The issue seems to be occurring when a fixed element is added to a webpage. In our case, a preview bar at top with fixed attribute set so it is always at top when you scroll down page. Ever since this was added, we cannot obtain full page screenshots.

Out of interest, is there a way to obtain the diff image / png as a base64 string? Or some means to obtain the path to the image so we can embed it into the protractor html report?

[Phonesis]

Hi Wim,

Many thanks for this.

Out of interest, is there a current way to obtain the diff images as base64 strings? We run our tests in Jenkins and cannot access the diffs. I’d ideally like to be able to write them to a report.

[wswebcreation]

Hi @Phonesis

I didn't saw the previous response. The beta version already has the possibility to provide extra data as shown here

[Phonesis]

Thanks for info. I have tried adding returnAllCompareData: true as a plugin param but when i do the tests then fail with: AssertionError: expected [object Object] to be a number or a date

Have you got any examples of correct usage? I think it would be a great addition to have a means of obtaining the diff as a base64 string (for usage in reports)

[wswebcreation]

When you do that you will get back an object, you need to compare it with 1 of the keys, like misMatchPercentage

I'm not that fond of returning the base64 because that one will be huge and the diff is already stored. Maybe I can make a n option or something to do so

[Phonesis]

Thanks for that. Will try it out.

We are finding the baseline images always match when we run locally but always fail in Jenkins. Because we use an AWS node to run the tests we can't see the diff images so it's proving very hard to run these as part of CI.

[Phonesis]

Just an FYI I figured out how to access the files in Jenkins. So all sorted!

[wswebcreation]

Ahh, cool, tnx for the update.

[Nagadinesh]

@Phonesis Hey, we are also having same issue of tests passing locally and failing in CI. How did you resolve that?

[wswebcreation]

@Nagadinesh

Are the tests on your local machine and on the CI run on the same browser / OS combination? If not then that is the issue, each browser/os combination should have their own image

[Nagadinesh]

@wswebcreation Thanks that makes sense. CI is using linux and I have taken snapshots on mac. That might be the reason.

[cdlischynski]

@Phonesis, I am having a similar issue with my protractor image comparison test where I have a page that needs scroll and the captured image only contains the visible part of the screen. The remaining part of the page is blank. I've tried almost everything mentioned above and am wondering what solution ended up fixing your issue?

[Phonesis]

@Phonesis, I am having a similar issue with my protractor image comparison test where I have a page that needs scroll and the captured image only contains the visible part of the screen. The remaining part of the page is blank. I've tried almost everything mentioned above and am wondering what solution ended up fixing your issue?

We had an element that was designed to always be in a fixed position (at top of page even as user scrolls down) and this seemed to break the code the tool uses to capture sections of the page and form a screenshot with full spread.

So you might find that your site has a similar element. It will need removing.

[cdlischynski]

@Phonesis, I am having a similar issue with my protractor image comparison test where I have a page that needs scroll and the captured image only contains the visible part of the screen. The remaining part of the page is blank. I've tried almost everything mentioned above and am wondering what solution ended up fixing your issue?

We had an element that was designed to always be in a fixed position (at top of page even as user scrolls down) and this seemed to break the code the tool uses to capture sections of the page and form a screenshot with full spread.

So you might find that your site has a similar element. It will need removing.

I have inspected the page and there is nothing that has elements that are in fixed positions. I have even tried taking a full page comparison of this page and am still seeing the same behavior. The program is recognizing that it needs to scroll and it will scroll to the bottom of the page, but the areas that aren't visible in the initial page load aren't preset in the screenshot. Please see the attached picture for the results I'm getting.

[wswebcreation]

@cdlischynski

If you upgrade to this version it should be working again, see https://github.com/wswebcreation/protractor-image-comparison/releases/tag/v3.3.1

[cdlischynski]

@cdlischynski

If you upgrade to this version it should be working again, see https://github.com/wswebcreation/protractor-image-comparison/releases/tag/v3.3.1

I think chromedriver version 76 was the issue... My code would run properly with chromedriver version 75, but not with version 76.

[tomyam1]

Also having the issue where only the first screenshot is taken and the rest are blanks.

This seems to be because of that line:

https://github.com/wswebcreation/webdriver-image-comparison/blob/b3548802cec9d042586d1b0e6605b55da6984076/lib/methods/screenshots.ts#L283-L285

The problem is that innerHeight and screenshotSize.height aren't equal. In my case

innerHeight=638
screenshotSize={"height":637.6,"width":1010.4}

After changing the check to Math.round(screenshotSize.height) === innerHeight) it started taking the full page screenshot. There is now an empty narrow line though.

Could be that a simple solution would be to use the actual screenshotSize.height instead of innerHeight? Also to scroll by it instead of innerHeight

Edit: Tried it and it gives perfect result.

https://github.com/tomyam1/webdriver-image-comparison/commit/1e260765a96615a50036b10cffbd1fe5a2725077

[wswebcreation]

Hi @tomyam1

Thanks for the investigation, can you maybe create a PR for it?

[tomyam1]

Sure @wswebcreation Just sent a PR I tested it on Windows 10 / Chrome 77.

[wswebcreation]

Hi @tomyam1

Thanks for the PR, do you also have a demo site where I can verify it, I will then check it on all devices I have and release a new version asap.

[tomyam1]

Just replied on the PR