compositeImage is diffing scrollbars and failing tests

[morganfeeney]

Whenever I use compositeImage I get failed tests due to the browser scrollbar being the only difference between reference and test images.

Example diff image attached:

See configuration below:

Output of gemini --version: 4.18.1 ...

Contents of .gemini.js file:

module.exports = {
    rootUrl: 'file:///Users/uidesign1/Documents',
    gridUrl: 'http://127.0.0.1:4444/wd/hub',
    compositeImage: true,
    calibrate: false,

    browsers: {
        chrome_lg: {
          windowSize: '1200x1024',
            desiredCapabilities: {
                browserName: 'chrome'
            }
        },
        chrome_md: {
          windowSize: '900x1024',
            desiredCapabilities: {
                browserName: 'chrome'
            }
        }
    }
};

Test source code:

gemini.suite('box-test', (suite) => {
    suite.setUrl('/workspace/gemini-tests/index.html')
        .setCaptureElements('body')
        .capture('plain');
});

Command used to run the test:

gemini update

gemini test --reporter html --reporter flat

[sipayRT]

hi. You can hide scrollbar on your page with CSS:

::-webkit-scrollbar
{
    width: 0 !important;
}

but it works only in chrome

[morganfeeney]

Hi, I have a bit of JS which does the trick:

gemini.suite('My account', (suite) => {
    suite.setUrl('/templates/my-account/account-summary.html')
    .before(function(actions, find) {
      actions.executeJS(function() {
        var style = document.createElement('style');
        var head = document.querySelector('head');
        var scrollBarStyle = document.createTextNode('::-webkit-scrollbar {display: none;}');
        head.appendChild(style);
        style.appendChild(scrollBarStyle);
      })
    })
    .setCaptureElements('body')
    .capture('plain');
});

I don't want to start changing the HTML documents by hiding the scrollbars as they are used for more than testing. Therefore a gemini/JS approach works best in this case.

I was under the impression that calibrate was a setting that would remove the browser UI, is this not the case and I have misunderstood the documentation?

[sipayRT]

I was under the impression that calibrate was a setting that would remove the browser UI, is this not the case and I have misunderstood the documentation?

calibration needs only for refinement real screen sizes for some browsers (for example, ie8). You can switch it off for Chrome.

[morganfeeney]

Thanks, I have a couple of questions if you don't mind ;)

• Has this ever been an issue before? I expect this to be a recurring problem for lots of users.
• How can I make the following JS function available to Gemini, e.g.

// Create function outside of suite scope
function scrollBarStyle() {
  var style = document.createElement('style');
  var head = document.querySelector('head');
  var scrollBarStyle = document.createTextNode('::-webkit-scrollbar {display: none;}');
  head.appendChild(style);
  style.appendChild(scrollBarStyle);  
}
// Then call function in gemini suite .before() function
gemini.suite('My account', (suite) => {
    suite.setUrl('/templates/my-account/account-summary.html')
    .before(function(actions, find) {
      actions.executeJS(function(window) {
       window.scrollBarStyle();
      })
    })
    .setCaptureElements('body')
    .capture('plain');
});

?

[sipayRT]

you can pass your function to the executeJS:

function scrollBarStyle(window) {
    some actions here 
}

gemini.suite('My account', (suite) => {
    suite
        .setUrl('/templates/my-account/account-summary.html')
        .before((actions) => actions.executeJS(scrollBarStyle))
        .setCaptureElements('body')
        .capture('plain');
});

[morganfeeney]

Thanks for helping with the JS.

[morganfeeney]

I am still concerned about the scrollbars being an issue for others, I've now solved this problem but had to create a solution. Is there any documentation explaining the issue, or should there be, or can it be solved in another way?

[sipayRT]

yeah, I think we can add some good practice and examples to the wiki

[maapteh]

On other browsers I can't hide the scrollbar. Since we do css regression tests also for browsers (like IE), Gemini will only work on Chrome (with above hack) when you do full page regression tests. Is there a solid solution?

[sipayRT]

On other browsers I can't hide the scrollbar

you can also use overflow-y: hidden; instead

[ballwood]

@morganfeeney we had this problem recently. the issue surfaced on chrome on windows when emulating iPhone devices, Mac's were fine.

Managed to solve it by looking at the chrome driver source here and working out some of the other param names for the options for mobileEmulation that weren't visible on a first google: https://github.com/bayandin/chromedriver/blob/master/capabilities.cc#L152.

Seems that anything with touch enabled will cause the bar to be shown. so we set mobile: false & touch: false. Seemed to work.

chrome_lg: {
    desiredCapabilities: {
        browserName: 'chrome'
        chromeOptions: {
            mobileEmulation: {
                deviceMetrics: {
                    width: 1024,
                    height: 768,
                    mobile: false,
                    touch: false
                }
            }
         }
    }
}

Try that and see if it works, I know its not exactly what you're trying to do but may work. I wonder if the machine its running on is touch enabled, I would assume that would trigger the scroll bar.

[withinsight]

This is very much still an issue in Chrome/OS X, and should be exposed as a configurable option for all Gemini users. We can't use Gemini currently because scrollbars appear as diffs.

[morganfeeney]

@withinsight, I now use Backstop JS. By default this issue is non-existent.

[brondsem]

The CSS workarounds don't work for a touch device, since that type of scrollbar cannot be hidden: https://stackoverflow.com/questions/40733385/hiding-webkit-scrollbar-when-overflow-scrolling-touch-is-enabled

Setting deviceMetrics to touch: false seems like a way to deal with that, but I am using a named device like deviceName: "Nexus 5" because that includes a pixelRatio value. And I haven't been able to successfully set an explicit pixelRatio in deviceMetrics

[j0tunn]

You can set screenshotDelay option in your config: https://github.com/gemini-testing/gemini/blob/master/doc/config.md