WebdriverIO 示例仓库实战指南从云服务、多浏览器到自定义扩展的全套官方示例【免费下载链接】webdriverioNext-gen browser and mobile automation test framework for Node.js项目地址: https://gitcode.com/GitHub_Trending/we/webdriverioWebdriverIO 的 examples 目录是官方维护的教学型示例集合覆盖了云测试平台接入、多浏览器Multiremote、Page Object 模式、WDIO 测试运行器三大框架、自定义 Reporter/Service以及 Appium、BiDi 和 DevTools 协议等进阶玩法。本文以该目录为骨架逐条拆解每个示例的启动方式、配置要点与源码级实现细节帮助你把这些官方示例直接移植到自己的项目里。整体结构与快速起步examples 目录按主题划分为多个子目录每个子目录都是独立的最小可运行工程自带 package.json 与配置目录主题运行方式cloudservicesSauce Labs / BrowserStack / TestingBot / Kobiton 云平台node xxx.jsappiumiOS WebView 手势与 touchActionnode appium-draws-its-logo.jsbidiWebDriver BiDi 日志与预加载脚本node logging.js/node scripting.jspageobjectPage Object 模式 WDIO Testrunnernpm testwdioMocha / Jasmine / Cucumber / 自定义 Reporter / Multiremote / Vite 组件测试npm run test:*standaloneremote()独立脚本Headlessnode sample.jsdevtoolsPuppeteer 与 WebDriver 命令混用node intercept.js由于示例目录本身不携带任何dev-dependencies这一点在 examples/README.md 中有明确说明最省事的做法是先克隆 WebdriverIO 仓库并构建整个 monorepogit clone gitgithub.com:webdriverio/webdriverio.git cd ./webdriverio pnpm install pnpm run setup完成依赖安装后每个示例即可按各自 README 的命令直接运行。也可以在真实项目中用 WebdriverIO 官方 Boilerplate 模板初始化出完整的dev-dependencies再把示例文件拷贝进去运行。云测试平台一套remote()多路接入cloudservices 用四个文件演示同一个测试脚本如何无缝切换到 Sauce Labs、BrowserStack、TestingBot 与 Kobiton。其 package.json 只声明了一个依赖webdriverio脚本均为node xxx.js直跑典型用法cd ./examples/cloudservices export SAUCE_USERNAMEusername export SAUCE_ACCESS_KEYXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX npm run test:saucelabs四个平台的凭据环境变量与命令如下平台必需环境变量启动命令Sauce LabsSAUCE_USERNAME/SAUCE_ACCESS_KEYnpm run test:saucelabsBrowserStackBROWSERSTACK_USERNAME/BROWSERSTACK_ACCESS_KEYnpm run test:browserstackTestingBotTESTINGBOT_KEY/TESTINGBOT_SECRETnpm run test:testingbotKobitonKOBITON_USERNAME/KOBITON_ACCESS_KEYnpm run test:kobiton所有脚本都通过import { remote } from webdriverio创建浏览器实例核心差别集中在remote()的配置对象上。以 saucelabs.js 为例const browser await remote({ capabilities: { browserName: chrome, version: latest, platform: Windows 10, tags: [examples], name: This is an example test, // Open Sauce 免费账户下必须置为 true否则任务状态只显示 // Finished 而不会标记 passed/failed商用私有账户可省略 public: true }, user: process.env.SAUCE_USERNAME, key: process.env.SAUCE_ACCESS_KEY, logLevel: trace })BrowserStack 的差异点在于使用其专有的 capabilitiesbrowser/browser_version/os/os_version/resolution并显式指定 hub 地址与端口await remote({ capabilities: { browser: Chrome, browser_version: 46.0, os: Windows, os_version: 10, resolution: 1024x768 }, hostname: hub.browserstack.com, port: 80, user: process.env.BROWSERSTACK_USERNAME, key: process.env.BROWSERSTACK_ACCESS_KEY })TestingBot 同样是hub.testingbot.com:80而 Kobiton 面向移动端走 HTTPSprotocol: https、port: 443、hostname: api.kobiton.comcapabilities 也换成了deviceName、platformName、platformVersion、deviceGroup: KOBITON等移动语义字段并用sessionName/sessionDescription/deviceOrientation/captureScreenshots描述会话。四个脚本的测试体完全相同打开https://webdriver.io通过browser.$(.ds-input)定位搜索框并addValue(click)点击.algolia-docsearch-suggestion--title最后getTitle()并在控制台打印标题、deleteSession()收尾。这说明 WebdriverIO 的remote()API 与平台解耦——切换云服务商只需改配置测试代码零改动。Multiremote一个浏览器实例管理多个会话Multiremote 允许在单个测试进程内同时驱动多个浏览器专门用于测试聊天室、视频通话这类需要多端交互的场景而不是做并行提速。运行时通过browserA/browserB这样带后缀的实例访问各自的浏览器。wdio/multiremote/wdio.conf.js 展示了 Testrunner 版的多浏览器能力capabilities 不再是数组而是一个键值对象每个键对应一个浏览器会话capabilities: { browserA: { capabilities: { browserName: chrome } }, browserB: { capabilities: { browserName: chrome } } }对应测试 mocha.test.js 演示了一个真实的聊天场景browserA发送消息browserB读取并回复——这正是 README 中 不是并行而是交互 的直观体现it(should login the browser B, async () { const nameInput await browserB.$(.usernameInput) await nameInput.addValue(Browser B) await browserB.keys(Enter) })运行方式cd ./examples/wdio npm run test:multiremote独立脚本与 WebDriver 命令示例standalone无 Testrunner 的最小脚本standalone/sample.js 展示脱离测试运行器的裸脚本写法并演示了 DevTools 协议下的 headless 启动const browser await remote({ capabilities: { browserName: chrome, wdio:devtoolsOptions: { headless: true } } })脚本在try/catch中执行url()/getUrl()无论成功失败都会调用deleteSession()释放会话——这是所有独立脚本都要养成的收尾习惯。devtoolsWebDriver 与 Puppeteer 混编devtools/intercept.js 演示了先用 WebDriver 打开页面再切换到 Puppeteer 拦截请求的混合模式通过browser.getPuppeteer()拿到 Puppeteer 浏览器page.setRequestInterception(true)后将.png请求改写为另一张图片再切回browser.refresh()继续使用 WebDriver 命令。它展示了 WebdriverIO 在 DevTools 协议下与 Puppeteer 生态互通的能力。appium移动手势驱动的画图示例appium/appium-draws-its-logo.js 面向 iOS WebViewremote()指向本地 Appium 端口4723capabilities 使用platformName/deviceName/app等移动配置。随后用driver.touchAction()组合press/moveTo/release完成滑动并调用 helpers/drawHelper.js 导出的circleAction/arcAction/innerArcAction画出一个圆与三段内弧组成的 WebdriverIO Logo。注意该示例需要旧的 v4 仓库编译出的 webview 应用作为被测对象。bidiWebDriver BiDi 事件订阅WebDriver BiDi 通过 WebSocket 提供双向实时事件流。bidi/logging.js 演示了订阅与监听两个事件先sessionSubscribe({ events: [log.entryAdded] })并注册browser.on(log.entryAdded, ...)实时打印控制台日志再订阅network.responseCompleted输出每个网络响应bidi/scripting.js 则通过scriptAddPreloadScript()注册预加载脚本让window.barfoo在页面加载前注入再用browser.execute()读取。两个文件均在 capabilities 中开启webSocketUrl: true这是 WebdriverIO 自动建立 BiDi WebSocket 通道的前提。若需完整代码可直接参考 bidi/README.md。Page Object 模式面向对象封装的官方示例pageobject 演示了一个用JavaScript 类 Object.create风格继承搭建的 Page Object 测试套件。核心思想是把页面专属的选择器与操作抽象进 Page Object测试只关心业务行为这样即使页面彻底改版也只需集中修改 Page Object 一处。父类 pageobjects/page.js 只提供一个所有页面通用的open(path)内部委托给browser.url。子类 form.page.js 通过 getter 声明元素、重写页面方法class FormPage extends Page { get username () { return $(#username) } get password () { return $(#password) } get submitButton () { return $(#login button[typesubmit]) } get flash () { return $(#flash) } open () { return super.open(login) } submit () { return this.submitButton.click() } } export default new FormPage()测试 specs/form.spec.js 因此变得非常干净——完全不出现选择器describe(auth form, () { it(should deny access with wrong creds, async () { await FormPage.open() await FormPage.username.addValue(foo) await FormPage.password.addValue(bar) await FormPage.submit() await expect(FormPage.flash).toHaveText( expect.stringContaining(Your username is invalid!) ) }) })运行该示例cd ./examples/pageobject npm test其 package.json 将test脚本定义为wdio run ./wdio.conf.js依赖仅wdio/cli、wdio/spec-reporter、wdio/local-runner、wdio/mocha-framework四个包。wdio.conf.js 是一份信息量很大的参考配置specs使用通配*.spec.jsbaseUrl指向http://the-internet.herokuapp.com被测站是 the-internet 的登录页waitforTimeout: 150000、connectionRetryTimeout: 120000、connectionRetryCount: 3定义了超时与重试策略framework: mocha、reporters: [spec]mochaOpts里ui: bdd、timeout: 30000并在文件后半段注释了从onPrepare到afterFeature的完整钩子签名——是学习 WDIO 配置的最佳模板之一。WDIO Testrunner 全家桶多框架、自定义扩展与组件测试wdio 目录集中展示了 Testrunner 的各种用法其 package.json 以workspace:*形式引用了仓库内的框架适配器与 reporter 包。全部命令在目录下执行cd ./examples/wdio npm run test:mocha npm run test:jasmine npm run test:cucumber npm run test:multiremote npm run test:customReporter npm run test:viteVue三种框架适配Mochamocha/wdio.conf.ts 是带完整类型标注WebdriverIO.Config的 TS 配置specs指向./mocha.test.tsframework: mochareporter 同时启用了spec、dot、junit三个并用onPrepare/onComplete钩子输出生命周期日志。Jasminejasmine/ 下为jasmine.spec.tswdio.conf.ts把framework换成jasmine即可。Cucumbercucumber/wdio.conf.ts 中specs指向features/my-feature.featureframework: cucumber并通过cucumberOpts.require加载 TypeScript 编写的 step-definitions.ts实现 BDD 风格测试。自定义 Reportercustom-reporter 演示如何编写自己的 Reporter。核心类 my.custom.reporter.js 继承wdio/reporter的WDIOReporter在构造函数中用this.write(...)输出日志并覆盖onRunnerStart、onBeforeCommand、onAfterCommand、onSuiteStart、onHookStart/End、onTestStart、onTestPass/Fail/Retry/Skip/End、onSuiteEnd、onRunnerEnd等一整套生命周期钩子。在 wdio.conf.js 中以类 选项对象的元组形式注册reporters: [[CustomReporter, { someOption: foobar }]]examples/wdio/package.json中还定义了test:customService对应 custom-service 目录中基于before/after钩子的自定义 Service 示例原理与 Reporter 一致挂钩进测试进程的生命周期。配套的 mocha.test.js 是一个极简 Spec用于观察各钩子的触发顺序。Vite Vue 组件测试vite-vue-example 把 WebdriverIO 浏览器运行器与 Vite 集成测试 Vue 3 组件。HelloWorld.test.ts 配合 wdio.conf.ts 即可在真实浏览器中挂载组件并断言交互行为命令会先cd ./vite-vue-example npm run wdio使用wdio/browser-runner完成编译与测试。小结examples/ 目录的价值在于它把 WebdriverIO 最常用的能力浓缩成了可一键运行的最小示例云平台接入只需替换remote()的 user/key 与 capabilitiesMultiremote 用一个配置对象同时驱动多个浏览器解决多端交互测试Page Object 与 WDIO Testrunner 各框架示例可以直接当配置模板抄自定义 Reporter/Service 与 BiDi 示例则展示了协议层与插件体系的可扩展面。配合每个子目录的 README 与package.json这些示例是理解并上手 WebdriverIO 最直接的入口。【免费下载链接】webdriverioNext-gen browser and mobile automation test framework for Node.js项目地址: https://gitcode.com/GitHub_Trending/we/webdriverio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考