In Typescript browser.imageComparison is undefined

[petersenrr]

I have a repo that is in typescript and I am trying to use this image comparison but I get the error TypeError: Cannot read property 'checkScreen' of undefined

here is the code that I thought would work that is causing the error

expect(await browser.imageComparison.checkScreen('fullpage', {ignoreColors: true, ignoreAntialiasing: true})).to.be.below(.05);
let visualPercentage = await browser.imageComparison.checkScreen('fullpage', {ignoreColors: true, ignoreAntialiasing: true})

Environment:

• Node.js version: v14.20.0
• NPM version: 6.14.17
• Browser name and version: Chrome 104
• Platform name and version: Windows 11
• Framework name and version: Webdriverio
• Plugin name and version: webdriver-image-comparison
• webdriver-image-comparison version: 0.22.0

[wswebcreation]

Normally this happens because one of the following reasons

1. you didn’t add the typescript definition, see https://github.com/wswebcreation/wdio-image-comparison-service#typescript-support
2. You didn’t include the service (correctly).

Can you check them both and if that’s not the case then can you please provide you complete config files?

[petersenrr]

Here are my config files

tsconfig.json

{
    "compilerOptions": {
      "target": "esnext",
      "module" : "CommonJS",
      "esModuleInterop": true,
      "moduleResolution": "node",
      "types": [
        "node",
        "webdriverio/sync",
        "@wdio/mocha-framework",
        "expect-webdriverio",
        "wdio-image-comparison-service"
      ]
    },
    "include": [
      "./test/**/*.ts", "wdio.conf.ts",
    ]
  }

and config.json

{
  "default": {
    "baseHost": 
    "beforeLaunchLogin": false,
    "dataCreationBaseHost": 
    "devKey":
    "globalTimeout": 20000,
    "ignoreSynchronization": true,
    "localCode": false,
    "repository": {
      "type": "git",
      "url": 
    },
    "license":
    "loginGlobalUser": false,
    "overrideByCss": true,
    "runInParallel": true,
    "exclude": [],
    "suites": {
      "all": [
        "./test/models/model-based-tests/**/*.ts"
      ]
    },
    "plugins": [
      {
        "package": "wdio-image-comparison-service",
        "options": {
          "autoSaveBaseline": true,
          "baselineFolder": "./avtBaseline/",
          "debug": true,
          "formatImageName": "'{tag}={width}x{height}'",
          "screenshotPath": "./avtCompare/",
          "savePerInstance": true
        }
      }
    ],
    "environment": [
      {
        "platform": "Windows 11",
        "browserName": "chrome"
      }
    ],
    "logCustomEvents": true,
    "logToSplunk": true,
    "framework": "mocha",
    "maximizeWindow": false,
    "mochaOpts": {
      "timeout": 90000,
      "useColors": true,
      "bail": false,
      "retries": 2
    },
    "sauceUser": 
    "sauceKey":
    "services": ["sauce"],
    "location": "SAUCE",
    "team": "Integration"
  },
  "local": {
    "environment": [
      {
        "browserName": "chrome"
      }
    ],
    "maxThreads": 1,
    "services": ["chromedriver"],
    "sauceUser": null,
    "sauceKey": null,
    "location": null,
    "seleniumAddress": "http://localhost:4444/wd/hub"
  }
}

I am new to this so maybe I did something wrong in these files

[wswebcreation]

You added the wdio-image-comparison-service in the plugins, it needs to be in the services