e2e自动化之Nightwatch

前言

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

Nightwatchphantomjs
有界面无界面
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版本对照表

chromedriverchrome
v2.33v60-62
v2.32v59-61
v2.31v58-60
v2.30v58-60
v2.29v56-58
v2.28v55-57
v2.27v54-56
v2.26v53-55
v2.25v53-55
v2.24v52-54
v2.23v51-53
v2.22v49-52
v2.21v46-50
v2.20v43-48
v2.19v43-47
v2.18v43-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
来源:简书

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值