前言
WebdriverIO (即 wdio) 是一个Node.js的智能自动化测试框架，该框架为用户带来了优美的编写UI自动化的api和链式语法，专注于优化开发者的持续集成和持续交付测试，是前端自动化测试必备框架之一。
安装
使用以下命令在你的项目中安装WebdriverIO：
# 使用 npm 安装 npm init -y npm install webdriverio
使用
配置
配置文件，可以帮助我们在文件头部设置默认的driver对象，添加各种hooks，同时可以方便的管理我们的浏览器进程等。
在项目根目录下创建 wdio.conf.js 的配置文件，点击这里学习如何配置自己的 WebdriverIO。
编写测试用例
- 导入模块
首先，我们需要导入
webdriverio模块以及它的浏览器驱动程序。同时为了了解更多api的使用，我们可以将其它常用模块导入。
const assert = require('assert')
const { remote } = require('webdriverio')- 启动 Selenium Server 在使用 WebdriverIO 前，需要通过 WebdriverIO 的 API 初始化RemoteWebDriver对象，并启动浏览器。为了便于控制浏览器，我们需要借助Selenium Server启用之。
const browser = await remote({
logLevel: 'trace',
capabilities: {
browserName: 'chrome'
},
port: 9515,
path: '/'
})- WebdriverIO API 接着，就可以使用 WebdriverIO 的 API 编写测试用例了。
- 打开网站
await browser.url('https://webdriver.io')- 查找元素
const elem = await browser.$('.headline')- 对元素进行操作
await elem.click()
- 断言
const title = await browser.getTitle() assert.strictEqual(title, 'WebdriverIO · Next-gen browser and mobile automation test framework for Node.js | WebdriverIO')
- 结束 注意及时释放资源，确保Selenium Server和浏览器正常退出。
await browser.deleteSession()
立即执行
在 wdio.conf.js 的 specs 属性中指定测试文件的路径。使用以下命令可以立即开始工作：
./node_modules/.bin/wdio wdio.conf.js
注意查看控制台输出，当然为了更好的体验一般会打开生产环境的web页面来运行，这里就不再赘述。
使用示例
我们使用UI库 Ant Design 在 http://localhost:8000/login 页面中测试。具体的代码逻辑如下：
-- -------------------- ---- -------
------------------ ---------- -
------------ ----- ---------- -
----- ------------------------------------------
--
------------- ----- ---------- -
----- ------------ - ----- ----------------------
----- ------------ - ----- ----------------------
----- ---------- - ----- ----------------------------------
----- -----------------------------
----- ------------------------------
----- -----------------------------
----- -------------------------------
----- ---------------------------
----- ------------------
--
------------ ----- ---------- -
----- ---------- - ----- -------------------------
----- ---- - ----- --------------------
------------------------ -------
--
--通过本文的介绍，相信你已经可以使用 WebdriverIO 对你的前端系统进行自动化测试啦。快去试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f216bcc403f2923b035c6a7