"Error: endY is out of range" when using widths that are slightly the same

[mansn]

I'm using "wdio-visual-regression-service": "0.4.0". The problem below doesn't occur on version 0.2.0.

I'm trying browser.checkElement('#main', widths: [360, 375]); on the following page: http://www.ving.se/inspiration/asien/thailand/siam

The test goes fine for the first 360px screenshot, but it fails on the second 375px test. It looks like it fails straight away when starting with 375px. However, if I change the widths to like [360, 1024], then it works without any issues.

Any idea why this is?

Error log:

endY is out of range
running chrome
Error: endY is out of range
    at Object.Future.wait (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\fibers\future.js:449:15)
    at Object.checkElement (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\wdio-sync\build\index.js:345:27)
    at Context.<anonymous> (C:/Users/x/z/y/GitHub/UMBAutotest/tests/Visual/StoryNodeVisualTest.js:21:24)
    at C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\wdio-sync\build\index.js:649:20
    - - - - -
    at MergeScreenshotStrategy.setScrollArea (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\wdio-screenshot\lib\utils\strategies\BaseStrategy.js:48:15)
    at makeAreaScreenshot$ (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\wdio-screenshot\lib\modules\makeAreaScreenshot.js:77:30)
    at tryCatch (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\regenerator-runtime\runtime.js:62:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\regenerator-runtime\runtime.js:336:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (C:\Users\x\z\y\z\UMBAutotest\node_modules\regenerator-runtime\runtime.js:95:21)
    at tryCatch (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\regenerator-runtime\runtime.js:62:40)
    at invoke (C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\regenerator-runtime\runtime.js:138:20)
    at C:\Users\x\z\y\GitHub\UMBAutotest\node_modules\regenerator-runtime\runtime.js:146:13
    at process._tickCallback (internal/process/next_tick.js:103:7)

[zinserjan]

Sorry for the late response.

I'm using "wdio-visual-regression-service": "0.4.0". The problem below doesn't occur on version 0.2.0.

The version of wdio-visual-regression-service is not important, cause the screenshot taking funtionally is provided by wdio-screenshot.

I can't reproduce your problem. Works fine for me. But this is may due to different browser versions...

Can you start your tests with the environment variable `DEBUG=wdio-screenshot:*`` and post the logs?

[mansn]

No problem. I'll re-run this as soon as I can and get the logs for you.

@zinserjan Yes, you are right. Maybe this issue belongs to wdio-screenshot. I could see that "wdio-visual-regression-service": "0.2.0" is using wdio-screenshot version 0.1.0. And "wdio-visual-regression-service": "0.4.0" is using wdio-screenshot version 0.2.0.

Maybe I also should try using the latest version of wdio-screenshot, with the latest version of wdio-visual-regression-service.

I'll get back to you, thanks!

[lj9142]

I'm getting the same error message but for only one section which is the footer and it is happening on both pages in my test.

I am using the latest version of both wdio-screenshot and wdio-visual-regression-service.

[mehdivk]

Hi, I got same error. Here with some information

  wdio-screenshot:image Use image processing library: GraphicsMagick +0ms
  wdio-screenshot:image Use image processing library: GraphicsMagick +0ms
  wdio-screenshot:image Use image processing library: GraphicsMagick +88ms
  wdio-screenshot:makeElementScreenshot start element screenshot +4s
  wdio-screenshot:beforeScreenshot hide scrollbars +1ms
  wdio-screenshot:beforeScreenshot trigger resize event to allow js components to resize properly +11ms
  wdio-screenshot:beforeScreenshot scroll back to start x: 0, y: 0 +15ms
  wdio-screenshot:beforeScreenshot wait 200 ms for browser render +10ms
  wdio-screenshot:makeAreaScreenshot requested a screenshot for the following area: {"startX":16,"startY":485,"endX":752,"endY":873} +228ms
  wdio-screenshot:makeAreaScreenshot detected screenDimensions {"html":{"scrollHeight":758,"clientWidth":768,"clientHeight":758,"offsetHeight":758,"scrollWidth":768},"window":{"innerWidth":768,"orientation":0,"screenWidth":1440,"innerHeight":758,"pixelRatio":2,"screenHeight":900},"body":{"scrollHeight":758,"offsetHeight":758}} +11ms
  wdio-screenshot:ScreenshotStrategyManager use merge viewport strategy +1ms

this is my test file

import assert from 'assert';
const widths = [768];

function assertDiff(results) {
  results.forEach(result => assert.ok(result.isExactSameImage));
}

describe('insights', () => {
  it('conversions', () => {
    browser.url('/my-page');

    /* move scroll to top of the element*/
    const target = '.just-a-class-name-that-exist';
    const element = $(target);
    element.scroll();

    const report = browser.checkElement(target, {
      widths,
    });
    assertDiff(report);
  });
});

same code works for 1600 as width,

[mehdivk]

This log {"startX":16,"startY":485,"endX":752,"endY":873} is kinda accurate and points to the element that I have on page.

[mehdivk]

And looking at height of the viewport, it makes sense why we get an error, 873 is greater than 758

{  
   "html":{  
      "scrollHeight":758,
      "clientWidth":768,
      "clientHeight":758,
      "offsetHeight":758,
      "scrollWidth":768
   },
   "window":{  
      "innerWidth":768,
      "orientation":0,
      "screenWidth":1440,
      "innerHeight":758,
      "pixelRatio":2,
      "screenHeight":900
   },
   "body":{  
      "scrollHeight":758,
      "offsetHeight":758
   }
}