前言：

　　《#学习笔记#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. c++中map的基本函数

    c++中map的一些方法 begin() 返回指向map头部的迭代器     clear() 删除所有元素     count() 返回指定元素出现的次数     empty() 如果map为空则返回 ...

  2. gym101201J Shopping 二分+RMQ+数学性质

    题目传送门 题目大意: 给出n个商品的价格,排成一列,q次查询,每次查询如果你有x的钱,从l格子走到r格子,每种商品有无数个,能买就买,最后还会剩多少钱. 思路: 每一次买都要找离自己最近的且买的起的 ...

  3. vbscript 中对excel常见操作

    vbs 对excel的操作 删除.修改单元格,设置字体.背景色dim oExcel,oWb,oSheet Set oExcel= CreateObject("Excel.Applicatio ...

  4. 微信小程序 template模板使用

    参考文章: 微信小程序-template模板使用

  5. poj1002 字典树+map+查询单词出现次数

    487-3279 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 309235   Accepted: 55223 Descr ...

  6. 【Python】小括号过滤后的盲注

    0x00   环境搭建 sqli-labs第八关,简单修改下源代码,加入下面一行代码 $id=preg_replace('/\(|\)/', "",$id); //过滤小括号 0x ...

  7. Gym - 100989

    B Although Haneen was able to solve the LCS problem, Dr. Ibrahim is suspicious about whether she rea ...

  8. ASP.Net Core 发布ABP项目遇到的错误

    1.HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作 ...

  9. Android系统概述

    一.Android的诞生 Android这一词最先出现在法国作家利尔亚当在1886年发表的科幻小说<未来夏娃>中,作者将外表像人类的机器起名为Android,这也就是Android小人名字 ...

  10. Oracle RAC集群搭建(五)--oracle部署

    01,配置好环境 节点01--node1 ORACLE_BASE=/oracle/app/oracle ORACLE_HOME=$ORACLE_BASE/product//db_1 ORACLE_SI ...