使用 ESLint 服务自动检测缺失的导入
您是否曾经运行过端到端测试，却在 10、15 或 30 分钟后才发现存在缺失/拼写错误的导入，而该错误直到测试运行到中间才会出现？发生这种情况时，测试运行器会将这些测试报告为失败。
ESLint 是一个用于在运行时之前捕获不同错误的强大工具，此服务在执行 WebdriverIO 测试之前运行 ESLint 工具，作为自动步骤而不是手动步骤。
越早发现问题越好，这样我们就可以更快地解决问题，而不是等到以后。
推荐的配置是使用未解析的运行器仅检查缺失的导入，但如果需要，您还可以配置服务以使用 npm 或 yarn 运行器在您的项目中运行 ESLint，或者通过传递一个标志来指示系统也使用您的 .eslintrc 配置。
安装
安装 wdio-eslinter-service
$ npm i wdio-eslinter-service --save-dev
快速入门 - 仅检查缺失或未解析的导入
默认情况下，此最小配置（“未解析”运行器）检查未解析的 require 导入，并在发现未解析的导入时抛出错误。然后，服务停止执行。如果需要，您可以自定义 .eslintrc.js 以使用“npm”或“yarn”运行器执行更多检查。有关更多详细信息，请参见ESLint。
如果您的项目中没有 .eslintrc.js 配置，则可以配置 wdio-eslinter-service 以使用默认配置，该配置在运行测试之前仅检查缺失的导入。这非常方便，这样您就可以尽早发现导入错误，而不是等到以后。要配置此项，请将以下 ESLint 配置添加到您的 services 数组中（假设您已经在使用 chromedriver 服务；否则，请省略该部分）
wdio.conf.js
services: ['chromedriver', [
'eslinter',
{
runnerType: 'unresolved'
}
]],
此时，开始运行测试，如果存在缺失或不正确的导入，WebdriverIO 将记录它并立即终止测试运行。
$ npx wdio
可选 - 如果使用模块别名
如果您使用的是module-alias 模块，该模块允许您配置别名以替换相对路径，则需要使用 eslint-import-resolver-custom-alias 插件将其传递到 ESLint 配置中。以下是一个示例。
services: ['chromedriver', [
'eslinter',
{
runnerType: 'unresolved',
eslintOverride: {
"settings": {
"import/resolver": {
"eslint-import-resolver-custom-alias": {
"alias": {
"@utils": "./utils",
"@specs": "./test-sync/specs",
"@pageobjects": "./test-sync/pageobjects",
"@": "./"
}
}
}
}
}
}
]],
在您的项目中安装插件。
$ npm i eslint-import-resolver-custom-alias
运行测试并验证系统是否会找到使用模块别名的不正确导入。
$ npx wdio
实验性 - 与项目中的现有 eslintrc 配置一起使用
要使 ESLint 服务也使用项目中的现有 eslintrc 配置，请在 wdio.conf.js 配置 services 数组中将 includeProjectEslintrc 设置为 true。
我遇到过插件冲突的问题。如果您的项目 ESLint 设置也在查找未解析的导入，则这可能无法正常工作，并且可能需要调整您的 .eslintrc.js。目前不建议这样做。
高级替代方案 - 使用 npm 和 yarn 运行器
npm 和 yarn 运行器有助于您更好地控制在项目中运行现有的 ESLint 设置。使用此配置，您可以在 package.json 的 run-scripts 部分定义要运行的其他命令。
在您的 package.json 中，将此条目添加到您的运行脚本中。
{
"scripts": {
"eslint": "eslint ."
}
}
注意：当使用 npm 或 yarn 运行器时，需要将 eslint 添加到 package.json 中才能使服务正常工作。
如果您尚未安装和配置 ESLint，则需要在您的项目中安装和配置它，以及您正在使用的任何插件，例如 eslint-plugin-import。
$ npm i eslint eslint-plugin-import
如果您使用的是 eslint-import-resolver-custom-alias 插件将模块别名映射到其实际路径，则也需要安装它。
$ npm i eslint-import-resolver-custom-alias
如果您的项目中还没有 eslintrc 配置文件，您还需要创建一个 .eslintrc.js 文件。以下是一个基本设置，仅用于查找未解析的导入，您可以扩展此配置以在运行测试之前验证其他代码质量检查。
// .eslintrc.js
module.exports = {
"parserOptions": {
"ecmaVersion": 2022
},
"plugins": [
"import"
],
"rules": {
"import/no-unresolved": [
2,
{
"commonjs": true,
"amd": false,
"caseSensitive": true
}
]
}
}
最后，将 eslinter 服务添加到 wdio.conf.js 中的 services 数组中。
services: ['eslinter']
运行 npm run eslint 以验证并检查错误。
如果您使用 yarn，则可以配置 runnerType 服务选项。
services: [
['eslinter', { runnerType: 'yarn' }]
]
如果您已经有要重用的 linter 脚本（而不是 eslint），则可以配置 scriptName 服务选项。
services: [
['eslinter', { scriptName: 'eslint:check' }]
]
在 WebdriverIO 中使用
像往常一样启动 WebdriverIO 的测试运行器。ESLint 将检查代码。如果发现错误，则会立即停止执行。
$ npx wdio
示例
$ npx wdio --spec ./test/specs/example.e2e.js
Execution of 1 spec files started at 2021-05-15T12:04:05.388Z
2021-05-15T12:04:05.793Z WARN wdio-eslinter-service: initialize wdio-eslint-service using npm runner.
Deleted files and directories:
/Users/jem/Dev/wdio-example/allure-results
/Users/jem/Dev/wdio-example/test/specs/login.js
1:22 error Unable to resolve path to module '.../pageObjects/Auth.page' import/no-unresolved
✖ 1 problem (1 error, 0 warnings)
2021-05-15T12:04:08.581Z ERROR wdio-eslinter-service: SEVERE: Code contains eslint errors or eslint not installed.
