e2e测试

Posted 2020-10-15 北漂蛮子

一.e2e测试简介

 

e2e或者端到端（end-to-end）或者UI测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。

想象一下，如果把这些自动化的测试工作换成人工来做，那会多么的令人头疼，尤其是对于那些具有大量交互的应用，手工测试将会以编程不可能的任务。

下文中，将会介绍如何使用Nightmare来进行自动e2e测试.

 

二.什么是Nightmare？

Nightmare是来自Segement的高级浏览器自动化库。

它公布了一些方法，例如.goto(),.type()和.click()等，通过一个个API的衔接使用，给人感觉每个模块似乎是同步的。最常用于UI测试和爬取。

 

三.如何使用Nightmare?

个人觉得，相对如单元测试(之前踩过ezyme的坑)的一些配置，Nightmare用起来确实挺方便。

首先，安装相应的依赖(不要问我依赖是什么，其实我也不知道是什么^_^)：

npm install --save-dev mocha
npm install --save-dev nightmare
npm install --save-dev assert
npm install --save-dev chai

在项目根目录下创建test文件夹(一定要是项目根目录),所有的测试用例都需要以\'.js\'为后缀的格式创建在test文件夹下。

然后，打开根目录下package.json文件，配置测试命令，很简单：

"scripts": {
  "test": "mocha"
}

准备工作已经完毕，我们来写几个简单的测试用例：

1.访问某站首页，若成功，显示加载时间，否则抛出error

const Nightmare = require(\'nightmare\')
const assert = require(\'assert\')

describe(\'Load a Page\', function() {
　　// 设置超时时间
　　this.timeout(\'30s\')

　　let nightmare = null
　　beforeEach(() => {
　　　　nightmare = new Nightmare()
　　})
 
　　it(\'should load locaohos:8000 success\', done => {
　　　　// 实际开发中访问的url可能是这`http://localhost:port/path`
　　　　nightmare.goto(\'http://localhost:8000/\')
　　　　.end()
　　　　.then(function (result) { done() })
　　　　.catch(done)
　　})

　　it(\'should load baidu(/home page) success\', done => {
　　　　// 访问百度
　　　　nightmare.goto(\'http://www.baidu.com/\')
　　　　.end()
　　　　.then(function (result) { done() })
　　　　.catch(done)
　　})

　　it(\'should load without error\', done => {
　　　　// 访问谷歌根目录，会error(大家懂的)
　　　　nightmare.goto(\'https://www.google.com/\')
　　　　.end()
　　　　.then(function (result) { done() })
　　　　.catch(done)
　　})

　　it(\'should load without error\', done => {
　　　　// 访问谷歌根目录下的webhp页面，会error(大家懂的)
　　　　nightmare.goto(\'https://www.google.com/webhp\')
　　　　.end()
　　　　.then(function (result) { done() })
　　　　.catch(done)
　　})
})

 

结果如图所示：

 

2.模拟用户搜索：

const expect = require(\'chai\').expect;
const Nightmare = require(\'nightmare\');
const assert = require(\'assert\');

describe(\'simulate search\', function () {
　　this.timeout(\'30s\')
 
　　let nightmare = null
　　beforeEach(() => {
　　　　// 设置显示模拟弹框
　　　　nightmare = new Nightmare({
　　　　show: true,
　　　})
　　})
 
　　it(\'模拟用户搜索\', done => {
　　　　nightmare
　　　　.goto(\'https://www.baidu.com/\')  //设置搜索引擎
　　　　.viewport(1200, 672) 　 //设置弹框视口宽高　　　　　　　　
　　　　.type(\'form[action*="/s"] [name=wd]\', \'github nightmare\')   //获取搜索框，自动填充搜索内容
　　　　.click(\'form[action*="/s"] [type=submit]\')  //获取点击按钮，模拟点击
　　　　.wait(5000) //等待5s(可为dom节点)，获取第一条的信息的内容
　　　　.evaluate(() =>
　　　　　document.querySelector(\'#content_left .c-container a em\').innerhtml
　　　　)
　　　　.end()
　　　　.then(content => {
　　　　　console.log(content === \'Nightmare\',\'----->true\')  //输出结果
　　　　})
　　　　.catch(error => {
　　　　　console.error(\'Search failed:\', error);  //输出捕捉到的错误
　　　　});
　　})
})

 

 结果大概是这样：

 

3. 模拟用户登录

const Nightmare = require(\'nightmare\')
const assert = require(\'assert\')

describe(\'submit form\', function () {
　　this.timeout(\'30s\')
 
　　let nightmare = null
　　beforeEach(() => {
　　　　// 设置显示模拟弹框
　　　　nightmare = new Nightmare({
　　　　　　show: true
　　　　})
　　　})
 
　　it(\'模拟用户搜索\', done => {
　　　　nightmare
　　　　.goto(\'登录页url\') 　　//设置登录loginUrl
　　　　.type(\'selector\', \'填入用户名\')  //通过选择器获取登录名文本框节点，自动模拟用户填写用户名
　　　　.type(\'selector\', \'填入密码\')  //通过选择器获取密码文本框节点，自动模拟用户填写密码
　　　　.click(\'selector\') 　　//获取点击按钮，模拟点击登录
　　　　.wait(5000) 　　　  //设置5s之后返回结果页面title
　　　　.evaluate(() => {
　　　　　　return document.title;
　　　　})
　　　　.end()
　　　　.then(title => {
　　　　　console.log(title) //输出结果
　　　　})
　　　　.catch(error => {
　　　　　console.error(\'Search failed:\', error); //输出捕捉到的错误
　　　　});
　　})
})

 

这里的效果就不再展示了。

 

 

如果想了解更多，可以查阅官方文档。