I was wondering if I can dynamically pass the suite name into the wdio service array here:

I am using browser stack to execute all of my visual regression tests in order to get multiple devices support. What I want to do is I want to pass the device name into the suite name as well so that when I am on the Spectre dashboard I can see the device that all of my current tests ran on. Is there any way for me to do that?

Hi,

I used wdio-novus-visual-regression-service VisualRegressionCompare.LocalCompare Method with ignoreComparison option set to "colors". My reference and test screenshots had only difference in colors. But it shows mismatch and provides diff screenshot.
Refer reference.png, test.png and diff.png in attached image. The top band and the numbers are highlighted in diff image.
If we are using ignoreComparison option "colors" then it should bypass the color difference and gives diff if any other difference exist(other than colors). I am not able to bypass the colors completely in image comparison. Please advise.

Hello,
I am initialising the service like so:

// wdio.conf.js

const novusVisualRegressionService = [
  'novus-visual-regression',
  {
    compare: new VisualRegressionCompare.LocalCompare({
      referenceName: (context) => `screenshots/${context.suite.title}-comparison screenshot.png`,
      screenshotName: (context) => `screenshots/${context.suite.title}-current screenshot.png`,
      diffName: (context) => `screenshots/${context.suite.title}-diff screenshot.png`,
      misMatchTolerance: 0.0,
    }),
  },
]
....
....
exports.config = {
  ...,
  services: [...whatever, novusVisualRegressionService],
  ...
}

I already have a reference screenshot to compare with in the correct path supplied above by

referenceName: (context) => `screenshots/${context.suite.title}-comparison screenshot.png`,

Then in the actual test file (I am using mocha), I am calling browser.checkViewport(). This does indeed produce a "diff" screenshot in the diffName returned path as provided in the service initialisation, but I was hoping that it also checks the actual difference between the 2 pictures (current and reference one). I even stretched it a bit further and tried to assert this call by calling chai.assert(browser.checkViewport(), 'Screenshot diff passes the threshold'), but I don't get any different output! Is this meant to be the case that the diff screenshot is only produced and that the the actual comparison between the reference screenshot and the current one is not happening at all? If so, can you advise towards the actual comparison method that you use in this case? Otherwise please do let me know of how I should proceed to fix this...

Regards,
Ioannis

While running the wdio script on mobile device, getting below error
browser.checkDocument is not a function.

Also, i tried using browser.checkViewport() and browser.checkElement(), but still getting same error.

Request you to check.

I tried to set screenshot size with width 360px or 414px but it is impossible and for these cases Chrome set width to 500px.

my config:
config.services = [
[
'novus-visual-regression',
{
compare: new VisualRegressionCompare.Spectre({
url: testEnv.spectreUrl,
project: 'WEB',
suite: 'Visual regression testing',
test: function getTest(context) {
return context.test.title;
},
browser: function getBrowser(context) {
return context.browser.name;
},
size: function getSize(context) {
return context.meta.viewport.width;
},
fuzzLevel: 30
}),
viewportChangePause: 3000,
viewports: [
{ width: 360, height: 640 },
{ width: 414, height: 736 },
{ width: 640, height: 480 }
],
}
]
];

Is it possible to make screenshots with a width less than 500px, maybe some workarounds?

Pulling forward from zinserjan/wdio-screenshot#94

Bug Report

Description

When taking a screenshot of a hookshot/pop-up element with dir='rtl', using a specific selector results in the following screenshot:

However, fullscreen is correct:

I think this is an issue with the wdio-screenshot's virtual scroll / element reposition for cropped screenshots. I've seen this behavior on IE popups recently as well.

Steps to Reproduce

1. Run terra-hookshot's hookshot-spec.js test. Specifically this test
2. Add the following assertions here

Terra.should.matchScreenshot('fullscreen', { selector: '#root' });
Terra.should.matchScreenshot('use_element', { selector: '#ContentOffset-bounds' });

3. See difference in the hook shot content position in the screenshots.

Environment

• Browser Name and Version: chrome 3.11-californium

Linked Issue: https://github.com/cerner/terra-toolkit/issues/278

Pulling forward from zinserjan/wdio-visual-regression-service#74

Currently when checkElement fails with the following error when an invalid selector is used to grab a screenshot. We should enhance the error message to provide meaningful information when an invalid selector is used.

Pulling forward from zinserjan/wdio-screenshot#87 (this should be huge if we could address this!! 😄 🙏 )

Summary

I would like to be able to pass a cropElement option (maybe a better name 😄) to the makeElementScreenshot(), such that when an element is larger than the viewport, a screenshot is taken of the visible portion of the element.

Currently, when using the wdio-visual-regression service, when using checkElement() and an element is larger than the viewport, the screenshot fails because the BaseStrategy attempts to scroll the element in view. The error outputs are a bit unclear as to why until digging through code.

Outputs typically received:

endX is out of range

or

endY is out of range

Use Cases

There are instances "chopping" the visible element is desired. For example, when creating a slide-panel React component, we close the panel, it is placed off-screen using css using transform: translate3d(100%, 0, 0); and then is set to visibility: hidden;. Using checkElement(), we cannot take a screenshot.

Solution

Add a screenshot option to return the the documentX and documentY values if the start/end x/y values are too large.

Hi,
Can we add capability to remove or hide elements while comparison instead of taking all screenshots with remove or hide elements and then comparing.
The baseline and test screenshot should contains all elements . Only the Diff image shows application with hidden and removed elements as provided in browser.checkDocument/checkViewport/CheckElement methods.

Please advise for this support.

Hi
I am getting error "The value of "value" is out of range. It must be >= 0 and <= 4294967295. Received -23" while taking screenshots for some screens. The novus service does not captures the screenshots and throws this error.
Please advise for this error and how we can fix this.

I tried to make visual tests with Chrome 87 on Android 9, but screenshots failed with an error.

In test used the following command to make screenshots but with same result:
...
browser.checkViewport([{}]);
browser.checkDocument([{}]);
...

Service config:
[
'novus-visual-regression',
{
compare: new VisualRegressionCompare.Spectre({
url: testEnv.spectreUrl,
project: 'xBees Mobile',
suite: 'Visual regression testing',
test: function getTest(context) {
return context.test.title;
},
browser: function getBrowser(context) {
return context.browser.name;
},
size: function getSize(context) {
return context.meta.orientation;
},
fuzzLevel: 30
}),
viewportChangePause: 2000,
orientations: ['portrait'],
}
]

Error:
RangeError [ERR_OUT_OF_RANGE]: The value of "offset" is out of range. It must be >= 0 and <= 1918076. Received 1918080
at boundsError (internal/buffer.js:77:9)
at Buffer.readUInt32BE (internal/buffer.js:300:5)
at Jimp. (D:\MobileTeam\Projects\autotesting\node_modules\wdio-novus-visual-regression-service\node_modules@jimp\plugin-crop\dist\index.js:43:37)
at scan (D:\MobileTeam\Projects\autotesting\node_modules\wdio-novus-visual-regression-service\node_modules@jimp\utils\dist\index.js:53:9)
at Jimp.scanQuiet (D:\MobileTeam\Projects\autotesting\node_modules\wdio-novus-visual-regression-service\node_modules@jimp\core\dist\index.js:1262:32)
at Jimp.cropQuiet (D:\MobileTeam\Projects\autotesting\node_modules\wdio-novus-visual-regression-service\node_modules@jimp\plugin-crop\dist\index.js:42:12)
at Jimp. [as crop] (D:\MobileTeam\Projects\autotesting\node_modules\wdio-novus-visual-regression-service\node_modules@jimp\core\dist\index.js:1176:23)
at _callee$ (D:\MobileTeam\Projects\autotesting\node_modules\wdio-novus-visual-regression-service\lib\utils\image\jimp.js:78:19)
at tryCatch (D:\MobileTeam\Projects\autotesting\node_modules\regenerator-runtime\runtime.js:63:40)
at Generator.invoke [as _invoke] (D:\MobileTeam\Projects\autotesting\node_modules\regenerator-runtime\runtime.js:293:22)
at Browser.runCommandWithHooks (D:\MobileTeam\Projects\autotesting\node_modules@wdio\sync\build\wrapCommand.js:65:24)
at Browser.checkViewport (D:\MobileTeam\Projects\autotesting\node_modules@wdio\sync\build\wrapCommand.js:44:44) at Browser.next [as checkViewport] (D:\MobileTeam\Projects\autotesting\node_modules@wdio\utils\build\monad.js:94:33)
at Context. (D:\MobileTeam\Projects\autotesting\src\screentests\browser\vrt.js:15:17)
at Context.executeSync (D:\MobileTeam\Projects\autotesting\node_modules@wdio\sync\build\index.js:25:22)
at D:\MobileTeam\Projects\autotesting\node_modules@wdio\sync\build\index.js:46:68

Full logs:
logs.txt

Re-logging this issue from zinserjan/wdio-visual-regression-service#83

Often times new screenshots are not generated locally and checked in. This is not caught because our Travis CI builds create new reference screenshots are generated with no indication in the comparison results. It would be helpful to check if for a isNewScreenshot result boolean to assert all screenshots have been properly generated.

The BaseCompare would need changed here

The LocaleCompare would need changes in these places:

1. When new
2. When exists here and here

Hi,

I have to hide an element inside an iFrame while doing visual verification.
On using the method browser.checkViewport({hide: [$('[class=myclass])]}), the element does not get hidden.

Please advise how can we use this to hide element inside an iFrame.