Vue CLI 集成 WebdriverIO在 Vue 项目中编写与运行端到端测试vue/cli-plugin-e2e-webdriverio 完全指南【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-clivue/cli-plugin-e2e-webdriverio是 Vue CLI 官方提供的端到端E2E测试插件它把 WebdriverIO 的测试能力无缝接入vue-cli-service命令体系。本文基于 e2e-webdriverio.md 文档并结合仓库中该插件的源码index.js、generator/index.js与生成模板完整讲解它的注入命令、生成的项目结构、本地与云端Sauce Labs双环境配置以及 headless、单测过滤、跳过开发服务器等实战用法。读完本文你将能够在新项目或已有项目中一键接入 WebdriverIO写出可运行、可维护的浏览器端到端测试。插件概览与能力定位WebdriverIO 是一个基于 WebDriver 协议的下一代浏览器自动化测试框架支持 Chrome、Firefox 等真实浏览器也支持在 Sauce Labs 等云端平台并行执行。Vue CLI 的 e2e-webdriverio 插件位于 packages/vue/cli-plugin-e2e-webdriverio以官方插件的形式做了三件事向vue-cli-service注入test:e2e命令自动完成「启动开发服务器 → 拉起 WebdriverIO 运行测试 → 结束后关闭服务器」的完整闭环通过生成器generator为项目渲染一套可直接运行的测试骨架页面对象PageObject、spec 用例、ESLint 配置以及三份 wdio 配置文件通过可选的交互式 prompt 让用户在安装时选择要运行的浏览器Chrome / Firefox并据此生成对应的 driver service 配置与依赖。从 package.json 可以看到该插件在 WebdriverIO v7 生态上构建核心依赖包括wdio/cli、wdio/local-runner、wdio/mocha-framework、wdio/sauce-service、wdio/spec-reporter、webdriverio与eslint-plugin-wdio测试框架默认使用 Mocha。chromedriver、geckodriver 及其对应的 service 包则以可选 peerDependencies的形式存在——只有当你在安装时选中了对应浏览器生成器才会把它们写入项目的 devDependencies。注入命令vue-cli-service test:e2e插件在 index.js 中通过api.registerCommand(test:e2e, ...)注册命令。注册信息如下descriptionrun end-to-end tests with WebdriverIOusagevue-cli-service test:e2e [options]options--remote在 SauceLabs 上远程运行测试--headless以无头模式运行测试以及所有 WebdriverIO CLI 选项例如--baseUrl、--bail等其中--headless是 Vue CLI 插件自身的扩展选项而「所有 WebdriverIO CLI 选项」并非虚言源码第 5-10 行直接从wdio/cli/build/commands/run中导出cmdArgs对象遍历后将其全部转成--param形式的 option 注入命令注册表。这意味着任何 WebdriverIO 的wdio run参数--spec、--baseUrl、--bail、--logLevel等都可以直接跟在vue-cli-service test:e2e之后透传使用。另外注意 index.js 第 67-69 行module.exports.defaultModes { test:e2e: production }即test:e2e默认以production模式启动这保证了被测页面按生产环境构建产物运行测试结果更贴近真实部署形态。命令执行的完整调用链从 index.js 可以看到test:e2e的执行流程启动开发服务器调用startDevServer(args, api)如果用户通过--baseUrl指定了被测地址则直接复用不启动服务器否则内部调用api.service.run(serve)拉起 dev server注入 baseUrl若用户没有显式传--baseUrl插件会把 dev server 的地址推入原始参数rawArgs.push(--baseUrl${url})保证 WebdriverIO 会话能访问到被测应用选择配置文件根据--remote标志选择wdio.sauce.conf.js远程或wdio.local.conf.js本地同时检测项目根目录是否存在tsconfig.json若存在则改用.ts版本的配置文件并通过TS_NODE_COMPILER_OPTIONS{ module: commonjs }让 ts-node 以 CommonJS 格式运行执行 wdio定位wdio/cli/bin/wdio以wdio run configFile ...rawArgs的方式启动子进程stdio 继承测试输出直接可见并在测试进程退出或报错时自动调用server.stop()关闭 dev server。这条链路意味着你只需一条vue-cli-service test:e2e即可完成「起服务 → 跑测试 → 收尾」的完整流程无需手动管理两个进程。安装插件新建项目与已有项目创建新项目时在vue create的 features 交互中选择 E2E Testing 并挑选 WebdriverIO 方案即可安装过程中会出现一个额外的 prompt见 prompts.js消息Pick browsers to run end-to-end test on复选选项Chrome默认勾选、Firefox若检测到本机已安装 Firefox 则自动勾选选中项会写入 generator 的webdrivers参数决定后续生成哪份浏览器 capabilities 与哪些 driver 依赖。已有项目中安装vue add e2e-webdriverio对于较老版本的 CLI可能需要显式带 scopevue add vue/e2e-webdriverio生成器generator/index.js会做以下事情渲染测试模板文件tests/e2e/**与三份 wdio 配置在package.json的 scripts 中加入test:e2e: vue-cli-service test:e2e根据所选浏览器添加 devDependenciesChromewdio-chromedriver-service以及chromedriver版本号优先取本机已安装 Chrome 的主版本号检测失败时回退到插件 devDependencies 中锁定的版本源码注释明确说明这是为了规避「chromedriver 每 6 周随 Chrome 大版本升级」造成的版本错配问题Firefoxgeckodriver与wdio-geckodriver-service若项目启用了 TypeScript 插件额外加入ts-node依赖并向tsconfig.json的compilerOptions.types注入mocha、wdio/mocha-framework、webdriverio/sync三个类型声明见 generator/index.js 第 3-28 行该行为也被 wdioGenerator.spec.js 的测试用例覆盖。生成的项目结构安装后项目下会生成如下目录与文件与 e2e-webdriverio.md 文档一致tests/e2e/ ├── pageobjects/ │ └── app.page.js ├── specs/ │ ├── app.spec.js └── .eslintrc.js此外还会在项目根目录生成 3 份配置文件wdio.shared.conf.js所有环境共用的基础配置wdio.local.conf.js本地测试配置wdio.sauce.conf.js面向 Sauce Labs 云平台的远程配置。pageobjects页面对象目录内包含一个示例页面对象 app.page.jsclass App { /** * elements */ get heading () { return $(h1) } /** * methods */ async open (path /) { await browser.url(path) } } module.exports new App()页面对象模式把「选择器 交互动作」封装成可复用的类$(h1)惰性获取元素引用open()负责导航。这样 spec 用例只关心业务意图不关心底层 CSS 选择器是 WebdriverIO 官方推荐的测试组织方式若项目使用 TypeScript此文件会渲染为export default new App()的 ESM 形态。specs测试用例示例用例 app.spec.jsconst App require(../pageobjects/app.page) describe(Vue.js app, () { it(should open and render, async () { await App.open() await expect(App.heading).toHaveText(Welcome to Your Vue.js App) }) })它打开应用首页并断言h1的文本内容验证了「浏览器能加载页面、Vue 应用能正常渲染」这一最基础的 E2E 场景。注意 WebdriverIO v7 采用 async/await 风格 APIbrowser与expect均为全局可用对象。三份 wdio 配置文件wdio.shared.conf.js模板源码是全局基础配置默认值包括配置项默认值说明specstests/e2e/**/*.spec.js启用 TS 时追加*.spec.ts测试文件匹配模式基于__dirname绝对路径拼接exclude[]排除模式logLeveltrace日志详细程度可选trace \| debug \| info \| warn \| error \| silentoutputDirtests/e2e/logs日志输出目录bail0失败 N 个用例后停止0 表示不中断waitforTimeout1000所有waitFor*命令的默认超时毫秒frameworkmocha测试框架还支持 Jasmine、CucumberspecFileRetries1整个 spec 文件失败后的重试次数specFileRetriesDeferredfalse重试的 spec 是否插回队列头部立即执行reporters[spec]标准输出报告器此外该文件预置了一整套 WebdriverIO 生命周期 hooksonPrepare、beforeSession、before、beforeSuite、beforeHook/afterHook、beforeTest/afterTest、beforeCommand/afterCommand、afterSuite、after、afterSession、onComplete、onReload以及 Cucumber 专属的beforeFeature/beforeScenario/beforeStep/afterStep/afterScenario/afterFeature全部为空实现方便你按需填充自定义逻辑比如before中注册自定义命令、onComplete中上传测试报告等。wdio.local.conf.js模板源码面向本地开发通过展开...config继承共享配置后覆盖maxInstances: 1本地单实例串行执行避免资源竞争services按安装时选择的浏览器注入chromedriver和/或geckodriverservice由 service 自动管理 driver 的生命周期capabilities为每个选中的浏览器声明 capabilityChromebrowserName: chrome、acceptInsecureCerts: true并在goog:chromeOptions.args中根据进程参数是否包含--headless动态注入[--headless, --disable-gpu]FirefoxbrowserName: firefox、acceptInsecureCerts: true。wdio.sauce.conf.js模板源码面向 Sauce Labs 云平台通过环境变量读取账号凭据user: process.env.SAUCE_USERNAME、key: process.env.SAUCE_ACCESS_KEYregion: us指定数据中心区域headless: process.argv.includes(--headless)透传无头模式开关services: [[sauce, { sauceConnect: true, tunnelIdentifier: Vue.js Integration tests }]]启用 Sauce Connect 隧道maxInstances: 10云端并行度更高文档中「云端自动并行执行」正是由这一配置实现capabilities 内置 Firefox 与 Chrome 两个矩阵均使用browserVersion: latest、platformName: Windows 10并通过sauce:options.build以时间戳Math.ceil(Date.now() / 1000)生成唯一的 Build ID方便在 Sauce Labs 仪表盘上按构建分组查看结果。运行测试安装完成后直接执行$ vue-cli-service test:e2e默认行为启动开发服务器production 模式→ 运行tests/e2e/specs下全部用例本地 Chrome 环境→ 测试结束后自动关闭服务器。你也可以通过 npm script 运行npm run test:e2e。无头模式headless在 CI/CD 环境无显示器的服务器中为 Chrome 或 Firefox 增加--headless参数即可$ vue-cli-service test:e2e --headless该参数会同时作用于两处一是被 WebdriverIO 透传给本地配置中 Chrome 的goog:chromeOptions.args二是被 Sauce Labs 配置中的headless字段读取。在云端运行时测试会自动并行执行。运行单个测试通过--spec指定用例文件路径即可只跑一个测试$ vue-cli-service test:e2e --spec tests/e2e/specs/test.js跳过开发服务器自动启动如果开发服务器已经在运行希望直接对已有地址执行测试则传入--baseUrl文档中也写作--url语义插件检测到该参数后便不会再自行启动 dev server$ vue-cli-service test:e2e --baseUrlhttp://localhost:8080/其他 WebdriverIO 参数透传由于插件会把wdio/cli的全部run参数透传--bail、--logLevel、--maxInstances等 WebdriverIO CLI 选项同样可用例如$ vue-cli-service test:e2e --bail 1 --logLevel warn与 TypeScript、ESLint 的协同TypeScript若项目启用了vue/cli-plugin-typescript生成器会渲染*.spec.ts与*.conf.ts版本注入mocha、wdio/mocha-framework、webdriverio/sync类型并自动安装ts-node。测试时插件检测到根目录tsconfig.json会自动选择.ts配置文件。仓库测试 wdioPlugin.spec.js 中「should work with TS」用例验证了这一场景本地直接运行CI 则使用--headless。ESLint若项目启用了vue/cli-plugin-eslint会生成 tests/e2e/.eslintrc.js模板中以下划线开头渲染后命名为.eslintrc.js引入plugin:wdio/recommended规则集、开启mocha环境并关闭与测试代码风格冲突的class-methods-use-this、max-len、strict规则保证页面对象与用例代码通过 lint 检查。运行验证测试用例背书仓库中的 wdioPlugin.spec.js 完整演示了该插件的端到端验证方式通过vue/cli-test-utils/createTestProject创建集成 Babel、ESLintairbnb 配置或 TypeScript 的临时项目随后执行vue-cli-service test:e2e本地环境直接运行CI 环境追加--headless验证插件从生成到执行的全流程可用。在真实项目中你可以用同样思路把 E2E 测试接入 CI先构建/启动被测应用再以--headless方式运行test:e2e最后收集 WebdriverIO 生成的测试报告。小结vue/cli-plugin-e2e-webdriverio让 Vue CLI 项目获得了一条开箱即用的 WebdriverIO E2E 测试流水线一条test:e2e命令自动完成起服、测试、收尾生成器产出的 PageObject specs 三份分层配置让本地开发与 Sauce Labs 云端执行共用一套基础配置--headless、--spec、--baseUrl等参数则覆盖了 CI 无头运行、单测调试、复用已有服务器等典型场景。配合 TypeScript 类型注入与 ESLint wdio 规则整个 E2E 测试体系可以无缝融入 Vue CLI 的既有工程化生态。【免费下载链接】vue-cli️ webpack-based tooling for Vue.js Development项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考