本文做者奇舞团前端开发工程师冯通html
vue-cli 是我最喜欢的脚手架工具, 提供了不少开箱即用的功能, 每次新建一个项目, 我都会一路回车按下来, 惟独到这一步...前端
Setup e2e tests with Nightwatch?vue
每到此处, 我都会无情的选择 no, 这也是我惟一不使用默认配置的选项java
那咱们真的不会用 e2e tests 吗?git
先来看一下 e2e 测试和 unit 测试有什么区别程序员
分层的自动化测试
敏捷大师 Mike Cohn 提出了测试金字塔概念, 认为测试应该系分为不一样的粒度github
Martin Fowler 大师在此基础上提出分层自动化测试的概念, 也就是如图所示web
分层自动化测试是这样分层的chrome
- 单元测试 (unit tests)
- 服务接口测试 (service tests)
- 用户界面测试 (e2e tests)
单元测试和服务测试始终不是真实的使用场景, 真正能测到人机交互的只有UI测试vue-cli
咱们今天讨论的就是这个门槛最高, 成本也最大的金字塔顶端测试, 也称为 e2e 测试
e2e 自动化测试
如何肯定用户能够顺利走完流程呢? 一个流程能够很长
- 打开网页
- 浏览商品
- 加入购物车
- 下单确认
- 付款
单纯依靠人力来测试完整功能很是耗时耗力, 这时候自动化测试就体现价值了
自动化测试是把人的测试行为转化为机器执行的程序, 能够提升效率, 解放生产力, 节省人力成本和时间成本, 下降人类易出错的风险
现代比较流行的 e2e 测试框架有
- Nightwatch
- TestCafe
- Protractor
- WebdriverIO
- Cypress
vue-cli 中使用 Nightwatch
Nightwatch 是一个老牌的 e2e 测试工具, 中文名**"守夜者"**, 使用 W3C WebDriver API 协议来驱动浏览器
WebDriver 是各大浏览器都实现的通用标准, 这也使得它的兼容性特别好, 支持各大浏览器, 符合国情
若是在 vue-cli 中咱们选择使用 e2e tests
vue-cli 会自动帮咱们安装 selenium-server 和 chromedriver 等必要工具
哪怕你彻底不懂 selenium, chromedriver 这些工具也能够尽情的写 e2e 测试, 开箱即用
在不久前发布的 vue-cli@3.0 中添加 Nightwatch
$ vue add @vue/e2e-nightwatch
运行 e2e 测试
$ vue-cli-service test:e2e
纯净的 WebDriver
要注意的是, vue-cli 目前依赖的仍是 Nightwatch@0.9.x
咱们看到 vue-cli 安装的 Nightwatch 会依赖一个 Selenium Server, 一个 java 程序
从官方示意图中看出, Nightwatch 和浏览器须要经过 Selenium Server 来通讯
这让咱们 js 程序员有点不爽, 既然 WebDriver 已经成为 W3C 推荐标准, 为何不能跳过 Selenium 直接驱动浏览器呢?
答案是确定的, 这也正是 Nightwatch@1.0 所作的是事情, 直接驱动浏览器
Nightwatch@1.0
Nightwatch@1.0 能够直接驱动浏览器, 所以咱们直接安装 Nightwatch@1.0 便可, 无需 Selenium Server
$ npm install nightwatch@1.0.8
复制代码
咱们一块儿来学男友叫, 哦不~一块儿来写一个最迷你的端到端自动化测试
首先 Nightwatch 须要一个配置文件 nightwatch.conf.js
module.exports = { "webdriver": { "server_path": "/usr/bin/safaridriver", // 浏览器 driver 的 bin 执行路径 "start_process": true, // 须要启动 driver "port": 9515 // driver 启动的端口, 通常是 9515 或 4444 }, "test_settings": { "default": { "desiredCapabilities": { "browserName": "safari" // 浏览器的名字叫 safari } } } }
此处之因此使用 safaridriver 是由于 mac 系统已经内置了 safaridriver, 零安装成本
而后来写一个简单易懂的测试脚本 e2e.test.js
module.exports = { 'Basic e2e Test' (browser) { browser .url('http://so.com') // 打开 so.com 网页 .waitForElementVisible('body') // 确认能看到 body 元素 .setValue('#input', 'Nightwatch') // 在搜索框输入 Nightwatch .click('#search-button') // 点击搜索 .pause(1000) // 等待1秒钟 .assert.containsText('#container', 'Nightwatch') // 查询结果包含 Nightwatch .end() } }
执行一下看测试结果
$ nightwatch basic-e2e.test.js [Basic e2e Test] Test Suite =========================== Running: Basic e2e Test ✔ Element <body> was visible after 17 milliseconds. ✔ Testing if element <#container> contains text: "Nightwatch". OK. 2 assertions passed. (3.419s)
测试经过, 嗨皮😜
各大浏览器 driver 安装
若是想用其余浏览器进行测试, 本文也列出了主流浏览器 driver 的下载地址
驱动浏览器的程序, 咱们称为 driver
- Chrome Driver: chromedriver.chromium.org/
- Firefox GeckoDriver: github.com/mozilla/gec…
- IE Driver: github.com/SeleniumHQ/…, 支持IE7-IE11
- Opera Driver: github.com/operasoftwa…
- Safari 自带 SafariDriver: webkit.org/blog/6900/w…
要注意的是, vue-cli 目前绑定的仍是 Nightwatch@0.9.x, 但 Nightwatch@1.0 已经在 beta 阶段了, vue 做者表示等到 Nightwatch 稳定后就会切到 1.0, 相信不远的未来咱们会见到搭载 Nightwatch@1.0 的 vue-cli