内容简介:本文作者奇舞团前端开发工程师冯通每到此处, 我都会无情的选择
本文作者奇舞团前端开发工程师冯通
vue-cli
是我最喜欢的脚手架工具, 提供了很多开箱即用的功能, 每次新建一个项目, 我都会一路回车按下来, 唯独到这一步...
Setup e2e tests with Nightwatch?
每到此处, 我都会无情的选择 no , 这也是我唯一不使用默认配置的选项
那我们真的不会用 e2e tests 吗?
先来看一下 e2e 测试和 unit 测试有什么区别
分层的自动化测试
敏捷大师 Mike Cohn 提出了 测试金字塔 概念, 认为测试应该系分为不同的粒度
Martin Fowler 大师在此基础上提出分层自动化测试的概念, 也就是如图所示
分层自动化测试是这样分层的
- 单元测试 (unit tests)
- 服务接口测试 (service tests)
- 用户界面测试 (e2e tests)
单元测试和服务测试始终不是真实的使用场景, 真正能测到人机交互的只有UI测试
我们今天讨论的就是这个门槛最高, 成本也最大的金字塔顶端测试, 也称为 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) 复制代码
测试通过, 嗨皮:stuck_out_tongue_winking_eye:
各大浏览器 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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- appium移动自动化详解
- 一文详解Ansible自动化运维
- 利用expect命令实现Shell自动化交互的方法详解
- ansible自动化运维详细教程及playbook详解
- 别让运维太忙,一文详解 Ansible 的自动化运维
- Node.js开发多端自动化步骤详解(Windows,Mobile,Web)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Beginning ARKit for iPhone and iPad
Wallace Wang / Apress / 2018-11-5 / USD 39.99
Explore how to use ARKit to create iOS apps and learn the basics of augmented reality while diving into ARKit specific topics. This book reveals how augmented reality allows you to view the screen on ......一起来看看 《Beginning ARKit for iPhone and iPad》 这本书的介绍吧!