browser.checkDocument only takes a screenshot of the viewport

[MatteoVH]

When using the exposed checkDocument function only the viewport is taken a screenshot of. I would expect this to take a screenshot of the entire page so that I can check if visual regressions are present past the end of the current viewport. Instead this function seems to behave the same as checkViewport. Checking the source seems to confirm this.

Here's some sample code from my step definition (Cucumber) for ensuring the document hasn't visually regressed:

/**
* Check the screenshot of the page against the existing baseline
* @param  {Function} done        Function to execute when finished
*/
module.exports = (done) => {
    const results = browser.checkDocument();
    results.forEach((result) => {
      expect(result.isWithinMisMatchTolerance).to.be.true;
    });
    done();
};

This works for the viewport but doesn't check changes beyond its boundary.

[emilyrohrbough]

I have also noticed this behavior. Is there a solution in the works for this issue?

[MatteoVH]

It looks like this bug happens if you have certain css properties set, like a 100% height on body or something like that. Check if you're doing any viewport locking in CSS.

@emilyrohrbough

[emilyrohrbough]

Interesting. We are setting 100% heigh on the body.

[tryenc]

@emilyrohrbough and @MatteoVH, were you able to verify that 100% height on the body was the issue? I ran into a slightly similar problem. The difference for me was that checkDocument was checking until the very bottom of the page (meaning that it was scrolling part of the way there, but not the whole way). I believe that checkDocument does something like check the height of the window or the document prior to taking the screenshot and then it uses that value to determine how far it will need to scroll to capture the entire page. In my case, at the point that the height was being determined, the page hadn't finished loading, so that checkDocument was utilizing a height that was smaller than the height of the fully rendered page. To resolve this, I had to more intelligently figure out when the page had fully loaded and delay the screenshot until then. Hope this helps!

[MatteoVH]

For me, the CSS locking was the issue, but that's also a good point to keep in mind.