Webdriverio. JS. Mocha. When trying to import page objects - error: Cannot use import statement outside a module

Question

I'm writing automation tests and trying to use the page object pattern, that's why I need to import page objects into the test files. According to Webdriverio docs, in order to enable import, I need to install Babel. I did install it, however it didn't fix the problem. I used the command from the Webdriverio docs: npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/register The Webdriverio doc also says that the following changes need to be added to the wdio.conf.js file:

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

I tried to do that, but I don't seem to have./test/helpers/common.js directory of common.js file. What should this directory refer to? If I need to create the common.js file what should it contain? Node version: 12.13.0 Webdriverio: 6.1.5 Any help would be greatly appreciated.

Answer 1

It looks like you are missing the config file (babel.config.js) for babeljs. You should have it in the root.

Below is what you should have inside it as per official docs here .

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

You can read more about this file here .

I have created a working example here for your reference.

Answer 2

Hi I have the same configuration using Ecmascript module but it does not work. How can i use this configuration with ecmascript modules.

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