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

Question

我在使用 webdriverio v7 和最新的 Percy 进行视觉测试时遇到此错误：

[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

它甚至没有到达 percy，所以那里没有屏幕截图。
我在代码中所做的就是截取页面的屏幕截图：

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

这是我的 package.json 文件：

"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"
  }

注：
这曾经在升级到 webdriverIO v7 和 percy v2 之前工作。
有人知道如何解决吗？
谢谢！

Answer 1

在这里讨论 github
我需要在 tsconfig.json 文件中添加这些选项：

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

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

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

webdriver-io

percy