e2e自动化之Nightwatch

前言

怎么说呢？本司之前用的是selenium Java写的前端自动化。倒也是我写了。不过为什么会想着Nightwatch呢？因为有一天发现自动化挂了。一查看才发现前端加了个蒙板。结果导致xpath变了，然后导航页点击挂了（不能点到导航页，也就进不了具体页面）。改了下倒也不麻烦，但是导runable jar包没给折腾死。实在太多了。
想着如今js也是很强的，就找到了Nightwatch。为什么不用phantomjs？因为用的时候觉得API实在是有点不够用。而且无界面化别人觉得不靠谱（人家觉得眼见为实）。

Nightwatch	phantomjs
有界面	无界面
API丰富	API有点不够用

selenium与nightwatch

Selenium是一个用于Web应用程序测试的工具，nightwatch其实有点像是调用selenium干活一样。只是使用nightwatch做中转和直接使用selenium相比，前者很是轻松易上手。

准备

Java

Java环境是必须的。百度下jdk安装教程数不胜数，在此不赘述。

node.js

node.js环境也是需要的，记得早年npm与nodejs得分开安装，现在却是不用了。官网下载无脑安装即可。

selenium

需要浏览器驱动和selenium server.jar
server.jar下载地址
driver下载地址
得下载和浏览器相匹配的driver。去chromedriver.storage.googleapis.com，点进最新版，查看notes.txt即可看见支持情况。就比如此时最新版为2.33。
https://chromedriver.storage.googleapis.com/2.33/notes.txt
这里提供下chromedriver与chrome版本对照表

chromedriver	chrome
v2.33	v60-62
v2.32	v59-61
v2.31	v58-60
v2.30	v58-60
v2.29	v56-58
v2.28	v55-57
v2.27	v54-56
v2.26	v53-55
v2.25	v53-55
v2.24	v52-54
v2.23	v51-53
v2.22	v49-52
v2.21	v46-50
v2.20	v43-48
v2.19	v43-47
v2.18	v43-46

正文

环境准备就绪，开始撸代码。

简化

首先建立项目，比如nightwatch，在位于当前文件夹的终端/命令行敲入

npm init -y

初始化完成之后输入

npm install --save nightwatch

安装nightwatch依赖
新建nightwatch.json（此文件名不能修改），以下注释了些常用关键项，千万记得实际上这是个JSON文件，不能有注释，自行去掉。更多配置项请看官网，无需找中文版，因为英语很浅显。

{
    "src_folders": [
        "tests" //存放测试用例的文件夹，文件夹不可嵌套
    ],
    "output_folder": "reports",  //存放测试报告文件夹
    "custom_commands_path": "",
    "custom_assertions_path": "",
    "page_objects_path": "",
    "globals_path": "",
    "selenium": {
        "start_process": true,//是否自动开启selenium服务
        "server_path": "./selenium-server-standalone-3.7.1.jar",//selenium jar路径
        "log_path": "",
        "port": 4444,
        "cli_args": {
            "webdriver.chrome.driver": "./chromedriver",  //driver路径
            "webdriver.gecko.driver": "",
            "webdriver.edge.driver": ""
        }
    },
    "test_settings": {
        "default": {
            "launch_url": "http://localhost",
            "selenium_port": 4444,
            "selenium_host": "localhost",
            "silent": true,
            "screenshots": {
                "enabled": true,//是否开启截图，若为false，截图不成功
                "path": ""
            },
            "desiredCapabilities": {
                "browserName": "chrome",//默认使用什么浏览器测试
                "marionette": true
            }
        },
        "chrome": {
            "desiredCapabilities": {
                "browserName": "chrome"
            }
        },
        "edge": {
            "desiredCapabilities": {
                "browserName": "MicrosoftEdge"
            }
        }
    }
}

新建start.js（此文件为启动文件，所以可以随意命名）

require('nightwatch/bin/runner.js')

自此，环境搭建完毕。可以写测试用例
我们新建一个tests文件夹存储测试用例。新建一个./tests/test.js

module.exports = {
    'Search by baidu': function (client) {
        // 定义页面元素
        const searchInput = '#kw';
        const searchBtn = '#su';
        const resultContainer = '#container';
        // 启动浏览器并打开www.baidu.com
        client.url('http://baidu.com').maximizeWindow()
            // 确保输入框可以使用.
            .waitForElementVisible(searchInput, 5000)
            // 输入"nightwatch"然后搜索.
            .setValue(searchInput, 'nightwatch')
            .click(searchBtn)
            .waitForElementVisible(resultContainer, 1000)
            // 截屏 
            .saveScreenshot('reports/answers.png')
            .end()
    }
}

相信这个用例大家都看得懂。
然后终端输入

node ./start.js

效果如下（简书对GIF大小有限制，就截了部分）：

 

效果图.gif

改装

上面我们是事先下载好selenium driver与jar包。其实我们可以使用selenium-standalone这个安装器(需要翻墙)
首先安装依赖

nom install --save-dev selenium-standalone

其次，新建selenium文件夹。在此文件夹下新建selenium-conf.js

const process = require('process')
module.exports = {
    // selenium版本与下载地址
    // check for more recent versions of selenium here:
    // https://selenium-release.storage.googleapis.com/index.html
    version: '3.7.1',
    baseURL: 'https://selenium-release.storage.googleapis.com',
    // Driver看情况配置，比如只需要chrome就止血chrome 即可
    drivers: {
        chrome: {
            // check for more recent versions of chrome driver here:
            // https://chromedriver.storage.googleapis.com/index.html
            version: '2.33.2',
            arch: process.arch,
            baseURL: 'https://chromedriver.storage.googleapis.com'
        },
        ie: {
            // check for more recent versions of internet explorer driver here:
            // https://selenium-release.storage.googleapis.com/index.html
            version: '3.0.1',
            arch: process.arch,
            baseURL: 'https://selenium-release.storage.googleapis.com'
        }
    }
}

新建setup.js文件

const selenium = require('selenium-standalone')
const seleniumConfig = require('./selenium-conf.js')
// 从网络下载selenium
selenium.install({
    version: seleniumConfig.version,
    baseURL: seleniumConfig.baseURL,
    drivers: seleniumConfig.drivers,
    logger: function (message) { console.log(message) },
    progressCb: function (totalLength, progressLength, chunkLength) { }
}, function (err) {
    if (err) throw new Error(`Selenium 安装错误: ${err}`)
    console.log('Selenium 安装完成.')
})

运行setup.js即可安装

node ./selenium/setup.js

大坑

为什么是大坑呢？因为老夫Google，逛了好些国外论坛，看了源码都没搞定下面这货。

坑

先说下原因。都是因为我chromedriver版本与我机子chrome版本不对应。对应表格请看上文
虽然解决了，但是还是说下我的爬坑路。
首先第一想法是参数问题，学过Java的朋友应该知道，Java启用selenium可以设置参数来解决这个问题，不怎么用Java selenium，这里就度娘了一篇。
按照这个思路，那必定是在nightwatch.json里填参数。官网找了圈没找到，就google了下，如下：

 

"chrome": {
    "desiredCapabilities": {
        "browserName": "chrome",
        "chromeOptions": {
            "args": [
                "disable-web-security",
                "ignore-certificate-errors"
            ]
        }
    }
}

发现还真可以消除这个ignore-certificate-errors，但是却不能打开网页。
百般无奈之下，看源码，定位到

 

selenium.js

 

打印this.cliOpts参数可见

 

参数

当然，因为不是很清楚这个对应的参数应该怎么写，自然没成功。知道的朋友望告知一声。

后记

有空写个selenium Java时遇到的一些问题以及解法。比如滚动截屏的Javashi xian

作者：nymlc
链接：https://www.jianshu.com/p/4d60032c5b08
来源：简书