Visual Regression -- "value" argument is out of bounds when scrolling at bottom

[KenzoM]

The problem

I'm facing issues when I am trying to take screenshots and applying visual regression (with multiple different viewports to check desktop and mobile view) at the bottom of a page.

This is the error I am faced with: TypeError: "value" argument is out of bounds

test.js

describe('bottom scroll', () => {
	beforeEach(() => {
		browser.url('http://webdriver.io')
	})

	it('should take visual regression test at footer', () => {
		browser.scroll('footer')
		browser.checkViewport()
	})

})

wdio.js

var path = require('path');
var VisualRegressionCompare = require('wdio-visual-regression-service/compare');

function getScreenshotName(basePath) {
  return function(context) {
    var type = context.type;
    var testName = context.test.title;
    var browserVersion = parseInt(context.browser.version, 10);
    var browserName = context.browser.name;
    var browserViewport = context.meta.viewport;
    var browserWidth = browserViewport.width;
    var browserHeight = browserViewport.height;

    return path.join(basePath, `${testName}_${type}_${browserName}_v${browserVersion}_${browserWidth}x${browserHeight}.png`);
  };
}


exports.config = {

    specs: [
        './test/specs/**/*.js'
    ],

    exclude: [

    ],

    maxInstances: 10,

    capabilities: [{
        maxInstances: 5,
        browserName: 'chrome',
    }],
    sync: true,

    logLevel: 'silent',

    coloredLogs: true,

    bail: 0,

    screenshotPath: './errorShots/',

    baseUrl: '/',

    waitforTimeout: 10000,

    connectionRetryTimeout: 90000,

    connectionRetryCount: 3,

    services: ['visual-regression'],
    visualRegression: {
        compare: new VisualRegressionCompare.LocalCompare({
            referenceName: getScreenshotName(path.join(process.cwd(), 'screenshots/reference')),
            screenshotName: getScreenshotName(path.join(process.cwd(), 'screenshots/screen')),
            diffName: getScreenshotName(path.join(process.cwd(), 'screenshots/diff')),
            misMatchTolerance: 0.01,
        }),
        viewportChangePause: 300,
        viewports: [{ width: 320, height: 480 }, { width: 480, height: 320 }, { width: 1024, height: 768 }],
    },

    framework: 'jasmine',

    reporters: ['dot','spec'],

    // Options to be passed to Jasmine.
    jasmineNodeOpts: {
        //
        // Jasmine default timeout
        defaultTimeoutInterval: 1000000,
        //
        // The Jasmine framework allows interception of each assertion in order to log the state of the application
        // or website depending on the result. For example, it is pretty handy to take a screenshot every time
        // an assertion fails.
        expectationResultHandler: function(passed, assertion) {
            // do something
        }
    },

    port: '9515',
    path: '/',
    
}

It seems to work fine when I use visual regression at the top of the page, but when I scroll to the bottom it breaks.

I've managed to take screenshot with saveScreenShot() API, and that worked fine, but not much luck on the checkViewPort()

Environment

• WebdriverIO version: 4.8.0
• Node.js version: 6.6
• Standalone mode or wdio testrunner: chromedriver
• if wdio testrunner, running synchronous or asynchronous tests:
• Additional wdio packages used (if applicable): wdio-visual-regression-service

Link to Selenium/WebdriverIO logs

1) mobile view bottom scrollsuite1 should take visual regression test at footer:
TypeError: "value" argument is out of bounds
running chrome
TypeError: "value" argument is out of bounds
    at checkInt (buffer.js:1011:11)
    at Buffer.writeUInt32BE (buffer.js:1104:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickDomainCallback (internal/process/next_tick.js:122:9)

Please remember that, with sample code; it's easier to reproduce bug and much faster to fix it.

[klamping]

I think the root issue is in the 'wdio-screenshot' repo, specifically this line:
https://github.com/zinserjan/wdio-screenshot/blob/master/src/modules/makeViewportScreenshot.js#L20

Can you try recreating the issue just using that service?

[KenzoM]

@klamping
Yep, just tested out using wdio-screenshot and got the same error

[klamping]

I guess move this issue over to that repo and see if you can isolate the root cause.

[KenzoM]

@klamping
done: zinserjan/wdio-screenshot#80