前言：

　　《#学习笔记#e2e学习使用（一）》主要记录了Vue项目的创建到e2e环境的搭建，以及期间遇到的各种问题和解决方法。本文建立在基础测试环境搭建完毕能正确运行的情况下，编写测试代码，进行测试。

一、编写测试代码、运行e2e测试

1、简单的demo.js

实现打开 bing，搜索 "what is microsoft"，保存成截图然后退出。【点击进入原博】

VSCode打开项目文件夹，在/test/e2e/specs 目录下新建测试文件：demo.js。内容如下：

module.exports = {

    'Find the answer.': function (client) {

        // 定义 Bing 页面中的节点

        const searchInput = '#sb_form_q'

        const searchBtn = '#sb_form_go'

        const question = 'what is microsoft'

        // 启动浏览器并打开 bing.com

        client.url('http://bing.com').maximizeWindow()

        // 确保 “body” 和输入框可以使用

        client.expect.element('body').to.be.present

        client.expect.element(searchBtn).to.be.visible

        client.pause(2000)   // 等待两秒

        // 输入“what is microsoft” 然后搜索

        client.setValue(searchInput, question)

        client.click(searchBtn)

        client.pause(2000)

        // 截一张图然后保存到“reports/answer.png”

        client.expect.element('body').to.be.present

        client.saveScreenshot('reports/answers.png')

        client.end()

    }

}

　账户转换：由于root账户不能启动Google Chrome，故先转换为普通用户——user1

　先运行单元测试：npm run unit

报错：

　　

　  用户user1没有此项目（文件夹）的写入权限。

 解决方法：为user1设置文件夹的写入权限。

　　#chmod -R 777 /home/user1/workspace/git      //设置写入权限
   #ls -l /home/user1/workspace/git　　　　　　　　　　   //查看文件夹状态

　　

　  注：该项目my-project 在e2e-demo目录下。　

再次运行单元测试：npm run unit

　运行e2e测试：npm run e2e

测试结果：打开了Chrome浏览器，但是又报了错。

2、修改demo.js

暂时测不通，修改测试代码，实现打开百度，设置输入框值等一系列操作。

/test/e2e/specs/demo.js

module.exports = {

    'test demo.js': function (browser) {

        const devServer = browser.globals.devServerURL

        browser

            .url(devServer)

            // 测试代码-start

            .url('http://www.baidu.com')   // 打开地址

            .waitForElementVisible('body', 1000) // 等待界面显示

            .assert.title('百度一下，你就知道') // 断言title为baidu

            .assert.visible('input[type=text]') // 断言输入框显示

            .setValue('input[type=text]', 'rembrandt van rijn')  // 设置输入框的值

            .waitForElementVisible('button[name=btnG]', 1000) // 等待按钮显示

            .click('button[name=btnG]')  // 点击按钮

            .pause(1000) // 暂停等待请求

            .assert.containsText('ol#rso li:first-child', 'Rembrandt - wikipedia') // 断言包含字符串

            //测试代码-end

            .end()

    }

}

npm run e2e:

控制台执行过程及错误信息如下：

[user1@localhost my-project]$ npm run e2e

> my-project@1.0.0 e2e /home/user1/workspace/git/e2e-demo/my-project

> node test/e2e/runner.js



Starting selenium server... started - PID:  28156

[Demo] Test Suite

=====================

Running:  test demo.js

 ✔ Element <body> was visible after 162 milliseconds.

 ✔ Testing if the page title equals "百度一下，你就知道".

 ✖ Testing if element <input[type=text]> is visible. Element could not be located.  - expected "true" but got: "null"

    at Object.testDemoJs [as test demo.js] (/home/user1/workspace/git/e2e-demo/my-project/test/e2e/specs/demo.js:39:21)

    at _combinedTickCallback (internal/process/next_tick.js:131:7)

ERROR: Unable to locate element: "input[type-text]" using: css selector

FAILED:  1 assertions failed,  errors and 2 passed (40.739s)

[Test] Test Suite

=====================

Running:  default e2e tests

 ✔ Element <#app> was visible after 180 milliseconds.

 ✔ Testing if element <.hello> is present.

 ✔ Testing if element <h1> contains text: "Welcome to Your Vue.js App".

 ✔ Testing if element <img> has count: 1

OK. 4 assertions passed. (7.808s)

 _________________________________________________

 TEST FAILURE: 1 error during execution,   assertions failed,  passed. (50.487s)

 ✖ demo

   - test demo.js (40.739s)

   Testing if element <input[type=text]> is visible. Element could not be located.  - expected "true" but got: "null"

       at Object.testDemoJs [as test demo.js] (/home/user1/workspace/git/e2e-demo/my-project/test/e2e/specs/demo.js:39:21)

       at _combinedTickCallback (internal/process/next_tick.js:131:7)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! my-project@1.0.0 e2e: `node test/e2e/runner.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the my-project@1.0.0 e2e script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     /home/user1/.npm/_logs/2018-01-15T02_33_09_962Z-debug.log

　 总共打开了两次浏览器，一次是由demo.js 操纵，一次是由 test.js 操纵。之所以demo.js比 test.js 先运行，是因为它们都用了 waitForElementVisible('XXX', waittime) 等待界面显示时间，test.js是5000（等待5秒），而demo.js是1000（1秒）。

demo.js 先打开了浏览器，显示了vue的helloworld初始界面，然后转到打开http:www.baifu.com，判断了title是否等于“百度一下，你就知道”，再判断input输入框是显示而非隐藏【报错】。错误：未找到元素<input[type=text]>。报错后停止之后代码行的测试，直接执行end() 关闭浏览器。

    test.js

// For authoring Nightwatch tests, see

// http://nightwatchjs.org/guide#usage

module.exports = {

  'default e2e tests': function (browser) {

    // automatically uses dev Server port from /config.index.js

    // default: http://localhost:8080

    // see nightwatch.conf.js

    const devServer = browser.globals.devServerURL

    browser

      .url(devServer)

      .waitForElementVisible('#app', 5000)     // 等待元素app显示

      .assert.elementPresent('.hello')         // 断言元素'.hello'存在

      .assert.containsText('h1', 'Welcome to Your Vue.js App') // 断言'.h1'中包含文本'....'

      .assert.elementCount('img', 1)   // 断言元素'.img'计数为1

      .end()

  }

}　　

先打开默认浏览器显示Vue 初始HelloWorld 界面，分别测试了：

　　元素<#app>在180毫秒后可见。
　　测试是否存在元素<.hello>。
　　测试元素<h1>是否包含文本：“Welcome to Your Vue.js App”。
　　测试元素<img>是否有计数：1

　test.js测试通过，关闭浏览器，报出测试结果。

 修改：

方法：打开百度首页，对照着它的html代码来修改测试代码。

界面对应：　　

   新的 demo.js:

module.exports = {

    'test demo.js': function (browser) {

        const devServer = browser.globals.devServerURL

        browser

            .url(devServer)

            // 测试代码-start

            .url('http://www.baidu.com')   // 打开地址

            .waitForElementVisible('body', 1000) // 等待界面显示

            .assert.title('百度一下，你就知道') // 断言title为baidu

            .assert.visible('input[id=kw]') // 断言输入框显示

            .setValue('input[id=kw]', 'rembrandt van rijn')  // 设置输入框的值

            .waitForElementVisible('input[type=submit]', 1000) // 等待按钮显示

            .click('input[type=submit]')  // 点击按钮

            .pause(1000) // 暂停等待请求

            .assert.containsText('ol#rso li:first-child', 'Rembrandt - wikipedia') // 断言包含字符串

            //测试代码-end

            .end()

    }

}

　

运行e2e：#npm run e2e

运行结果：

[user1@localhost my-project]$ npm run e2e

> my-project@1.0.0 e2e /home/user1/workspace/git/e2e-demo/my-project

> node test/e2e/runner.js

Starting selenium server... started - PID:  30491

[Demo] Test Suite

=====================

Running:  test demo.js

 ✔ Element <body> was visible after 173 milliseconds.

 ✔ Testing if the page title equals "百度一下，你就知道".

 ✔ Testing if element <input[id=kw]> is visible.

 ✔ Element <input[type=submit]> was visible after 197 milliseconds.

 ✖ Testing if element <ol#rso li:first-child> contains text: "Rembrandt - wikipedia". Element could not be located.  - expected "Rembrandt - wikipedia" but got: "null"

    at Object.testDemoJs [as test demo.js] (/home/user1/workspace/git/e2e-demo/my-project/test/e2e/specs/demo.js:44:21)

    at _combinedTickCallback (internal/process/next_tick.js:131:7)

ERROR: Unable to locate element: "ol#rso li:first-child" using: css selector

FAILED:  1 assertions failed, 1 errors and 4 passed (53.798s)

[Test] Test Suite

=====================

Running:  default e2e tests

 ✔ Element <#app> was visible after 107 milliseconds.

 ✔ Testing if element <.hello> is present.

 ✔ Testing if element <h1> contains text: "Welcome to Your Vue.js App".

 ✔ Testing if element <img> has count: 1

OK. 4 assertions passed. (6.126s)

 _________________________________________________

 TEST FAILURE: 1 error during execution,  1 assertions failed, 8 passed. (1m 2s)

 ✖ demo

   - test demo.js (53.798s)

   Testing if element <ol#rso li:first-child> contains text: "Rembrandt - wikipedia". Element could not be located.  - expected "Rembrandt - wikipedia" but got: "null"

       at Object.testDemoJs [as test demo.js] (/home/user1/workspace/git/e2e-demo/my-project/test/e2e/specs/demo.js:44:21)

       at _combinedTickCallback (internal/process/next_tick.js:131:7)

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! my-project@1.0.0 e2e: `node test/e2e/runner.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the my-project@1.0.0 e2e script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     /home/user1/.npm/_logs/2018-01-15T03_28_53_431Z-debug.log　　

错误点：

　　ERROR: Unable to locate element: "ol#rso li:first-child" using: css selector

对应demo.js 中的  【.assert.containsText('ol#rso li:first-child', 'Rembrandt - wikipedia') // 断言包含字符串】，检查html文本中是否包含元素【ol#rso li:first-child】。原本是想从google的查询结果列表中找到第一个结果(来自wikipedia（维基百科），但是baidu不同于google，baidu不是以ol有序列表的形式展示结果的，而且第一个结果也不是来自维基百科而是来自于百度百科。

浏览器界面：

修改demo.js:

module.exports = {

    'test demo.js': function (browser) {

        const devServer = browser.globals.devServerURL

        browser

            .url(devServer)

            // 测试代码-start

            .url('http://www.baidu.com')   // 打开地址

            .waitForElementVisible('body', 1000) // 等待界面显示

            .assert.title('百度一下，你就知道') // 断言title为baidu

            .assert.visible('input[id=kw]') // 断言输入框显示

            .setValue('input[id=kw]', 'rembrandt van rijn')  // 设置输入框的值

            .waitForElementVisible('input[type=submit]', 1000) // 等待按钮显示

            .click('input[type=submit]')  // 点击按钮

            .pause(1000) // 暂停等待请求

            .assert.containsText('h3', '伦勃朗·哈尔曼松·凡·莱因_百度百科') // 断言包含字符串

            //测试代码-end

            .end()

    }

}

运行e2e，结果pass：#npm run e2e

　　

3、浏览器显示过程

①  测试入口：/test/e2e/runner.js（引入依赖、浏览器内核并运行脚本demo.js、test.js）

②  启动了selenium server之后，java进程开始执行脚本命令 。

③  打开浏览器Google Chrome，根据脚本开始操纵浏览器。

④  test.js脚本: 显示Vue默认界面

⑤  demo.js 脚本:  打开网址 http://www.baidu.com   ； 输入设定的输入框值，点击按钮查询； 显示查询结果

⑥ 关闭浏览器，关闭web服务器。

以下是简易版浏览器操作界面：

二、测试结果分析

测试报告存储位置：/test/e2e/reports

复制文件位置，在浏览器中打开查看：

浏览器粘贴并转到：

  • demo.js的测试报告：

  • test.js的测试报告：

三、上传到github

过程TODO

　github链接：e2eDemo　

资料：

　　1、搭建自己的前端自动化测试脚手架（三）

　　2、怎么为大中型的vue.js项目编写e2e测试？

　　3、如何用git将项目代码上传到github

#学习笔记#e2e学习使用（二）的更多相关文章

  1. #学习笔记#e2e学习使用（一）

    本文仅限于记录本人学习的过程,以及怎么踩的坑,是如何解决的.逻辑肯定是混乱的,有用之处会抽出共通另行发帖. 最终目标:要运用于Vue项目中,进行功能测试甚至自动化测试. 一.e2e概念 理解:end ...

  2. AngularJs学习笔记--E2E Testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.e2e-testing 当一个应用的复杂度.大小在增加时,使得依靠人工去测试新特性的可靠性.抓Bug和回归 ...

  3. Java菜鸟学习笔记--数组篇(三):二维数组

    定义 //1.二维数组的定义 //2.二维数组的内存空间 //3.不规则数组 package me.array; public class Array2Demo{ public static void ...

  4. JavaScript学习笔记之数组（二）

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  5. vue2.0学习笔记之路由（二）路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十二章：四元数（QUATERNIONS）

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十二章:四元数(QUATERNIONS) 学习目标 回顾复数,以及 ...

  8. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十二章：几何着色器（The Geometry Shader）

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十二章:几何着色器(The Geometry Shader) 代码工 ...

  9. 20155234 2016-2017-2第十周《Java学习笔记》学习总结

    20155234第十周<Java学习笔记>学习总结 教材学习内容总结 网络编程 在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定 ...

随机推荐

  1. [一首诗] Life and Death 生与死

    Life and Death 生与死 I strove with none, 我和谁都不争, for none was worth my strife, 和谁争我都不屑: Nature I loved ...

  2. POJ：2456 Aggressive cows(z最大化最小值）

    描述 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小隔间依次编号为x1,...,xN (0 <= xi <= 1,000, ...

  3. PIE SDK打开GDB、Dwg数据

    1. 功能简介 目前不同的GIS软件平台具有自己独特支持的数据格式,如ESRI的File GeoDataBase和Personal GeoDataBase.MapInfo的mif数据.AutoCAD的 ...

  4. Docker 命令详解（run篇）

    参考:https://www.cnblogs.com/yfalcon/p/9044246.html 命令格式:docker run [OPTIONS] IMAGE [COMMAND] [ARG...] ...

  5. request-statistics.lua

    --[[ 实现请求统计,并且将单位时间内异常次数达到阀值的请求加入到黑名单中 --]] --获取共享内存 local limit_req_store = ngx.shared.limit_req_st ...

  6. easyUI----grid

    1.设置标题行高 .datagrid-header-row td{background-color:rgb(15,185,234);color:#fff;height:35px ;font-size: ...

  7. 记录: Win10+Ubuntu18.04双系统安装

    在重装windows系统的时候顺便将ubuntu也重装了. window 10 安装 制作USB启动盘 到"微软中国下载中心"(http://www.microsoft.com/z ...

  8. HDU 1069—— Monkey and Banana——————【dp】

    Monkey and Banana Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  9. MAC 下安装RabbitMQ

    1.使用brew来安装 RabbitMQ(地址:http://www.rabbitmq.com/install-standalone-mac.html ) 2.安装目录 /usr/local/Cell ...

  10. Hibernate课堂笔记

    1.java持久化概述 Java持久化简称(JPA), 即把程序中的临时数据持久保存到数据库中.由于jdbc开发效率低,我们就提出了对象关系映射(ORM)的概率 2.ORM 通过java持久化提供的A ...