#学习笔记#e2e学习使用（二）

前言：

　　《#学习笔记#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, 1 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,  1 assertions failed, 6 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