[英]Webdriverio. JS. Mocha. When trying to import page objects - error: Cannot use import statement outside a module
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.我正在编写自动化测试并尝试使用页面 object 模式,这就是我需要将页面对象导入测试文件的原因。 According to Webdriverio docs, in order to enable import, I need to install Babel.
根据 Webdriverio 文档,为了启用导入,我需要安装 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:
我使用了 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'],
I tried to do that, but I don't seem to have./test/helpers/common.js directory of common.js file.我试图这样做,但我似乎没有 ./test/helpers/common.js 目录的 common.js 文件。 What should this directory refer to?
这个目录应该指什么? If I need to create the common.js file what should it contain?
如果我需要创建 common.js 文件,它应该包含什么? Node version: 12.13.0 Webdriverio: 6.1.5 Any help would be greatly appreciated.
节点版本:12.13.0 Webdriverio:6.1.5 任何帮助将不胜感激。
It looks like you are missing the config file (babel.config.js) for babeljs.看起来您缺少 babeljs 的配置文件 (babel.config.js)。 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.我在这里创建了一个工作示例供您参考。
Hi I have the same configuration using Ecmascript module but it does not work.嗨,我使用 Ecmascript 模块进行了相同的配置,但它不起作用。 How can i use this configuration with ecmascript modules.
我如何将此配置与 ecmascript 模块一起使用。
wdio.conf.cjs 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 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"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.