webdriverio / visual-testing Goto Github PK

WebdriverIO version: 5.7.15
Mode: WDIO Testrunner
If WDIO Testrunner, running sync/async: sync
Node.js version: 10.15.1
NPM version: 6.4.1
Platform name and version: Browserstack

{
"os_version": "9.0",
"device": "Google Pixel 3",
"real_mobile": "true",
"browserstack.appium_version": "1.12.1"
}

Additional wdio packages used (if applicable): "@wdio/browserstack-service": "^5.7.13", "wdio-image-comparison-service": "^1.1.0"
wdio.conf

services: [["image-comparison",
{
baselineFolder: join(process.cwd(), "./visualRegressionReferenceImages/"),
formatImageName: "{logName}-{tag}-{width}x{height}",
screenshotPath: join(process.cwd(), ".tmp/"),
clearRuntimeFolder: true,
savePerInstance: true,
autoSaveBaseline: true,
blockOutStatusBar: true,
blockOutToolBar: true
}], "browserstack"],

Describe the bug

Visual Regression Test:
expectation:
I want to scroll to an element and save the layout of the element as an image.

Problem only on Mobile:
The image is stored incorrectly. Browserstack indicates that the image was properly saved, but a postponed image is saved in the workspace.
Problem only occurs when several ITs running. If only one IT is running then it will work.

Element:".prod-info__box-container.js-prod-info-box"
URL: https://www.mytoys.de/birkmann-kekskunst-zum-selbermachen-4283014.html

Image Workspace

Image Browserstack

approach:
-browser.pause(3000), before save Picture
-Instead of searching at the search bar, we went directly to the specific URL.

To Reproduce

element.scrollIntoView();
browser.saveElement(element, imageNameMobile, {});

browser.checkElement(element, imageNameMobile, {});

Environment (please complete the following information):
Node.js version: 14.5.0
NPM version: 6.14.5
Browser name and version: Chrome 87
Platform name and version: mac
WebdriverIO version: 6.10.11
wdio-image-comparison-service version: 2.0.0

const config = {

user: process.env.BROWSERSTACK_USER,
key: process.env.BROWSERSTACK_KEY,

services: [
['image-comparison',
// The options
{
baselineFolder: BASELINE_IMAGE_FOLDER,
formatImageName: '{tag}-{logName}-{width}x{height}',
screenshotPath: ALL_IMAGE_FOLDER,
savePerInstance: true,
autoSaveBaseline: true,
blockOutStatusBar: true,
blockOutToolBar: true,
clearRuntimeFolder: true,
},
],
],

exclude: [
],
specs: [
'./tests/**/*.spec.js',
],
specFileRetries: 2,

maxInstances: 50,

capabilities: [
{
browserName: 'chrome',
browser_version: '87',
os: 'OS X',
os_version: 'Catalina',
acceptInsecureCerts: true,
resolution: '1280x960',
realMobile: false,
local: false,
buildName: buildDescription,
projectBrowserName: SCREEN_SIZE.DESKTOP.type,
projectName,
},
{
browserName: 'chrome',
'goog:chromeOptions': {
mobileEmulation: { deviceName: 'iPhone X' },
},
browser_version: '87',
os: 'OS X',
os_version: 'Catalina',
acceptInsecureCerts: true,
resolution: '1280x960',
realMobile: false,
local: false,
buildName: buildDescription,
projectBrowserName: SCREEN_SIZE.IPHONE_X.type,
projectName,
},
],
logLevel: 'error',

bail: 0,

baseUrl: 'http://localhost:3000',
waitforTimeout: 20000,
connectionRetryTimeout: 120000,
connectionRetryCount: 3,

framework: 'mocha',
reporters: ['spec',
['junit', {
outputDir: JUNIT_REPORTS,
outputFileFormat() { // optional
return 'visualTestRuns.xml';
},
}],
],

mochaOpts: {
// Babel setup
compilers: ['js:@babel/register'],
ui: 'bdd',
timeout: 900000,
}
beforeSession(config, capabilities, specs) { // eslint-disable-line
global.assert = chai.assert;
},
};

Describe the bug

Given i run visual test runs using webdriverIO and image comparison library on browserstack or locally and parallel to each test runs ( ~50 runs at once)
when any test spec fails,
then i notice all the screenshots from the actual folder are deleted

To Reproduce
Use the config above to get one of two test to fail and check the actual folder

Expected behavior
Expected only the test specific screenshot to be deleted or the actual folder backed up as i cannot view was was test verified against ?

Log

Additional context
Add any other context about the problem here.

• Node.js version: 16.8.0
• NPM version: 7.21.0
• Browser name and version: Chrome latest
• Platform name and version: Windows 10
• WebdriverIO version: latest
• wdio-image-comparison-service version: latest

Hi all,
since I changed to node v.16.8.0,
the wdio-image-comparison-service is not working.
"[chrome 92.0.4515.107 windows #0-0] TypeError: browser.checkScreen is not a function"

wdio.conf.js.txt
testcase.txt
ERROR_LOCAL_0209.txt

Does anyone of you use this service with node version 16.8.0?

**Environment **

• Node.js version: [e.g. 14.15.0]
• NPM version: [e.g. 6.14.8]
• Browser name and version: [e.g. Chrome 83]
• Platform name and version: [e.g. Android]
• WebdriverIO version: [e.g. 7.1.2]
• wdio-image-comparison-service version: [e.g. 2.2.0]

Config of WebdriverIO + wdio-image-comparison-service
An example of how you configured the wdio-image-comparison-service
v6 webdriverIO wdio.conf.js

  capabilities: [
    {
      maxInstances: 1,
      platformName: "Android",
      "appium:deviceName": process.env.DEVICE_NAME || "Nexus 6",
      browserName: process.env.BROWSER_NAME || "chrome",
      "appium:platformVersion": process.env.PLATFORM_VERSION || "11.0",
      "appium:orientation": "PORTRAIT",
      "appium:automationName": "UiAutomator2",
      "appium:newCommandTimeout": 180000,
      "appium:autoWebview": false,
      nativeWebScreenshot: true
    },
  ],

v7 webdriverIO wdio.conf.js

  capabilities: [
    {
      maxInstances: 1,
      platformName: "Android",
      "appium:deviceName": process.env.DEVICE_NAME || "Nexus 6",
      browserName: process.env.BROWSER_NAME || "chrome",
      "appium:platformVersion": process.env.PLATFORM_VERSION || "11.0",
      "appium:orientation": "PORTRAIT",
      "appium:automationName": "UiAutomator2",
      "appium:newCommandTimeout": 180000,
      "appium:autoWebview": false,
      "appium:nativeWebScreenshot": true
    },
  ],

Describe the bug
At v6 of webdriverIO, the nativeWebScreenshot capability works fine but when I upgrade to v7, it returns an error like in the picture

So I try to add a prefix "appium:" and it worked but the screenshot was taken duplicate

The screenshot should be like this

[Include code or an example repository that can easily be set up]
I've checked the source code of wdio-image-comparison-service and find these codes
const nativeWebScreenshot = !!capabilities.nativeWebScreenshot
I tried changing it to this and it worked
const nativeWebScreenshot = !!capabilities["appium:nativeWebScreenshot"] and it worked

Expected behavior
Should include "nativeWebScreenshot" capability support for v7 of webdriverIO

Environment (please complete the following information):

• Node.js version: 8.16.0
• NPM version: 6.4.1
• Browser name and version: iPhone XS,
• Platform name and version: iOS 12.1
• WebdriverIO version: 5.9.6
• wdio-image-comparison-service version: 1.5.0
• browserstack-service : 5.8.0

Config of WebdriverIO + wdio-image-comparison-service

wdio-image-comparison-service configuration

module.exports = {
  services: [

    ['image-comparison',
      {
        autoSaveBaseline: true,
      }],

  ],

wdio-configuration

const projectConfig = {
  baseUrl: 'http://bs-local.com:8080',
  debug: true,
  maxInstances: 5,
  framework: 'mocha',
  reporters: ['spec'],
  mochaOpts: {
    ui: 'bdd',
    compilers: ['js:babel-core/register'],
    timeout: 10 * 60 * 1000,
  },
  specs: ['**/test/visual/**/*.js'],
  before() {
    global.expect = expect;
  },
  user: '',
  key: '',
  orientations: ['landscape', 'portrait'],
  automationName: 'UIAutomator2',
  commonCapabilities: {
    project: 'UI-Kit V3',
    'browserstack.local': true,
    'browserstack.video': true,
    'browserstack.console': 'errors',
    'browserstack.debug': false,
    'browserstack.networkLogs': false,
    'browserstack.appium_version': '1.13.0',
    nativeWebScreenshot: true,
    realMobile: true,
  },
  waitforTimeout: 10000
};

I am merging both configs and additionally browsers config and browser stack:
Devices config

module.exports = {
  capabilities: [
    {
      os_version: '12.1',
      device: 'iPhone XS'
    },
  ],
};

Browser stack config

const browserstack = require('browserstack-local');

const localIdentifier = process.env.CI_JOB_ID || Date.now().toString();

exports.bs_local = new browserstack.Local();

module.exports = {
  services: ['browserstack'],
  browserstackLocal: true,
  onPrepare(config) {
    console.info('Connecting local');
    return new Promise((resolve, reject) => {
      exports.bs_local.start({ localIdentifier, key: config.key }, error => {
        if (error) {
          reject(error);
        } else {
          console.info('Connected. Now testing...');
          resolve();
        }
      });
    });
  },
  onComplete() {
    exports.bs_local.stop(() => {});
  },

  commonCapabilities: {
    build: localIdentifier,
    'browserstack.localIdentifier': localIdentifier,
  },
};

Describe the bug
When passing options to the checkFullPageScreen with the detail information about the folders options, the plugin is creating the screenshots in different folders and different name for the format image.

checkFullScreen Use*

const testOptions = {
    autoSaveBaseline: true,
    baselineFolder: path.join(process.cwd(), `screenshots/reference/${kind}/${name}`),
    screenshotPath: path.join(process.cwd(), `screenshots/reference/${kind}/${name}`),
    savePerInstance: true,
    formatImageName: `{tag}-{platformName}-{browserName}-{width}x{height}`,
  };
  const results = browser.checkFullPageScreen('fullPage', {
    testOptions
  })

To Reproduce
Run the test with some local server or site with those capabilities and try to access call the method with options. I shared the browser stack capabilities, but actually the tests can be ran poiting up to any site.

Expected behavior
Plugin should generate the screenshots in the correct folder passed under the options

Log

#####################################################################################
 INFO:
 Autosaved the image to
 wic/baseline/fullPage-chrome-360x740-dpr-3.png
#####################################################################################

[0-0]
#####################################################################################
 INFO:
 Debug mode is enabled. Saved the debug file to:
 screenshots/errors/diff/fullPage-chrome-360x740-dpr-3.png
#####################################################################################

[0-0] PASSED in undefined - /test/visual/generated/generated1.js
[1-0]
#####################################################################################
 INFO:
 Autosaved the image to
 wic/baseline/fullPage-safari-375x812-dpr-3.png
#####################################################################################

[1-0]
#####################################################################################
 INFO:
 Debug mode is enabled. Saved the debug file to:
 screenshots/errors/diff/fullPage-safari-375x812-dpr-3.png
#####################################################################################

Additional context
Screenshots are being generated under the screenshots folder but not with the indicated name and additionally the baseline is being saved in wic folder the default. I dont share information detail of browser stack since the issue is specifically happing on the plugin side

Wondering if you can either help out or have any insight into this problem.
Any help would be appreciated.

Running into issues when integrating this service into this containerized wdio project

You can read more about issue (error snippet, etc) here
blueimp/wdio#9

Have you looked into Dockerization at all?

Environment (please complete the following information):

• Node.js version: v10.16.0
• NPM version: 6.10.0
• Browser name and version: N/A
• Platform name and version: alpine:3.10
• WebdriverIO version: 5.11.2
• wdio-image-comparison-service version: Trying to install the latest version. (npm install -g wdio-image-comparison-service)

Thanks in advance.

Hi all,
I am using the wdio-image-comparison-service in my project.
I have the project on gitlab and start the tests via Image.
The tests are deployed on a docker imag, (image: node:14.17.1-buster)
running on a gitlab pipeline.
FYI: The tests are connected to saucelabs.

On local, following folders are generated automatically:

• .tmp/actual/-> here are the actual images

• .tmp/fixx/-> here are the images with diffs

• wic/baseline/-> here are the baseline images

By chance I noticed that these folders on gitlab are not changed / overwritten during a run on gitlbab. I then deleted them and started the run on gitlab - but no folders were generated:

Nevertheless it shows the individual pictures comparisons as successful - I wonder on what basis he compares the pictures?

I use the following config:
['image-comparison',
{
formatImageName: '{tag}-{logName}-{width}x{height}',
savePerInstance: true,
autoSaveBaseline: true,
blockOutStatusBar: true,
blockOutToolBar: true,
isHybridApp: true,
tabbableOptions:{
circle:{
size: 18,
fontSize: 18,
},
line:{
color: '#ff221a',
width: 3,
},
}
}]

• Node.js version: [14.17.6]
• NPM version: [6.15.14]
• Browser name and version: [Chrome latest]
• Platform name and version: [Windows 10]
• WebdriverIO version: [latest]
• wdio-image-comparison-service version: [v 3.0]

Does someone of you use this service also on GitLab,
or know the issue?

Thanks for your help,
BR
Fabian Schmider

Describe your question with as much detail as possible
A clear and concise question that doesn't require too much conversation. Need more help? Find me on Gitter
is there any string template or any way to distinguish whether it is a headless browser in formatImageName field?

If it's about a specific piece of code, try and include some of it to support your question.

for example:

formatImageName: "{tag}-{browserName}-{headlessBrowserName}-{browserVersion}-{width}x{height}-dpr-{dpr}",

Environment (please complete the following information):

• Node.js version: [e.g. 8.9.1]
• NPM version: [e.g. 5.8.0]
• Browser name and version: [e.g. Chrome 68]
• Platform name and version: [e.g. Windows 10]
• WebdriverIO version: [e.g. 5.1.0]
• wdio-image-comparison-service version: [e.g. 2.0.0]

Additional context
Add any other context about the problem here.

My programmatic configuration

const WdioImageComparisonService = require('wdio-image-comparison-service')
  .default;
const wdioImageComparisonService = new WdioImageComparisonService({});

const _folders={                                                        
  actualFolder: 'test-reports/visual-regression/actual/',
  baselineFolder: 'test/test-data/visual-regression/baseline/',
  diffFolder: 'test-reports/visual-regression/diff/'
}

const _optins={
 formatImageName: '{tag}-{logName}-{width}x{height}',
  savePerInstance: true,
  autoSaveBaseline: true,
  clearRuntimeFolder: true,
  blockOutStatusBar: false,
  blockOutToolBar: false,
  isHybridApp: false,
}

  wdioImageComparisonService.folders = _folders
  wdioImageComparisonService.defaultOptions =_options;

  browser.defaultOptions = wdioImageComparisonService.defaultOptions;
  browser.folders = wdioImageComparisonService.folders;

  wdioImageComparisonService.before(browser.capabilities);

after running a test I am getting diff result in the console as:

Error: expect(received).toEqual(expected) // deep equality

Expected: 0
Received: 0.33

Although the baseLine and actual images are getting stored in specified paths diff images are not getting generated and stored.

NOTE: Be aware of the fact that this module is only a plugin that provides all functionality from webdriver-image-comparison. So please check if this is a feature request for this plugin or for webdriver-image-comparison.

Is your feature request related to a problem? Please describe.
We use the pdf viewer in Chrome to check on some communications that are sent from our company. Using the saveFullPageScreen function it still cuts off the bottom of the page and shows the scroll bar.

Describe the solution you'd like
It would be nice to have it screenshot the full page without the scroll bar and, if possible, the "voids" either side of the PDF content

Describe alternatives you've considered
Just experimenting at the moment but a workaound could be to scroll and take another screenshot. ie. save multiple shots per PDF

Additional context

Environment :

• Node.js version: 10.15.1
• NPM version: 6.4.1
• Browser name and version: [e.g. Chrome 68]
• Platform name and version: [e.g. Windows 10]
• WebdriverIO version: 5.11.0
• wdio-image-comparison-service version: 1.3.0

Describe the bug
Hi, my test fails. According to the staketrace the element is not attached to the page document, can you help me?

To Reproduce
clone my repositorie:
https://github.com/tuan91/wdio_stale_element

Log

stale element reference: element is not attached to the page document
  (Session info: chrome=74.0.3729.136)
  (Driver info: chromedriver=74.0.3729.6 (255758eccf3d244491b8a1317aa76e1ce10d57e9-refs/branch-heads/3729@{#29}),platform=Linux 3.19.8-100.fc20.x86_64 x86_64)

#50 (comment)

Environment (please complete the following information):

• Node.js version: [v12.16.1]
• NPM version: [6.13.4]
• Browser name and version: [Safari 12]
• Platform name and version: [Browserstack iPad Air 2019]
• WebdriverIO version: [6.1.22]
• wdio-image-comparison-service version: [1.13.6]

Config of WebdriverIO + wdio-image-comparison-service

baselineFolder: path.resolve("./", "wdio-tests/screenshots/real-devices/reference"),
            screenshotPath: path.resolve("./", "wdio-tests/screenshots/real-devices/taken"),
            blockOutStatusBar: true,
            blockOutToolBar: true,
            savePerInstance: true,
            autoSaveBaseline: true,
            returnAllCompareData: true,
            formatImageName: "{tag}-{browserName}",

var capabilities = {
'bstack:options' : {
"osVersion" : "12",
"deviceName" : "iPad Air 2019",
"realMobile" : "true",
"appiumVersion" : "1.14.0",
"local" : "true",
"deviceOrientation" : "landscape",
},
"browserName" : "iPad",
}

Describe the bug
When run image comparison against iPad landscape a status bar and an address bar are not fully ignored. And it looks like ignored part are taken as for portrait orientation.

Issue not reproducible with portrait orientaion.

Expected behavior
fully ignored status bar and address bar for tablet landscape orientation

Log

Additional context

Hello,
I have an issue with multiremote and wdio-image-comparison-service :
I'm using the service 'image-comparison' without problem when I have only 1 browser, but when I run tests with multiremote, I have an error.

Example and repro:

In my wdio.conf.js I have this capabilities :

exports.config = {
...
capabilities: [{ browserName: 'chrome' }],
...
}

in my spec file, I can do this without problem:

browser.url('http://google.fr')
browser.saveScreen('examplePage')

But when I try to do multiremote like this :

exports.config = {
...
capabilities: { chrome:{capabilities: { browserName: 'chrome' }},  firefox:{capabilities: { browserName: 'firefox' }}},
...
}

I can used the 'basic' wdio method like .url(), click().... but not the services.
So this :

browser['chrome'].url('http://google.fr')
browser['firefox'].url('http://bing.com')
browser['chrome'].saveScreen('examplePage')

opens Chrome and Firefox, goes to excepted url but just after give me this error :

ERROR @wdio/sync: TypeError: Cannot read property 'browserName' of undefined
at getInstanceData (/Users/user/Work/Git/QATestAuto/node_modules/wdio-image-comparison-service/build/utils.js:45:72)
at WdioImageComparisonService.before (/Usersuser/Work/Git/QATestAuto/node_modules/wdio-image-comparison-service/build/service.js:43:53)
at execHook (/Users/user/Work/Git/QATestAuto/node_modules/@wdio/sync/build/executeHooksWithArgs.js:46:23)
browser.chrome.saveScreen is not a function

(I've tried to use browsername like chrome.saveScreen() with the same result)

Environment (please complete the following information):

• Node.js version: 11.14.0
• NPM version: 6.9.0
• Browser name and version: all browsers
• Platform name and version: [e.g. Windows 10]
• WebdriverIO version: 5.10.4
• wdio-image-comparison-service version: 1.12.1

Thanks !

In an earlier version of WDIO (wdio-visual-regression-service), the framework could pick up the name of the test

it(THIS_THING, ()=>test)

as the name of the screenshot. This was super helpful because it allowed us to easily get from test report back to test spec with code search.

Is there any simple way to achieve this in the new service?

Used the BackstopJS for a long time and then switched to the wdio-image-comparison-service
It is excellent, but I really miss a reporter in which it would be convenient and quick to see the changes in the layout. it seems to me how the BackstopJS was done would be very suitable here too.
Or already exist reporter like BackstopJS for wdio-image-comparison-service? I will be grateful for the links

Environment:

• Node.js version: 13.11
• NPM version: 7.0.11
• Browser name and version: any
• Platform name and version: Win 10
• WebdriverIO version: 6.6.2
• wdio-image-comparison-service version: 1.13.6

Now that Chrome 90 stable is out some of our visual regression tests started to fail (diffs).
The difference percentages are even different when running headless and not headless, so I suppose this could be timing/animations related. I'd like to point out that we've been running wdio for visual regressions for some time now without much trouble.

I can't point to any specific cause for the time being, this is me just wondering, heads-up.

Environment:

• Node.js version: 12.22.1
• NPM version: 6.14.12
• Browser name and version: Chrome 90
• Platform name and version: macOS Big Sur
• WebdriverIO version: 7.x (@wdio)
• wdio-image-comparison-service version: 2.3.0

The project is an Ionic app, testing done on desktop.

Firstly, I acknowledge that this may be a problem with the underlying webdriver-image-comparison module, but:

1. I don't know how to perform the same test using raw webdriver-image-comparison - the documentation is currently sparse.
2. The error relates to the change from WDIO sync mode to async mode

Environment (please complete the following information):

• Node.js version: v14.17.5
• NPM version: 7.19.1
• Browser name and version: Chrome 92.0.4515.159
• Platform name and version: Windows 10 Version 21H1 (OS Build 19043.1165)
• WebdriverIO version: 7.11.1
• wdio-image-comparison-service version: 2.3.0

Config of WebdriverIO + wdio-image-comparison-service
Added wdio-image-comparison-service as a service in wdio.conf.js:

services: [
        ['chromedriver'],
        ['image-comparison']
    ],

Describe the bug
When using saveScreen in wdio sync mode (@wdio/sync), the removeElements works. When switching to async mode (either with @wdio/sync installed or removed) the removeElements does not work. An example will be provided.

To Reproduce
See the example in the repository here and follow the instructions in the README_IMAGE_COMPARISON.md file.

Expected behavior
I expected that removeElements would work in async mode.

Hi,

Thank you for providing wdio-image-comparison-service.
We have implemented this module and it works, we can get the screenshot file in diff folder that shows us what is the difference between the actual and base image.
But we cannot find its diff screenshot in our Allure Reporter html, we realize it is because of the different stored location. Based on XML file, Allure reporter displays the screenshot from its location, allure-results folder, which different from diff folder.

Is there any example regarding display the diff screenshot file in reporter?

Environment (please complete the following information):

• Node.js version: 12.19.0
• NPM version: 6.14.8
• Browser name and version: Chrome 88
• Platform name and version: Linux Mint 20
• WebdriverIO version: 6.12.1
• wdio-image-comparison-service version: 2.0.0
• Allure reporter: 6.11.0

Environment :

• Node.js version: 14.5.0
• NPM version: 6.14.5
• Browser name and version: Chrome 87
• Platform name and version: mac
• WebdriverIO version: 6.10.11
• wdio-image-comparison-service version: 2.0.0
• @wdio/junit-reporter: "6.10.6

Config of WebdriverIO + wdio-image-comparison-service

const config = {

  user: process.env.BROWSERSTACK_USER,
  key: process.env.BROWSERSTACK_KEY,

  services: [
    ['image-comparison',
      // The options
      {
        baselineFolder: BASELINE_IMAGE_FOLDER,
        formatImageName: '{tag}-{logName}-{width}x{height}',
        screenshotPath: ALL_IMAGE_FOLDER,
        savePerInstance: true,
        autoSaveBaseline: true,
        blockOutStatusBar: true,
        blockOutToolBar: true,
        clearRuntimeFolder: true,
      },
    ],
  ],

  exclude: [
  ],
  specs: [
    './tests/**/*.spec.js',
  ],
  specFileRetries:  2,

  maxInstances: 50,

  capabilities: [
    {
      browserName: 'chrome',
      browser_version: '87',
      os: 'OS X',
      os_version: 'Catalina',
      acceptInsecureCerts: true,
      resolution: '1280x960',
      realMobile: false,
      local: false,
      buildName: buildDescription,
      projectBrowserName: SCREEN_SIZE.DESKTOP.type,
      projectName,
    },
    {
      browserName: 'chrome',
      'goog:chromeOptions': {
        mobileEmulation: { deviceName: 'iPhone X' },
      },
      browser_version: '87',
      os: 'OS X',
      os_version: 'Catalina',
      acceptInsecureCerts: true,
      resolution: '1280x960',
      realMobile: false,
      local: false,
      buildName: buildDescription,
      projectBrowserName: SCREEN_SIZE.IPHONE_X.type,
      projectName,
    },
  ],
  logLevel: 'error',

  bail: 0,

  baseUrl: 'http://localhost:3000',
  waitforTimeout: 20000,
  connectionRetryTimeout: 120000,
  connectionRetryCount: 3,

  framework: 'mocha',
  reporters: ['spec',
    ['junit', {
      outputDir: JUNIT_REPORTS,
      outputFileFormat() { // optional
        return 'visualTestRuns.xml';
      },
    }],
  ],

  mochaOpts: {
    // Babel setup
    compilers: ['js:@babel/register'],
    ui: 'bdd',
    timeout: 900000,
  }
  beforeSession(config, capabilities, specs) { // eslint-disable-line
    global.assert = chai.assert;
  },
};

Describe the bug
Given i run visual test runs using webdriverIO and image comparison library on browserstack or locally and parallel to each test runs ( ~50 runs at once)
when the test run completes and junit report generated
then i see the report incomplete and not usable :

 </system-out>
    </testcase>
  </testsuite>
</testsuites>e bytes)","args":[]}
RESULT: {"script":"return (function getDocumentScrollHeight() {\n    var viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n    var scrollHeight = document.documentElement.scrollHe ... (1184 more bytes)","args":[]}
COMMAND: POST /session/6050c309b30a41c8a0ebab3b4d5075152acf2f8d/execute - {"script":"return (function scrollToPosition(yPosition) {\n    (document.scrollingElement || document.documentElement).scrollTop = yPosition;\n}).apply(null, arguments)","args":[814]}
RESULT: {"script":"return (function scrollToPosition(yPosition) {\n    (document.scrollingElement || document.documentElement).scrollTop = yPosition;\n}).apply(null, arguments)","args":[814]}
COMMAND: GET /session/6050c309b30a41c8a0ebab3b4d5075152acf2f8d/screenshot - {}
RESULT: {}
COMMAND: POST /session/6050c309b30a41c8a0ebab3b4d5075152acf2f8d/execute - {"script":"return (function getDocumentScrollHeight() {\n    var viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n    var scrollHeight = document.documentElement.scrollHe ... (1184 more bytes)","args":[]}
RESULT: {"script":"return (function getDocumentScrollHeight() {\n    var viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);\n    var scrollHeight = document.documentElement

NOTE the same junit report works fine with functional tests on wdio

To Reproduce
Run any test with the config i provided and run the tests in parallel and you can see the junit report generated fail

Expected behaviour
get a readable report of all test run and retried

Log

Additional context

Environment (please complete the following information):

• Node.js version: 10.17.0
• NPM version: 6.11.3
• Browser name and version:Chrome 81
• Platform name and version: macOS 10.13.6
• WebdriverIO version: 5.18.7
• wdio-image-comparison-service version: 1.12.2

Config of WebdriverIO + wdio-image-comparison-service
An example of how you configured the wdio-image-comparison-service

wdio.conf.js file has following service
services: [ 'chromedriver',
['image-comparison',
{
// Some options, see the docs for more
baselineFolder: join(process.cwd(), './tests/baseline/'),
formatImageName: 'test-chrome',
screenshotPath: join(process.cwd(), '.tmp/'),
savePerInstance: true,
autoSaveBaseline: true,
blockOutStatusBar: true,
blockOutToolBar: true,
tabbableOptions: {
circle: {
size: 18,
fontSize: 18,
showNumber: true
},
line: {
color: '#ff221a',
width: 3
}
}
}],
],

Describe the bug
While using browser.checkTabbablePage('tabbable') method, if some of the elements on the page are disabled, then tabbing should not happen on the disabled elements and the order of tabbing with lines and circles should be done only with enabled elements. In the screenshot below, Tab circle (5) should have been skipped.

To Reproduce
Steps to reproduce the behavior:

1. Visit on the saucelabs url:

• browser.url('https://accounts.saucelabs.com/am/XUI/?region=us-west-1#login/')

2. Then click on the "Sign In" button with no username and password:

• $('//*[@id="loginButton_0"]').click();

3. "Sign In" button is disabled and now run tabbing method.

• browser.checkTabbablePage('tabbable')

Expected behavior
There should not have been a tabbing on the "Sign In" button since the button was disabled.

Full page screenshoting works weird. If there is a fixed nav bar on the top of a screen, it will be duplicated many times. But I was expecting for another result.

Environment (please complete the following information):

• Node.js version: v15.2.1
• NPM version: 7.7.6
• Browser name and version: Chrome 89
• Platform name and version: Ubuntu 20.04
• WebdriverIO version: 7.3.0
• wdio-image-comparison-service version: 2.3.0

Config of WebdriverIO + wdio-image-comparison-service
services: [
'chromedriver',
['image-comparison',
{
actualFolder: path.join(process.cwd(), './screenshots/testActual'),
baselineFolder: path.join(process.cwd(), './screenshots/testBaseline'),
diffFolder: path.join(process.cwd(), './screenshots/testDiff'),
formatImageName: '{tag}-{logName}-{width}x{height}',
screenshotPath: path.join(process.cwd(), './screenshots/'),
savePerInstance: true,
autoSaveBaseline: true,
blockOutStatusBar: true,
blockOutToolBar: true
}]
],

To Reproduce
Test.js;

describe('Visual regression bug', () => {
it('Screenshot full page', () => {
browser.url('/');
browser.saveFullPageScreen('fullPage');
console.log('saved');
browser.checkFullPageScreen('fullPage');
console.log('checked');
});
});

I got this

Actual behavior

But I expected something like this (taken from #13)
Expected behavior

Additional text
I have an another issue (incorrect working with custom scrollbars), but I suggest that after fixing this bug, it will be resolved together.

checkElement() has a blockOut Option that can define an area that is ignored for the image comparison. It only accepts absolute coordinates. However when testing across multiple screen sizes and browsers we can not rely on absolute coordinates that are hardcoded in our test. Is there any possibility to determine the coordinates of a given element during runtime?

I've seen there is a determineElementRectangles method in the TypeScript source that does exactly that. Is it accessible somehow for me as a test writer?

Describe your question with as much detail as possible

Hiding only one of the elements matching a selector when updating to puppeteer. It seems the removal/hidden elements is passed through all the way to the client script but I have been having trouble debugging where exactly it might break. My question is basically do I need to debug a visual Chrome execution to get access to the client script logic?

My selector is something like browser.$$('[data-thing="MULTIPLE"]') and I make sure they are all displayable elements before sending them in. When in puppeteer we are getting HTMLElements or are they still WebElements?

If it's about a specific piece of code, try and include some of it to support your question.

https://github.com/wswebcreation/webdriver-image-comparison/blob/master/lib/clientSideScripts/hideRemoveElements.ts#L30

Environment (please complete the following information):

• Node.js version: 10.16.3
• NPM version: locally: 6.14.4, docker: 6.9.0
• Browser name and version: locally: Chrome 81.0.4044.113, docker: Chrome 79
• Platform name and version: locally: OSX, docker: linux
• WebdriverIO version: 6.1.0
• wdio-image-comparison-service version: 1.13.0

Additional context
Add any other context about the problem here.

Pre-check

• I'm aware that I can edit the docs and submit a pull request

Describe the improvement

I'd like to report

• Unclear documentation
• A typo
• Missing documentation
• Other

Description of the improvement / report
The current version seems not compatible with webdriverio v6.
It's not noticed in readme.

NOTE: Be aware of the fact that this module is only a plugin that provides all functionality from webdriver-image-comparison. So please check if this is an issue with this plugin or with webdriver-image-comparison.

Environment (please complete the following information):

• Node.js version: v10.17.0
• NPM version: 6.11.3
• Browser name and version: Chrome V 80(but this issue is independent of browsers)
• Platform name and version: Azure devops using kubernates pool
• WebdriverIO version: 5.15.6
• wdio-image-comparison-service version: 1.12.2

Config of WebdriverIO + wdio-image-comparison-service
image-comparison.conf.js

const path = require('path');
const BASE_PATH = path.join(__dirname, '..');
const OUTPUT_PATH = `${BASE_PATH}/output`;

function getImageComparisonServiceConfig() {
  return [
    'image-comparison',
    {
      baselineFolder: path.join(OUTPUT_PATH, 'screenshots/reference'),
      formatImageName: '{tag}_{width}x{height}',
      screenshotPath: path.join(OUTPUT_PATH, 'screenshots/screen'),
      clearRuntimeFolder: true,
      savePerInstance: false,
      autoSaveBaseline: true,
      blockOutStatusBar: true,
      blockOutToolBar: true,
      disableCSSAnimation: true,
    },
  ];
}

module.exports = { getImageComparisonServiceConfig };

browserstack.conf.js

const browserstack = require('browserstack-local');
const { getImageComparisonServiceConfig } = require('./visual-regression.conf');

const { LOCAL_IDENTIFIER, APPLICATION_URL } = require('../env');
// have main config file as default but overwrite environment specific information
exports.config = {
  ...require('./wdio.conf').config,

  services: ['browserstack', getImageComparisonServiceConfig()],
.....
.....
....
}

Describe the bug
When I run the tests in azure devops pipeline using kubernates pool, I get the following error
ERROR @wdio/utils:initialiseServices: Error: Couldn't initialise "wdio-image-comparison-service". Error: libuuid.so.1: cannot open shared object file: No such file or directory

When using checkElement() on an Element that has more height than the current viewport (think of a long webform) the resulting screenshot has a top area with the visible part of the element and the rest of it is just transparent.
Is there a way to test large elements without taking a full page screenshot?

NOTE: Be aware of the fact that this module is only a plugin that provides all functionality from webdriver-image-comparison. So please check if this is an issue with this plugin or with webdriver-image-comparison.

Environment (please complete the following information):

• Node.js version: 12.18.0
• NPM version: 6.14.4
• Browser name and version: chrome 83
• Platform name and version: windows 10
• WebdriverIO version: 6.0.5
• wdio-image-comparison-service version: 1.13.6

Config of WebdriverIO + wdio-image-comparison-service

services: [['image-comparison',
        // The options
        {
            // Some options, see the docs for more
            baselineFolder: './master',
            formatImageName: '{tag}-{logName}-{width}x{height}',
            screenshotPath: '/.tmp/',
            savePerInstance: true,
            autoSaveBaseline: true,
            blockOutStatusBar: true,
            blockOutToolBar: true,
            // NOTE: When you are testing a hybrid app please use this setting
            //isHybridApp: true,
            // Options for the tabbing image
            tabbableOptions:{
                circle:{
                    size: 18,
                    fontSize: 18,
                    // ...
                },
                line:{
                    color: '#ff221a', // hex-code or for example words like `red|black|green`
                    width: 3,
                },
            }
            // ... more options
        }]
    ],

Describe the bug
getting error whule "TypeError: browser.saveScreen is not a function" while using browser.saveScreen

To Reproduce
use browser.saveScreen method

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

Expected behavior
A clear and concise description of what you expected to happen.

Log

Additional context
Add any other context about the problem here.

I am using Perfecto cloud for my testing.
When I run my scripts, I am able to create/see folders like desktop_chrome or desktop_firefox where it stores reference and actual screenshots.
Now I am trying to test on Android mobile on Perfecto cloud.
ISSUE: It is not creating the folders but storing the screenshots directly under reference/actual folder. How can I make it create another folder just like desktop_firefox.
P.S - I am not using Appium.

Capabilities in wdio.conf.js:

// FF
    {
      maxInstances: 5,
      platformName: 'Mac',
      platformVersion: 'macOS Mojave',
      browserName: 'Firefox',
      browserVersion: '76',
      resolution: '1920x1080',
},

//Android Mobile browser
{
        maxInstances: 1,
        platformName: 'Android',       //iOS or Android
        platformVersion: 'latest',
        browserName: 'MobileOS',
        model: 'Pixel',
        orientation: 'PORTRAIT',
        openDeviceTimeout: 3
}

My wdio-image-comparison-service configuration is as follows:
[
'image-comparison',
{
baselineFolder: join(
process.cwd(),
'./visualRegressionScreenshots/reference/'
),
formatImageName: '{tag}-{logName}-{width}x{height}',
screenshotPath: join(process.cwd(), './visualRegressionScreenshots/'),
savePerInstance: true,
autoSaveBaseline: true,
blockOutStatusBar: true,
blockOutToolBar: true,
misMatchTolerance: 6.5,
},
],
The function was working on the previous version (webdriverio 5) however, after upgrading to webdriverio 6.10.12 coupled with the use of node version 12+, I started getting browser.saveFullPageScreen is not a function. Could someone please help with this issue?

Environment (please complete the following information):

• wdio-image-comparison-service version: 1.4.0

Describe the bug
there are async/await in init.spec.js
https://github.com/wswebcreation/wdio-image-comparison-service/blob/9d4f152db20fcdd70c387b7d7ca627487aa6c3b6/tests/specs/init.spec.js#L9

To Reproduce
npm run test.local.init

Expected behavior
remove async/await from test.local.init

Environment (please complete the following information):

• Node.js version: v13.12.0
• NPM version: 6.14.4
• Browser name and version: Chrome 80.0.3987.149
• Platform name and version: MacOS Mojave 10.14.6
• WebdriverIO version: [e.g. 5.1.0]
• wdio-image-comparison-service version: "^1.12.2"
• "webdriver-image-comparison": "^0.13.2"

Config of WebdriverIO + wdio-image-comparison-service
Followed instruction for installation, configuration, writing tests.:
https://webdriver.io/blog/2019/05/18/visual-regression-for-v5.html

Describe the bug
Error is appearing after installing locally and globally

To Reproduce
Steps to reproduce the behavior:

1. Follow all steps in the instruction, install wdio-image-service locally
2. Launch test
3. Install second time globally: npm install --save-dev wdio-image-comparison-service

Expected behavior
Test suppose to be launched

Log
Please see the description below

Trying to use hideAfterFirstScroll in checkFullPageScreen method but it's giving error:
TS2740: Type 'Element' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 230 more.

expect(browser.checkFullPageScreen(this.test.title,{hideAfterFirstScroll: [$('#privacy-information')]} )).equal(0);

• TypeScript
• Node.js version: [v12.13.1]
• NPM version: [6.12.1]
• Browser name and version: [NA] - compiler issue
• Platform name and version: [NA] - compiler issue
• WebdriverIO version: [5.14.0]
• wdio-image-comparison-service version: [0.14.4]

We're building a Visual Regression Testing Suite based on webdriverio, wdio-image-comparison-service and Browserstack.

We have the problem that our tests fail regularly because the screenshots that are created vary in their resolution. We can reproduce the issue with browserstack and a local selenium grid; also with different browsers e.g. IE11 and Chrome.

Relevant versions

• node: v12.14.0
• npm: 6.13.4
• webdriverio: 5.22.3
• @wdio/sync: 5.20.1
• wdio-image-comparison-service: 1.12.2

Example test that shows that behaviour

const { expect } = require('chai');

describe('Page: News', () => {
    beforeEach(() => {
        browser.url('/my-test-page.html');
    });

    describe('Audio Player', () => {
        it('should look like the reference screenshot', () => {
            const progressbarAndTimerArea = { height: 40, width: 900, x: 232, y: 210 };

            const elem = $('.module-content-audio-player');
            elem.waitForDisplayed(3000);
            elem.scrollIntoView();
            elem.$('.module-content-audio-player__btn-play').click();
            browser.pause(4000);
            expect(
                browser.checkElement(elem, 'Audio Player Started', { blockOut: [progressbarAndTimerArea], })
            ).equal(0);
        });
    });
});

This test produces these two screenshots on the same page when run twice

We appreciate any hints how to track down the source of the problem.

Environment:

• Node.js version: 10.15.3
• NPM version: 6.4.1
• WebdriverIO version: 5.15.4
• wdio-image-comparison-service version: 1.8.0

Config of WebdriverIO + wdio-image-comparison-service

Describe the bug
Using it on the typescript file.

Property 'checkElement' does not exist on type 'BrowserObject'.ts(2339)

const { join } = require('path');
// wdio.conf.js
exports.config = {
    // ...
    // =====
    // Setup
    // =====
    services: [ 
        ['image-comparison', 
        // The options
        {
            // Some options, see the docs for more
            baselineFolder: join(process.cwd(), './tests/sauceLabsBaseline/'),
            formatImageName: '{tag}-{logName}-{width}x{height}',
            screenshotPath: join(process.cwd(), '.tmp/'),
            savePerInstance: true,
            autoSaveBaseline: true,
            blockOutStatusBar: true,
            blockOutToolBar: true,
            // ... more options
        }], 
    ],
    // ...
};

To Reproduce

1. Create the file test.spec.ts
2. Copy & Paste this code

describe('Example', () => {
  beforeEach(() => {
     browser.url('https://webdriver.io');
  });
  
  it('should save some screenshots', () => {
  	// Save a screen
  	browser.saveScreen('examplePaged', { /* some options*/ });
  	
  	// Save an element
  	browser.saveElement($('#element-id'), 'firstButtonElement', { /* some options*/ });
  	
  	// Save a full page screens
  	browser.saveFullPageScreen('fullPage', { /* some options*/ });
  });
  
  it('should compare successful with a baseline', () => {
  	// Check a screen
  	expect(browser.checkScreen('examplePaged', { /* some options*/ })).toEqual(0);
  	
  	// Check an element
  	expect(browser.checkElement($('#element-id'), 'firstButtonElement', { /* some options*/ })).toEqual(0);
  	
  	// Check a full page screens
  	expect(browser.checkFullPageScreen('fullPage', { /* some options*/ })).toEqual(0);
  });
});

Expected behavior
The browser.checkElement should not throw the warning.

Is your feature request related to a problem? Please describe.
Now all the diff needs to be located in Diff folder is there is anyway we make this html report.

Describe the solution you'd like
A consolidated report for actual and diff in html format

Full Page screenshot is only capturing the image of the viewport. It shows a blank page for rest of the screen in the screenshot.
I am a newbie and I tried a simple test described in your example in Chrome. Scree
Is any there specific setting options required?

Environment (please complete the following information):

• Node.js version: 8.9.4
• NPM version: 5.6.0
• Browser name and version: Chrome 75
• Platform name and version: Windows 10
• WebdriverIO version: 5.11.13
• wdio-image-comparison-service version: 1.5.0
• mocha version: 6.2.0

Additional context

Test.js

var chai = require('chai');
const chaiWebdriver = require('chai-webdriverio').default;
chai.use(chaiWebdriver(browser));
const expect = chai.expect;

describe('Example', () => {
    beforeEach(() => {
      browser.url('https://webdriver.io');    
    });   
    
    it('should compare successful with a baseline', () => {              
        // Check a full page screens
        expect(browser.checkFullPageScreen('fullPage', { 
            fullPageScrollTimeout: '3000',
         })).to.equal(0);
    });
  });

wdio.config.js

services: ['selenium-standalone','chromedriver', 'firefox-profile',
    ['image-comparison', 
    // The options
    {
        // Some options, see the docs for more
        //baselineFolder: join(process.cwd(), './screenshots/auBaseline/'),
        actualFolder: join(process.cwd(), './screenshots/testActual'),
        baselineFolder: join(process.cwd(), './screenshots/testBaseline'),
        diffFolder: join(process.cwd(), './screenshots/testDiff'),
        formatImageName: '{tag}-{logName}-{width}x{height}',
        screenshotPath: join(process.cwd(), './screenshots/'),
        savePerInstance: true,
        autoSaveBaseline: true,
        blockOutStatusBar: true,
        blockOutToolBar: true,
        // ... more options
    }]
],

Environment (please complete the following information):

• Node.js version: 10.16.0
• NPM version: 6.9.0
• Browser name and version: All platforms (e.g. Edge, Mobile Safari)
• Platform name and version: All platforms (e.g. Windows 10, iOS12)
• WebdriverIO version: 5.13.0
• Mocha-framework: 5.12.1
• Allure-reporter: 5.12.1
• wdio-image-comparison-service version: 1.5.1

Config of WebdriverIO + wdio-image-comparison-service

const imageComparisionService = ["image-comparison", {
    baselineFolder: "./screenshots/baseline/",
    screenshotPath: "./screenshots/.tmp/",
    blockOutStatusBar: true,
    blockOutToolBar: true,
    returnAllCompareData: true,
}];

services: ["chromedriver", [...imageComparisionService]],

Describe the bug
After using browser.checkScreen("ImageName") function without autoSaveBaseline: true, option in wdio service configuration, wdio crashes and leaves browser instances open.

To Reproduce
Steps to reproduce the behavior:

• Setup image-comparison service without autoSaveBaseline
• Use browser.checkScreen("Name")

Expected behavior
I'm not really sure what is expected behaviour after using browser.checkScreen() without baseline image, but I assume it should return Error that there is no baseline image.

Log

[0-0] Error in ""after each" hook"
charData should not contain characters not allowed in XML
[0-0] /wdio-tests/node_modules/@wdio/reporter/build/index.js:110
      testStat.fail((0, _utils.getErrorsFromEvent)(test));
               ^

TypeError: Cannot read property 'fail' of undefined
    at SpecReporter.WDIOReporter.on.test (/wdio-tests/node_modules/@wdio/reporter/build/index.js:110:16)
    at SpecReporter.emit (events.js:198:13)
    at SpecReporter.EventEmitter.emit (domain.js:448:20)
    at reporters.forEach.reporter (/wdio-tests/node_modules/@wdio/runner/build/reporter.js:38:49)
    at Array.forEach (<anonymous>)
    at BaseReporter.emit (/wdio-tests/node_modules/@wdio/runner/build/reporter.js:38:20)
    at MochaAdapter.emit (/wdio-tests/node_modules/@wdio/mocha-framework/build/index.js:211:19)
    at Runner.emit (events.js:203:15)
    at Runner.EventEmitter.emit (domain.js:448:20)
    at Runner.fail (/wdio-tests/node_modules/mocha/lib/runner.js:304:8)

Tabbing sequence screenshot does not display entire page if the page has iframe/nested iframes. Library is not able to scroll the page and as a result it just take the screenshot of the viewport without scrolling down the page.

I am using following versions of modules with the application under test.

node version : 12.16.3
npm version : 6.14.4
"wdio-image-comparison-service": "2.3.0"
"@wdio/cli": "6.12.0"
"chromedriver": "88.0.0"

Please find the sample screenshot in the attached file.

screenshot_sample.docx

I use this service in a bit of an unorthodox way, basically as a verification step before and after a test, where a baseline is generated before the step and the affected element is checked after some actions are executed after a step. The problem is I don't have a preset of baselines, but rather they are generated on every run. This causes the terminal to be spammed with "INFO:" logs.

A log level option that disables these logs OR a log level option that allows control of various types of levels: [verbose, normal, error, disabled]

Problem
The folder locations cannot be set dynamically and doesn't allow us to save screenshots underneath each of our component directories. We can use the wdio options object to set the paths when running specs individually, but not when running a suite of tests

Solution
Allowing each command to accept a folders object allows users to use the mocha test context to figure out test names and locations and create the proper folder paths for the baseline, actual, and diff screenshots:

describe('Example Test', function () {
  it('should test something', function() {
    const descr = getDescription(this);
    const folders = getFolders(this)
    expect(browser.checkFullPageScreen(descr, {}, folders)).to.equal(0);

Environment (please complete the following information):

• Node.js version: 12.14.1
• NPM version: 6.13.4
• Platform name and version: macOS
• WebdriverIO version: 5.19.0
• wdio-image-comparison-service version: 1.12.2

Describe the bug
Methods for "browser" (saveScreen, saveElement, saveFullPageScreen, saveTabbablePage, checkScreen, checkElement, checkFullPageScreen, checkTabbablePage) don't exist.

To Reproduce

1. create the file test.ts
2. input any browser method: browser.saveScreen('examplePaged', { /* some options */ });

Expected behavior
Property 'saveScreen' does not exist on type 'BrowserObject'.ts(2339)

Environment (please complete the following information):

• Node.js version: 8.17.0
• NPM version: 6.13.4
• Browser name and version: N/A
• Platform name and version: N/A
• WebdriverIO version: 5.22.4
• wdio-image-comparison-service version: 1.13.3

Describe the bug
I can see during install on Node.js 8 that various unsupported breaking changes have been introduced since 1.12. I've had to temporarily pin the older version.

During install on Node.js 8:

npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=10"} (current: {"node":"8.17.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=10"} (current: {"node":"8.17.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">= 10.0.0"} (current: {"node":"8.17.0","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]

When running the tool on Node.js 8:

2020-05-06T13:40:24.127Z ERROR @wdio/utils:initialiseServices: Error: Couldn't initialise "wdio-image-comparison-service".
/Users/colin/Sites/Co-op/membership-website-tests/node_modules/webdriver-image-comparison/node_modules/fs-extra/lib/mkdirs/make-dir.js:86
      } catch {
              ^

I can see Node.js 8 and 10 are missing from your Travis tests:
https://github.com/wswebcreation/wdio-image-comparison-service/blob/master/.travis.yml#L6

To Reproduce
Steps to reproduce the behavior:

Upgrade to [email protected] and run it on Node.js 8.

Expected behavior
As this upgrade is a minor release (not a major version) it should continue to work in Node.js 8, otherwise the version number should become 2.0.0, sorry!

The readme still says:

wdio-image-comparison-service supports NodeJS 8 or higher

Thanks for taking a look at this.

Environment (please complete the following information):
Node.js version: 14.5.0
NPM version: 6.14.5
Browser name and version: Chrome 87
Platform name and version: mac
WebdriverIO version: 6.10.11
wdio-image-comparison-service version: 2.0.0

Config of WebdriverIO + wdio-image-comparison-service
The capability of the device on which i use the browser to run the specs on

{
      real_mobile: true,
      browserName: 'safari',
      platform: 'iOS',
      os_version: 14,
      device: 'iPhone 11',
      orientation: 'PORTRAIT',
      'browserstack.appium_version': '1.19.1',
      buildName: buildDescription,
      projectBrowserName: SCREEN_SIZE.IPHONE_12.type,
      projectName,
    },

Describe the bug
Given i run specs on real device on a browser in iphone the baseline images created on ${baselineFolder}/baseLineimages.png
and i fail to see a folder being created as its for desktop_chrome

To Reproduce
Run tests against mobile device

Expected behavior
Expected to created baseline image in the folder of the device name

Log

Additional context

Environment (please complete the following information):

• Node.js version: [v14.15.5]
• NPM version: [6.14.11]
• Browser name and version: [Chrome 91]
• Platform name and version: [Windows 10]
• WebdriverIO version: [7]
• wdio-image-comparison-service version: [7.1.0]
• tsc: [4.3.5]

Describe the bug
Cannot find name 'expect'

To Reproduce
tsconfig: Add "wdio-image-comparison-service" for "types"
run npm test

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

Expected behavior
Clear compilation

Log

Execution of 1 workers started at 2021-07-01T15:18:51.989Z

2021-07-01T15:18:52.133Z INFO @wdio/cli:launcher: Run onPrepare hook
2021-07-01T15:18:52.134Z INFO chromedriver: Start Chromedriver (C:\GitHub\wdio\node_modules\chromedriver\lib\chromedriver\chromedriver.exe) with 
args --port=9515 --url-base=/
2021-07-01T15:18:52.159Z INFO chromedriver: Starting ChromeDriver 91.0.4472.101 (af52a90bf87030dd1523486a1cd3ae25c5d76c9b-refs/branch-heads/4472@{#1462}) on port 9515
2021-07-01T15:18:52.159Z INFO chromedriver: Only local connections are allowed.
2021-07-01T15:18:52.160Z INFO chromedriver: Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
2021-07-01T15:18:52.164Z INFO chromedriver: ChromeDriver was started successfully.
2021-07-01T15:18:52.265Z INFO @wdio/cli:launcher: Run onWorkerStart hook
2021-07-01T15:18:52.270Z INFO @wdio/local-runner: Start worker 0-0 with arg: run,./wdio.conf.js
[0-0] 2021-07-01T15:18:53.069Z INFO @wdio/local-runner: Run worker command: run
[0-0] 2021-07-01T15:18:55.960Z WARN @wdio/mocha-framework: Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
[0-0] `browser` object has only `capabilities` and some flags like `isMobile`.
[0-0] Helper files that use other `browser` commands have to be moved to `before` hook.
[0-0] Spec file(s): C:\GitHub\wdio\test\specs\example.ts
[0-0] Error: TSError: ⨯ Unable to compile TypeScript:
[0-0] test/specs/example.ts(12,15): error TS2304: Cannot find name 'expect'.
[0-0]
[0-0]     at createTSError (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:587:12)
[0-0]     at reportTSError (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:591:19)
[0-0]     at getOutput (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:921:36)
[0-0]     at Object.compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1189:32)
[0-0]     at Module.m._compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1295:42)
[0-0]     at Module.m._compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1295:23)
[0-0]     at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
[0-0]     at require.extensions.<computed> (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1298:12)
[0-0]     at Object.require.extensions.<computed> [as .ts] (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1298:12)
[0-0]     at Module.load (internal/modules/cjs/loader.js:928:32)
[0-0] RUNNING in chrome - C:\GitHub\wdio\test\specs\example.ts
[0-0] 2021-07-01T15:18:56.085Z INFO webdriver: Initiate new session using the WebDriver protocol
[0-0] 2021-07-01T15:18:56.086Z INFO webdriver: [POST] http://localhost:9515/session
[0-0] 2021-07-01T15:18:56.086Z INFO webdriver: DATA {
[0-0]   capabilities: {
[0-0]     alwaysMatch: { browserName: 'chrome', acceptInsecureCerts: true },
[0-0]     firstMatch: [ {} ]
[0-0]   },
[0-0]   desiredCapabilities: { browserName: 'chrome', acceptInsecureCerts: true }
[0-0] }

DevTools listening on ws://127.0.0.1:54207/devtools/browser/84f39e7f-7451-49a4-b524-42c9dfe923a4
[27008:31760:0701/231856.520:ERROR:device_event_log_impl.cc(214)] [23:18:56.519] Bluetooth: bluetooth_adapter_winrt.cc:1072 Getting Default Adapter failed.
[0-0] 2021-07-01T15:18:56.732Z INFO wdio-image-comparison-service: Adding commands to global browser
[0-0] 2021-07-01T15:18:56.736Z ERROR @wdio/runner: Error: Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
[0-0] `browser` object has only `capabilities` and some flags like `isMobile`.
[0-0] Helper files that use other `browser` commands have to be moved to `before` hook.
[0-0] Spec file(s): C:\GitHub\wdio\test\specs\example.ts
[0-0] Error: TSError: ⨯ Unable to compile TypeScript:
[0-0] test/specs/example.ts(12,15): error TS2304: Cannot find name 'expect'.
[0-0]
[0-0]     at createTSError (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:587:12)
[0-0]     at reportTSError (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:591:19)
[0-0]     at getOutput (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:921:36)
[0-0]     at Object.compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1189:32)
[0-0]     at Module.m._compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1295:42)
[0-0]     at Module.m._compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1295:23)
[0-0]     at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
[0-0]     at require.extensions.<computed> (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1298:12)
[0-0]     at Object.require.extensions.<computed> [as .ts] (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1298:12)
[0-0]     at Module.load (internal/modules/cjs/loader.js:928:32)
[0-0]     at MochaAdapter._loadFiles (C:\GitHub\wdio\node_modules\@wdio\mocha-framework\build\index.js:85:35)
[0-0]     at processTicksAndRejections (internal/process/task_queues.js:93:5)
[0-0]     at MochaAdapter.init (C:\GitHub\wdio\node_modules\@wdio\mocha-framework\build\index.js:54:9)
[0-0]     at Object.adapterFactory.init (C:\GitHub\wdio\node_modules\@wdio\mocha-framework\build\index.js:305:22)
[0-0]     at Runner.run (C:\GitHub\wdio\node_modules\@wdio\runner\build\index.js:82:27)
[0-0]  Error:  Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
`browser` object has only `capabilities` and some flags like `isMobile`.
Helper files that use other `browser` commands have to be moved to `before` hook.
Spec file(s): C:\GitHub\wdio\test\specs\example.ts
Error: TSError: ⨯ Unable to compile TypeScript:
test/specs/example.ts(12,15): error TS2304: Cannot find name 'expect'.

    at createTSError (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:587:12)
    at reportTSError (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:591:19)
    at getOutput (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:921:36)
    at Object.compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1189:32)
    at Module.m._compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1295:42)
    at Module.m._compile (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1295:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at require.extensions.<computed> (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1298:12)
    at Object.require.extensions.<computed> [as .ts] (C:\GitHub\wdio\node_modules\ts-node\src\index.ts:1298:12)
    at Module.load (internal/modules/cjs/loader.js:928:32)
[0-0] 2021-07-01T15:18:56.738Z INFO webdriver: COMMAND deleteSession()
[0-0] 2021-07-01T15:18:56.738Z INFO webdriver: [DELETE] http://localhost:9515/session/f88bd0d08e0134347c82e7e36d272686
[0-0] FAILED in chrome - C:\GitHub\wdio\test\specs\example.ts
2021-07-01T15:18:56.912Z INFO @wdio/cli:launcher: Run onComplete hook

Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:04

2021-07-01T15:18:56.913Z INFO @wdio/local-runner: Shutting down spawned worker
2021-07-01T15:18:57.168Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully
2021-07-01T15:18:57.169Z INFO @wdio/local-runner: shutting down
npm ERR! Test failed.  See above for more details.

example.ts

describe('Example', () => {
    it('should save some screenshots', async () => {
     await expect(browser.checkScreen('examplePaged', { /* some options */ })).toEqual(0);
    });
  });

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./build",
        "allowJs": true,
        "inlineSourceMap": true,
        "types": [
            "node",
            "webdriverio/async",
            "@wdio/mocha-framework",
            "wdio-image-comparison-service"
        ],
        "module": "commonjs",
        "target": "ES6"
    }
}

NOTE: Be aware of the fact that this module is only a plugin that provides all functionality from webdriver-image-comparison. So please check if this is an issue with this plugin or with webdriver-image-comparison.

Environment (please complete the following information):

• Node.js version: [14.17.0]
• NPM version: [6.14.13]
• Browser name and version: [iOS 15 Safari]
• Platform name and version: [iOS 15]
• WebdriverIO version: [7.7.8]
• wdio-image-comparison-service version: [3.1.0]

Config of WebdriverIO + wdio-image-comparison-service
Attached zip

Describe the bug
On the iOS 15 our DOM elements screenshots are shifted up by about size of the status bar
To Reproduce
Steps to reproduce the behavior:
[iOS_15_Test_Project.zip]

Expected behavior
iOS 15 has the same screenshots as previous versions (iOS 14) without shifting

Environment

• Node.js version: 8.11.4
• NPM version: 6.5.0
• Browser name and version: Fifefox
• Platform name and version: MacOs
• WebdriverIO version: 5.12.4
• wdio-image-comparison-service version: 1.4.0

Describe the bug
Once I made a deploy I got an error

Expected behavior
successful build

Log

[1570036759] ^
[1570036790] node-pre-gyp WARN Using request for node-pre-gyp https download
[1570036790] node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.0/canvas-v2.6.0-node-v48-linux-glibc-x64.tar.gz
[1570036790] node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v48 ABI, glibc) (falling back to source compile with node-gyp)
[1570036791] Package pixman-1 was not found in the pkg-config search path.
[1570036791] Perhaps you should add the directory containing `pixman-1.pc'
[1570036791] to the PKG_CONFIG_PATH environment variable
[1570036791] No package 'pixman-1' found
[1570036791] gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
[1570036791] gyp ERR! configure error
[1570036791] gyp ERR! stack Error: `gyp` failed with exit code: 1

Environment (please complete the following information):

• Node.js version: 14.17.3
• NPM version: 6.14.13
• Browser name and version: 93.0.4577.63 (arm64)
• Platform name and version: MAC OS 11.5 (APPLE M1)
• WebdriverIO version: 7.9.1
• wdio-image-comparison-service version: 7.2.0

Describe the bug

await browser.url('http://www.baidu.com')
await browser.checkElement($('#kw'), 'baidu', { /* some options */ })

Got error in checkElement function

To Reproduce
For more detail, please refer to project below:
https://github.com/Curt900701/issues_image-camparison

And run with command npm run test

Log

> @ test /Users/dongyang/Project/github/issues_image-camparison
> npx wdio run wdio.conf.js


Execution of 1 workers started at 2021-09-17T13:36:02.950Z

2021-09-17T13:36:06.829Z INFO @wdio/cli:launcher: Run onPrepare hook
2021-09-17T13:36:06.833Z INFO @wdio/cli:launcher: Run onWorkerStart hook
2021-09-17T13:36:06.835Z INFO @wdio/local-runner: Start worker 0-0 with arg: run,wdio.conf.js
[0-0] 2021-09-17T13:36:07.223Z INFO @wdio/local-runner: Run worker command: run
[0-0] RUNNING in chrome - /cases/test.js
[0-0] 2021-09-17T13:36:07.447Z INFO devtools:puppeteer: Initiate new session using the DevTools protocol
[0-0] 2021-09-17T13:36:07.449Z INFO devtools: Launch Google Chrome with flags: --enable-automation --disable-popup-blocking --disable-extensions --disable-background-networking --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-sync --metrics-recording-only --disable-default-apps --mute-audio --no-first-run --no-default-browser-check --disable-hang-monitor --disable-prompt-on-repost --disable-client-side-phishing-detection --password-store=basic --use-mock-keychain --disable-component-extensions-with-background-pages --disable-breakpad --disable-dev-shm-usage --disable-ipc-flooding-protection --disable-renderer-backgrounding --force-fieldtrials=*BackgroundTracing/default/ --enable-features=NetworkService,NetworkServiceInProcess --disable-features=site-per-process,TranslateUI,BlinkGenPropertyTrees --window-position=0,0 --window-size=1200,900 --window-size=1920,1080
[0-0] 2021-09-17T13:36:09.554Z INFO devtools: Connect Puppeteer with browser on port 51554
[0-0] 2021-09-17T13:36:10.534Z INFO wdio-image-comparison-service: Adding commands to global browser
[0-0] 2021-09-17T13:36:10.553Z INFO devtools: COMMAND navigateTo("http://www.baidu.com/")
[0-0] 2021-09-17T13:36:11.968Z INFO devtools: RESULT null
[0-0] 2021-09-17T13:36:11.969Z INFO webdriver: COMMAND checkElement(<object>, "baidu", <object>)
[0-0] 2021-09-17T13:36:12.043Z INFO devtools: COMMAND findElement("css selector", "#kw")
[0-0] 2021-09-17T13:36:12.044Z INFO devtools: COMMAND executeScript(<fn>, <object>)
[0-0] 2021-09-17T13:36:12.086Z INFO devtools: RESULT { 'element-6066-11e4-a52e-4f735466cecf': 'ELEMENT-1' }
[0-0] 2021-09-17T13:36:12.127Z INFO devtools: COMMAND executeScript(<fn>, <object>)
[0-0] 2021-09-17T13:36:12.140Z INFO devtools: RESULT {
[0-0]   dimensions: {
[0-0]     body: { scrollHeight: 688, offsetHeight: 688 },
[0-0]     html: {
[0-0]       clientHeight: 688,
[0-0]       clientWidth: 1440,
[0-0]       scrollHeight: 688,
[0-0]       scrollWidth: 1440,
[0-0]       offsetHeight: 688
[0-0]     },
[0-0]     window: {
[0-0]       innerWidth: 1440,
[0-0]       innerHeight: 688,
[0-0]       outerHeight: 811,
[0-0]       outerWidth: 1440,
[0-0]       devicePixelRatio: 2,
[0-0]       screenWidth: 1440,
[0-0]       screenHeight: 900
[0-0]     }
[0-0]   }
[0-0] }
[0-0] 2021-09-17T13:36:12.143Z INFO devtools: COMMAND takeScreenshot()
[0-0] 2021-09-17T13:36:12.451Z INFO devtools: RESULT iVBORw0KGgoAAAANSUhEUgAAC0AAAAVcCAYAAACvZBvdAAABKmlDQ1BTa2lhA...
[0-0] 2021-09-17T13:36:12.454Z INFO devtools: COMMAND executeScript(<fn>, <object>)
[0-0] stale element reference in "tests should be OK"
stale element reference: The element with reference (...args) => target.then(async (elem) => {
                    if (!elem) {
                        let errMsg = 'Element could not be found';
                        const prevElem = await promise;
                        if (Array.isArray(prevElem) && prevInnerArgs && prevInnerArgs.prop === 'get') {
                            errMsg = `Index out of bounds! $$(${prevInnerArgs.args[0]}) returned only ${prevElem.length} elements.`;
                        }
                        throw new Error(errMsg);
                    }
                    return elem[prop](...args);
                }) is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed
stale element reference: stale element reference: The element with reference (...args) => target.then(async (elem) => {
                    if (!elem) {
                        let errMsg = 'Element could not be found';
                        const prevElem = await promise;
                        if (Array.isArray(prevElem) && prevInnerArgs && prevInnerArgs.prop === 'get') {
                            errMsg = `Index out of bounds! $$(${prevInnerArgs.args[0]}) returned only ${prevElem.length} elements.`;
                        }
                        throw new Error(errMsg);
                    }
                    return elem[prop](...args);
                }) is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed
    at getStaleElementError (/Users/dongyang/Project/github/issues_image-camparison/node_modules/devtools/build/utils.js:183:19)
    at /Users/dongyang/Project/github/issues_image-camparison/node_modules/devtools/build/utils.js:156:23
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Promise.all (index 0)
[0-0] 2021-09-17T13:36:12.464Z INFO devtools: COMMAND deleteSession()
[0-0] 2021-09-17T13:36:12.465Z INFO devtools: RESULT null
[0-0] FAILED in chrome - /cases/test.js
2021-09-17T13:36:12.601Z INFO @wdio/cli:launcher: Run onComplete hook

 "spec" Reporter:
------------------------------------------------------------------
[Chrome 93.0.4577.82 darwin #0-0] Running: Chrome (v93.0.4577.82) on darwin
[Chrome 93.0.4577.82 darwin #0-0] Session ID: 450a2f5a-6554-49ed-9aa9-84a14477c17c
[Chrome 93.0.4577.82 darwin #0-0]
[Chrome 93.0.4577.82 darwin #0-0] » /cases/test.js
[Chrome 93.0.4577.82 darwin #0-0] tests
[Chrome 93.0.4577.82 darwin #0-0]    ✖ should be OK
[Chrome 93.0.4577.82 darwin #0-0]
[Chrome 93.0.4577.82 darwin #0-0] 1 failing (1.9s)
[Chrome 93.0.4577.82 darwin #0-0]
[Chrome 93.0.4577.82 darwin #0-0] 1) tests should be OK
[Chrome 93.0.4577.82 darwin #0-0] stale element reference: The element with reference (...args) => target.then(async (elem) => {
                    if (!elem) {
                        let errMsg = 'Element could not be found';
                        const prevElem = await promise;
                        if (Array.isArray(prevElem) && prevInnerArgs && prevInnerArgs.prop === 'get') {
                            errMsg = `Index out of bounds! $$(${prevInnerArgs.args[0]}) returned only ${prevElem.length} elements.`;
                        }
                        throw new Error(errMsg);
                    }
                    return elem[prop](...args);
                }) is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed
[Chrome 93.0.4577.82 darwin #0-0] stale element reference: The element with reference (...args) => target.then(async (elem) => {
[Chrome 93.0.4577.82 darwin #0-0]                     if (!elem) {
[Chrome 93.0.4577.82 darwin #0-0]                         let errMsg = 'Element could not be found';
[Chrome 93.0.4577.82 darwin #0-0]                         const prevElem = await promise;
[Chrome 93.0.4577.82 darwin #0-0]                         if (Array.isArray(prevElem) && prevInnerArgs && prevInnerArgs.prop === 'get') {
[Chrome 93.0.4577.82 darwin #0-0]                             errMsg = `Index out of bounds! $$(${prevInnerArgs.args[0]}) returned only ${prevElem.length} elements.`;
[Chrome 93.0.4577.82 darwin #0-0]                         }
[Chrome 93.0.4577.82 darwin #0-0]                         throw new Error(errMsg);
[Chrome 93.0.4577.82 darwin #0-0]                     }
[Chrome 93.0.4577.82 darwin #0-0]                     return elem[prop](...args);
[Chrome 93.0.4577.82 darwin #0-0]                 }) is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed
[Chrome 93.0.4577.82 darwin #0-0] stale element reference: stale element reference: The element with reference (...args) => target.then(async (elem) => {
[Chrome 93.0.4577.82 darwin #0-0]                     if (!elem) {
[Chrome 93.0.4577.82 darwin #0-0]                         let errMsg = 'Element could not be found';
[Chrome 93.0.4577.82 darwin #0-0]                         const prevElem = await promise;
[Chrome 93.0.4577.82 darwin #0-0]                         if (Array.isArray(prevElem) && prevInnerArgs && prevInnerArgs.prop === 'get') {
[Chrome 93.0.4577.82 darwin #0-0]                             errMsg = `Index out of bounds! $$(${prevInnerArgs.args[0]}) returned only ${prevElem.length} elements.`;
[Chrome 93.0.4577.82 darwin #0-0]                         }
[Chrome 93.0.4577.82 darwin #0-0]                         throw new Error(errMsg);
[Chrome 93.0.4577.82 darwin #0-0]                     }
[Chrome 93.0.4577.82 darwin #0-0]                     return elem[prop](...args);
[Chrome 93.0.4577.82 darwin #0-0]                 }) is stale; either the element is no longer attached to the DOM, it is not in the current frame context, or the document has been refreshed
[Chrome 93.0.4577.82 darwin #0-0]     at getStaleElementError (/Users/dongyang/Project/github/issues_image-camparison/node_modules/devtools/build/utils.js:183:19)
[Chrome 93.0.4577.82 darwin #0-0]     at /Users/dongyang/Project/github/issues_image-camparison/node_modules/devtools/build/utils.js:156:23
[Chrome 93.0.4577.82 darwin #0-0]     at processTicksAndRejections (internal/process/task_queues.js:95:5)
[Chrome 93.0.4577.82 darwin #0-0]     at async Promise.all (index 0)


Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:09 

2021-09-17T13:36:12.602Z INFO @wdio/local-runner: Shutting down spawned worker
2021-09-17T13:36:12.856Z INFO @wdio/local-runner: Waiting for 0 to shut down gracefully
2021-09-17T13:36:12.857Z INFO @wdio/local-runner: shutting down
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ test: `npx wdio run wdio.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I am new to WDIO, just exploring the features for WDIO - visual testing. I tried to do visual comparison of an element ["..pluginRowBlock"] on WDIO page.
The baseline image of the element which is stored under .tmp folder is something else not the screenshot of the .pluginRowBlock [expected: image contains getstarted ,watch talk etc] actual image in tmp folder is doc,api,help that whole section.

Sorry i am not able upload the screenshot:(

here is my code

describe('Visual test',()=>{
    it('Verify visual of webdriver IO page',()=>{
    // Check a screen
    browser.url('https://webdriver.io');
    //expect(browser.checkScreen('examplePaged')).toEqual(0);
    const title = browser.getTitle();
    assert.strictEqual(title, 'WebdriverIO · Next-gen browser automation test framework for Node.js');
    //assert.equal(browser.checkScreen('examplePaged'),0,"Home page is not matching with baseline"); 
   
    assert.equal(browser.checkElement($(".pluginRowBlock"),'rowblock'),0,"row block is not matching with baseline");    
    });
}); 

Environment (please complete the following information):

• Node.js version: 12.14.1
• NPM version: 6.13.4
• Platform name and version: macOS Mojave 10.14.6
• WebdriverIO version: 5.18.7
• wdio-image-comparison-service version: 1.12.0

Describe the bug
Errors in compile because types functions haven't type 'void' or 'numbers'

To Reproduce

1. tsconfig: Add "wdio-image-comparison-service" for "types"
2. run tsc -p tsconfig.json --noEmit --strict

Expected behavior
Clear compilation

Log

node_modules/wdio-image-comparison-service/types/index.d.ts:6:9 - error TS7010: 'saveElement', which lacks return-type annotation, implicitly has an 'any' return type.

6         saveElement(element: Element, tag: string, saveElementOptions?: {});
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/wdio-image-comparison-service/types/index.d.ts:11:9 - error TS7010: 'saveScreen', which lacks return-type annotation, implicitly has an 'any' return type.

11         saveScreen(tag: string, saveScreenOptions?: {});
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/wdio-image-comparison-service/types/index.d.ts:16:9 - error TS7010: 'saveFullPageScreen', which lacks return-type annotation, implicitly has an 'any' return type.

16         saveFullPageScreen(tag: string, saveFullPageScreenOptions?: {});
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/wdio-image-comparison-service/types/index.d.ts:21:9 - error TS7010: 'saveTabbablePage', which lacks return-type annotation, implicitly has an 'any' return type.

21         saveTabbablePage(tag: string, saveTabbableOptions?: {});
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/wdio-image-comparison-service/types/index.d.ts:26:9 - error TS7010: 'checkElement', which lacks return-type annotation, implicitly has an 'any' return type.

26         checkElement(element: Element, tag: string, checkElementOptions?: {});
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/wdio-image-comparison-service/types/index.d.ts:31:9 - error TS7010: 'checkScreen', which lacks return-type annotation, implicitly has an 'any' return type.

31         checkScreen(tag: string, checkScreenOptions?: {});
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/wdio-image-comparison-service/types/index.d.ts:36:9 - error TS7010: 'checkFullPageScreen', which lacks return-type annotation, implicitly has an 'any' return type.

36         checkFullPageScreen(tag: string, checkFullPageOptions?: {});
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/wdio-image-comparison-service/types/index.d.ts:41:9 - error TS7010: 'checkTabbablePage', which lacks return-type annotation, implicitly has an 'any' return type.

41         checkTabbablePage(tag: string, checkTabbableOptions?: {});
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~