resizeDimensions not working

wbigno commented 2 months ago

Environment (please complete the following information):

Node.js version: 22.2.0
NPM version: 10.7.0
Browser name and version: Chrome 126
Platform name and version: Windows 11
WebdriverIO version: 8.39.1
@wdio/visual-service version: 5.1.1

Config of WebdriverIO + @wdio/visual-service

[
            'visual',
            {
                baselineFolder: join(process.cwd(), `visual-regression/${process.env.DOM_BUILD_ENV}/`),
                formatImageName: '{browserVersion}-{tag}',
                screenshotPath: join(process.cwd(), `tmp/${process.env.DOM_BUILD_ENV}/`),
                misMatchTolerance: 0.05,
                savePerInstance: true,
                autoSaveBaseline: true,
                blockOutStatusBar: true,
                blockOutToolBar: true,
                autoElementScroll: false,
                fullPageScrollTimeout: '5000',
                disableCSSAnimation: true
            }
        ]

Describe the bug when added the method, resizeDimensions to the function, it is no longer working, the additional spacing is not being added to the element being captured.

To Reproduce add this to the checkElement function

await browser.checkElement(
                await accordionComponent.accordionComponent[0],
                'Accordion Component Striped BG Page-LG',
                {
                    resizeDimensions: { top: 20, bottom: 20, right: 20, left: 20 }
                }
            )
        ).to.be.below(0.55);

[Include code or an example repository that can easily be set up]

Expected behavior the additional pixels should be added as noted.

Log

2024-07-24T16:28:04.857Z INFO webdriver: RESULT null
2024-07-24T16:28:04.857Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:04.857Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:05.359Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:05.359Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:05.359Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2024-07-24T16:28:05.360Z INFO webdriver: [POST] http://ondemand.us-west-1.saucelabs.com:443/wd/hub/session/cd47e3fd465b47f9a372462aac77fbdb/execute/sync
2024-07-24T16:28:05.360Z INFO webdriver: DATA { script: 'getScreenDimensions(...) [1262 bytes]', args: [] }
2024-07-24T16:28:05.746Z INFO webdriver: RESULT {
  dimensions: {
    body: { offsetHeight: 4885, scrollHeight: 4885 },
    window: {
      isLandscape: true,
      devicePixelRatio: 1,
      outerWidth: 1440,
      innerWidth: 1424,
      outerHeight: 1500,
      screenHeight: 1600,
      innerHeight: 1353,
      screenWidth: 2560
    },
    html: {
      clientWidth: 1424,
      offsetHeight: 4885,
      scrollWidth: 1424,
      clientHeight: 1353,
      scrollHeight: 4885
    }
  }
}
2024-07-24T16:28:05.746Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:05.746Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:05.746Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:05.746Z INFO webdriver: COMMAND takeElementScreenshot("f.6A3FF1994730B909A8679A79F9DB19A0.d.F8FEA472058AFD333693BC4BADE1D740.e.101")
2024-07-24T16:28:05.747Z INFO webdriver: [GET] http://ondemand.us-west-1.saucelabs.com:443/wd/hub/session/cd47e3fd465b47f9a372462aac77fbdb/element/f.6A3FF1994730B909A8679A79F9DB19A0.d.F8FEA472058AFD333693BC4BADE1D740.e.101/screenshot
2024-07-24T16:28:07.154Z INFO webdriver: RESULT iVBORw0KGgoAAAANSUhEUgAABPAAAAKKCAIAAAA8yDLJAAAAAXNSR0IArs4c6...
2024-07-24T16:28:07.155Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:07.157Z WARN @wdio/visual-service:webdriver-image-comparison:images: 
#####################################################################################
 THE RESIZE DIMENSION LEFT=20 MADE THE CROPPING GO OUT OF THE SCREEN SIZE
 RESULTING IN A LEFT CROP POSITION=-20.
 THIS HAS BEEN DEFAULTED TO '0'
#####################################################################################

2024-07-24T16:28:07.158Z WARN @wdio/visual-service:webdriver-image-comparison:images: 
#####################################################################################
 THE RESIZE DIMENSION RIGHT=200 MADE THE CROPPING GO OUT OF THE SCREEN SIZE
 RESULTING IN A RIGHT CROP POSITION=1464.
 THIS HAS BEEN DEFAULTED TO '1264'
#####################################################################################

2024-07-24T16:28:07.158Z WARN @wdio/visual-service:webdriver-image-comparison:images: 
#####################################################################################
 THE RESIZE DIMENSION TOP=200 MADE THE CROPPING GO OUT OF THE SCREEN SIZE
 RESULTING IN A TOP CROP POSITION=-200.
 THIS HAS BEEN DEFAULTED TO '0'
#####################################################################################

2024-07-24T16:28:07.158Z WARN @wdio/visual-service:webdriver-image-comparison:images: 
#####################################################################################
 THE RESIZE DIMENSION BOTTOM=20 MADE THE CROPPING GO OUT OF THE SCREEN SIZE
 RESULTING IN A BOTTOM CROP POSITION=670.
 THIS HAS BEEN DEFAULTED TO '650'
#####################################################################################

2024-07-24T16:28:07.256Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:07.257Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:07.257Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2024-07-24T16:28:07.257Z INFO webdriver: [POST] http://ondemand.us-west-1.saucelabs.com:443/wd/hub/session/cd47e3fd465b47f9a372462aac77fbdb/execute/sync
2024-07-24T16:28:07.257Z INFO webdriver: DATA { script: 'hideScrollBars(...) [186 bytes]', args: [ false ] }
2024-07-24T16:28:07.530Z INFO webdriver: RESULT null
2024-07-24T16:28:07.530Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:07.530Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:07.530Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:07.530Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:07.530Z INFO webdriver: COMMAND executeScript(<fn>, <object>)
2024-07-24T16:28:07.530Z INFO webdriver: [POST] http://ondemand.us-west-1.saucelabs.com:443/wd/hub/session/cd47e3fd465b47f9a372462aac77fbdb/execute/sync
2024-07-24T16:28:07.530Z INFO webdriver: DATA {
  script: 'removeElementFromDom(...) [185 bytes]',
  args: [ 'pic-css' ]
}
2024-07-24T16:28:08.125Z INFO webdriver: RESULT null
2024-07-24T16:28:08.125Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:08.125Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:08.434Z WARN @wdio/visual-service:webdriver-image-comparison:images: 
#####################################################################################
 WARNING:
 There was a difference. Saved the difference to
 /Users/t85kzfl/Desktop/GIT/nyl-aem-automation/webdriverio/tmp/stg_nyl/diff/desktop_chrome/126.0.6478.57-Accordion_Expanded_State-Desktop.png
#####################################################################################
2024-07-24T16:28:08.434Z DEBUG @wdio/utils:shim: Finished to run "afterCommand" hook in 0ms
2024-07-24T16:28:08.434Z INFO webdriver: RESULT 21.24
2024-07-24T16:28:08.435Z INFO webdriver: COMMAND executeScript("sauce:context=    at Context.<anonymous> (file:///Users/t85kzfl/Desktop/GIT/nyl-aem-automation/webdriverio/test/specs/nyl/component/test/accordion-desktop-visual-regression.spec.js:21:17)", <object>)
2024-07-24T16:28:08.435Z INFO webdriver: COMMAND takeScreenshot()
2024-07-24T16:28:08.435Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:08.435Z DEBUG @wdio/utils:shim: Finished to run "afterTest" hook in 0ms
2024-07-24T16:28:08.435Z DEBUG @wdio/utils:shim: Finished to run "beforeCommand" hook in 0ms
2024-07-24T16:28:08.436Z INFO webdriver: COMMAND executeScript("sauce:context=AssertionError: expected 21.24 to be below 0.55", <object>)
2024-07-24T16:28:08.436Z INFO webdriver: [POST] http://ondemand.us-west-1.saucelabs.com:443/wd/hub/session/cd47e3fd465b47f9a372462aac77fbdb/execute/sync
2024-07-24T16:28:08.436Z INFO webdriver: DATA {
  script: 'sauce:context=    at Context.<anonymous> (file:///Users/t85kzfl/Desktop/GIT/nyl-aem-automation/webdriverio/test/specs/nyl/component/test/accordion-desktop-visual-regression.spec.js:21:17)',
  args: []
}
2024-07-24T16:28:08.436Z INFO webdriver: [GET] http://ondemand.us-west-1.saucelabs.com:443/wd/hub/session/cd47e3fd465b47f9a372462aac77fbdb/screenshot
2024-07-24T16:28:08.436Z INFO webdriver: [POST] http://ondemand.us-west-1.saucelabs.com:443/wd/hub/session/cd47e3fd465b47f9a372462aac77fbdb/execute/sync
2024-07-24T16:28:08.436Z INFO webdriver: DATA {
  script: 'sauce:context=AssertionError: expected 21.24 to be below 0.55',
  args: []
}

Additional context this was working fine about 3-4 weeks back, but has recently stopped. We have tried to update to the latest versions but it did not resolve the issues. We run all of our tests on Sauce labs.

wswebcreation commented 2 months ago

Fixed with https://github.com/webdriverio/visual-testing/pull/449, see https://github.com/webdriverio/visual-testing/releases/tag/%40wdio%2Fvisual-service%405.2.1

wbigno commented 2 months ago

Doesn’t seem to resolve issue,

RangeError in "INT_NYL Accordion Expanded Visual Validation on Dektop.should compare Expanded image with a baseline Compare on Desktop" RangeError [ERR_OUT_OF_RANGE]: The value of "size" is out of range. It must be >= 0 && <= 9007199254740991. Received -563328 at Function.allocUnsafe (node:buffer:402:3) at Jimp.cropQuiet @./plugin-crop/dist/index.js:35:29) at Jimp. [as crop] @./core/dist/index.js:950:23) at cropAndConvertToDataURL (file:///Users/t85kzfl/Desktop/GIT/nyl-aem-automation/webdriverio/node_modules/webdriver-image-comparison/dist/methods/images.js:150:32) at async saveWebElement (file:///Users/t85kzfl/Desktop/GIT/nyl-aem-automation/webdriverio/node_modules/webdriver-image-comparison/dist/commands/saveWebElement.js:83:32) at async checkWebElement (file:///Users/t85kzfl/Desktop/GIT/nyl-aem-automation/webdriverio/node_modules/webdriver-image-comparison/dist/commands/checkWebElement.js:22:57)

#################################################################################### THE RESIZE DIMENSION TOP=20 MADE THE CROPPING GO OUT OF THE SCREEN SIZE RESULTING IN A TOP CROP POSITION=-798. THIS HAS BEEN DEFAULTED TO '0' #####################################################################################

Ran the same code that I provided in the bug, and go this after upgrading to 5.2.1

On Aug 4, 2024, at 3:10 AM, Wim Selles @.***> wrote:

Closed #438 https://github.com/webdriverio/visual-testing/issues/438 as completed.

— Reply to this email directly, view it on GitHub https://github.com/webdriverio/visual-testing/issues/438#event-13753860782, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH4A4PAOJ5D7MNQQ3B2RWHDZPXHX5AVCNFSM6AAAAABLM4FOSOVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJTG42TGOBWGA3TQMQ. You are receiving this because you authored the thread.

wswebcreation commented 2 months ago

@wbigno it "is" resolved see also the new error 😅 . It works on my machine now, can you provide a reproducible example because it might be related to how the element has been built and the data the module gets back from the element/page

webdriverio / visual-testing

resizeDimensions not working #438