网络驱动程序。 JS。 摩卡。 尝试导入页面对象时 - 错误：无法在模块外使用 import 语句

Question

我正在编写自动化测试并尝试使用页面 object 模式，这就是我需要将页面对象导入测试文件的原因。 根据 Webdriverio 文档，为了启用导入，我需要安装 Babel。 我确实安装了它，但它没有解决问题。 我使用了 Webdriverio 文档中的命令： npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/register Webdriverio 文档还说需要将以下更改添加到 wdio .conf.js 文件：

        ui: 'bdd',
        require: ['@babel/register', './test/helpers/common.js'],

我试图这样做，但我似乎没有 ./test/helpers/common.js 目录的 common.js 文件。 这个目录应该指什么？ 如果我需要创建 common.js 文件，它应该包含什么？ 节点版本：12.13.0 Webdriverio：6.1.5 任何帮助将不胜感激。

Answer 1

看起来您缺少 babeljs 的配置文件 (babel.config.js)。 你应该把它放在根目录下。

根据此处的官方文档，以下是您应该在其中包含的内容。

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                node: 12 //version should be based on which version you need.
            }
        }]
    ]
}

您可以在此处阅读有关此文件的更多信息。

我在这里创建了一个工作示例供您参考。

Answer 2

嗨，我使用 Ecmascript 模块进行了相同的配置，但它不起作用。 我如何将此配置与 ecmascript 模块一起使用。

wdio.conf.cjs

exports.config = {
  reporters: [
    "dot",
    [
      "junit",
      {
        outputDir: "./",
        outputFileFormat: function (options) {
          // optional
          return `results-${options.cid}.xml`
        },
      },
    ],
  ],
  user: process.env.BROWSERSTACK_USERNAME,
  key: process.env.BROWSERSTACK_ACCESS_KEY,
  capabilities: [
    {
      browser: "Chrome",
      os: "OS X",
      os_version: "catalina",
      browser_version: "86",
      build: "iProov WebSrc",
      "goog:chromeOptions": {
        args: ["--use-fake-device-for-media-stream", "--use-fake-ui-for-media-stream"],
      }
    },
  ],
  host: "hub.browserstack.com",
  services: [["browserstack", {}]],
  runner: "local",
  specs: ["./test/specs/move-down.spec.js"],
  maxInstances: 10,
  logLevel: "info",
  bail: 0,
  waitforTimeout: 20000,
  connectionRetryTimeout: 120000,
  connectionRetryCount: 3,
  framework: "mocha",
  mochaOpts: {
    ui: "bdd",
    timeout: 60000,
    require: ['@babel/register']
  },
  
}

package.json

{
  "name": "test",
  "description": "test",
  "version": "3.1.0-alpha.0",
  "license": "GPL-2.0",
  "type": "module",
  "scripts": {
    "test": "./node_modules/.bin/wdio wdio.conf.cjs",
  },
  "lint-staged": {
    "linters": {
      "*.js": [
        "pretty-quick --staged",
        "eslint src/**/*.js --fix",
        "git add"
      ]
    },
    "ignore": [
      "**/dist/*.min.js"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "postcss": {
    "map": false,
    "plugins": {
      "cssnano": {}
    }
  },
  "dependencies": {
    "@mattiasbuelens/web-streams-adapter": "^0.1.0-alpha.3",
    "@tensorflow-models/blazeface": "^0.0.5",
    "@tensorflow/tfjs-backend-wasm": "^2.6.0",
    "@tensorflow/tfjs-converter": "^2.6.0",
    "@tensorflow/tfjs-core": "^2.6.0",
    "@tweenjs/tween.js": "^18",
    "@wdio/allure-reporter": "^6.6.3",
    "@wdio/dot-reporter": "^6.6.0",
    "@wdio/junit-reporter": "^6.6.0",
    "@webcomponents/webcomponentsjs": "^2.4.3",
    "core-js": "^3.6.5",
    "events": "^3.0.0",
    "fsevents": "1.2.13",
    "screenfull": "^5.0.2",
    "socket.io-client": "^2.2.0",
    "three-full": "^28.0.2",
    "ua-parser-js": "^0.7.20",
    "wdio-browserstack-reporter": "^0.1.1",
    "web-component": "^1.0.25",
    "web-streams-polyfill": "^2.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.2.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.11.5",
    "@babel/polyfill": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@babel/register": "^7.11.5",
    "@babel/runtime": "^7.12.1",
    "@jest-environment-browserstack/selenium-webdriver": "^2.0.1",
    "@jest/globals": "^26.4.2",
    "@wdio/browserstack-service": "^6.6.3",
    "@wdio/cli": "^6.6.4",
    "@wdio/local-runner": "^6.6.6",
    "@wdio/mocha-framework": "^6.6.6",
    "@wdio/spec-reporter": "^6.6.6",
    "@wdio/sync": "^6.6.4",
    "arraybuffer-loader": "^1.0.8",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "browserslist": "^4.14.5",
    "chai": "^4.2.0",
    "chromedriver": "^86.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^6.2.0",
    "cross-env": "^7.0.2",
    "css-loader": "^1.0.0",
    "cssnano": "^4.1.10",
    "dotenv": "^6.1.0",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-plugin-prettier": "^3.1.4",
    "exports-loader": "^0.7.0",
    "extract-css-chunks-webpack-plugin": "^4.7.5",
    "file-loader": "^1.1.11",
    "glsl-minifier": "^0.0.12",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.3.1",
    "imagemin": "^6.0.0",
    "imagemin-svgo": "^7.0.0",
    "img-loader": "^3.0.0",
    "imports-loader": "^0.8.0",
    "jest": "^26.4.2",
    "jest-environment-browserstack": "^2.0.1",
    "jest-environment-webdriver": "^0.2.0",
    "jest-html-reporter": "^3.3.0",
    "karma": "^5.2.2",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage": "^2.0.3",
    "karma-coverage-istanbul-reporter": "^3.0.3",
    "karma-junit-reporter": "^2.0.1",
    "karma-mocha": "^2.0.1",
    "karma-spec-reporter": "^0.0.32",
    "karma-webpack": "^4.0.2",
    "lint-staged": "^8.1.5",
    "mini-css-extract-plugin": "^0.11.3",
    "mocha": "^7.2.0",
    "mocha-junit-reporter": "^2.0.0",
    "mocha-webpack": "^1.1.0",
    "npm-run-all": "^4.1.5",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "prettier": "^2.1.2",
    "pretty-quick": "^1.10.0",
    "raw-loader": "^0.5.1",
    "regenerator-runtime": "^0.13.7",
    "shader-loader": "^1.3.1",
    "sinon": "^9.0.2",
    "style-loader": "^1.3.0",
    "terser-webpack-plugin": "^4.2.2",
    "wdio-chromedriver-service": "^6.0.4",
    "webpack": "^4.44.1",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-glsl-loader": "^1.0.1",
    "webpack-merge": "^4.2.2",
    "worker-loader": "^3.0.3"
  }
}