webdriver-iopercy

TypeError: webdriverio_1.default is not a function - Percy2 and WebdriverIO7

I get this error using webdriverio v7 and latest Percy for visual testing:

[0-2] Error in "0: I can see page "Product Detail Page of the last product""
TypeError: webdriverio_1.default is not a function
    at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:45
    at Browser.call (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\webdriverio\build\commands\browser\call.js:43:16)
    at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\@wdio\sync\build\wrapCommand.js:105:34)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\@wdio\sync\build\wrapCommand.js:100:24)
    at Browser.wrapCommandFn (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\@wdio\sync\build\wrapCommand.js:67:44)
    at World.<anonymous> (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:13)
    at World.executeSync (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\@wdio\sync\build\index.js:38:22)
    at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\@wdio\sync\build\index.js:69:68

It doesn't even get to percy, so there is no screenshot there.
All I do in the code is taking screenshot of the page:

import percySnapshot from '@percy/webdriverio';
import { Then } from '@cucumber/cucumber';
Then(/^I can see page "([^"]*)"$/, (name: string) => {
  browser.waitForPageToLoad();
  browser.call(() => percySnapshot(name));
});

This is my package.json file:

"devDependencies": {
    "@cucumber/cucumber": "^7.1.0",
    "@percy/cli": "^1.0.0-beta.48",
    "@percy/webdriverio": "^2.0.0",
    "@types/chai": "^4.2.16",
    "@types/node": "^14.14.41",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "allure-commandline": "^2.13.8",
    "app-root-path": "^3.0.0",
    "chai": "^4.3.4",
    "eslint": "^7.24.0",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-prettier": "^3.4.0",
    "husky": "^6.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "ts-node": "^9.1.1",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^4.2.4",
    "webdriverio": "^7.4.6"
  },
  "dependencies": {
    "@wdio/allure-reporter": "^7.4.2",
    "@wdio/cli": "^7.4.6",
    "@wdio/cucumber-framework": "^7.4.6",
    "@wdio/local-runner": "^7.4.6",
    "@wdio/selenium-standalone-service": "^7.4.2",
    "@wdio/spec-reporter": "^7.4.3",
    "@wdio/sync": "^7.4.6"
  }

Note:
This used to work prior upgrading to webdriverIO v7 and percy v2.
Anybody has an idea how to solve it?
Thanks!

Solution

  • Discussed here github
    I needed to add in tsconfig.json file these options:

    "esModuleInterop": true,  
"allowSyntheticDefaultImports": true,