selenium + nightwatch 进行前端测试

第一次写测试是在看《Python Web开发:测试驱动方法》的样章的时候,当通过一行命令就可以打开浏览器并完成指定操作时,感觉非常有趣。在无聊的时候,想到是否可以利用这种方式来简化每日写日报的工作,于是找到了selenium + nightwatch搭建的前端测试环境,在实现了这个小目标后,想着将学习到的东西用在项目中。个人觉得该测试环境最大的作用应该是可以简化填写表单的操作,如果项目存在很多表单,在进行业务测试的时候,如果每次都要填写一遍表单,将会是一个非常枯燥无聊的工作。正在进行的项目刚好有非常多的表单,所以尝试利用该工具方便之后的业务测试。

网上已经有很多关于这些知识点的文章,尝试用最简单的步骤实现。

环境准备

selenium是一个.jar后缀的文件,需要有java的运行环境,在命令行输入java -version查看是否安装好了。nodejs 当然也是必须的。

概述

总的来说,核心是使用seleniumdriver操作浏览器,通过 nightwatch做断言。

依赖

需要在项目中安装两个依赖:

npm install --save-dev nightwatch selenium-standalone

selenium-standalone 是 selenium 的下载和管理工具。使用该工具,可以方便下载不同浏览器的driver。不过不知道是个人原因还是资源被墙了,无法正常下载,所以实际上并没有真正用到selenium-standalone

配置

只需要两个文件即可运行搭建好测试环境。

nightwatch.json

{
  "src_folders": ["tests"],
  "output_folder": "reports",
  "custom_commands_path": "",
  "custom_assertions_path": "",
  "page_objects_path": "",
  "globals_path": "",
  "selenium": {
    "start_process": true,
    "server_path": "node_modules/selenium-standalone/.selenium/selenium-server/2.53.1-server.jar",
    "log_path": "",
    "host": "127.0.0.1",
    "port": 4444,
    "cli_args": {
      "webdriver.chrome.driver": "node_modules/selenium-standalone/.selenium/chromedriver/2.22--chromedriver"
    }
  },
  "test_settings": {
    "default": {
      "launch_url": "http://localhost",
      "selenium_port": 4444,
      "selenium_host": "localhost",
      "silent": true,
      "screenshots": {
        "enabled": false,
        "path": ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    },
    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

重点是selenium.server_pathselenium.cli_args.webdriver.chrome.driver,指定了seleniumdriver的路径,上面提到,这两个是用来操作浏览器的。

start.js

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

其实现在就已经配置好了,安装好seleniumdriver后就可以进行测试了。

点击下载,下载后放到上面配置文件对应的路径下就可以。或者参考“更多”尝试自行下载。

测试代码

// tests/demo.js
module.exports = {
  'open browser': function (client) {
    client.url('http://www.baidu.com')
  }
}

运行node start.js -t tests/demo.js -e chrome --verbose,如果弹出 chrome 浏览器并且打开百度,表示成功。

更多

不同的浏览器需要有不同的driver,并且driver还会有版本,selenium-standalone就是为这种情况准备的。下面的内容网上都能找到。
首先是写好配置文件,要下载什么driver,版本是什么:

// selenium-conf.js
const process = require('process')
module.exports = {
    // Selenium 的版本配置信息。请在下方链接查询最新版本。升级版本只需修改版本号即可。
    // https://selenium-release.storage.googleapis.com/index.html
    selenium: {
        version: '2.53.1',
        baseURL: 'https://selenium-release.storage.googleapis.com'
    },
    // Driver 用来启动系统中安装的浏览器,Selenium 默认使用 Firefox,如果不需要使用其他浏览器,则不需要额外安装 Driver。
    // 在此我们安装 Chrome 的 driver 以便使用 Chrome 进行测试。
    driver: {
        chrome: {
            // Chrome 浏览器启动 Driver,请在下方链接查询最新版本。
            // https://chromedriver.storage.googleapis.com/index.html
            version: '2.22',
            arch: process.arch,
            baseURL: 'https://chromedriver.storage.googleapis.com'
        }
    }
} 

然后是一个脚本,用来从上面指定的网址下载对应的文件到项目依赖中:

// setup.js
// 载入安装工具
const selenium = require('selenium-standalone')
// 载入配置,要安装什么驱动,什么版本的 selenium
const seleniumConfig = require('./selenium-conf.js')
// 调用 install 方法从网络下载真正的 selenium
selenium.install({
    version: seleniumConfig.selenium.version,
    baseURL: seleniumConfig.selenium.baseURL,
    drivers: seleniumConfig.driver,
    logger: function (message) { console.log(message) },
    progressCb: function (totalLength, progressLength, chunkLength) {}
}, function (err) {
    if (err) throw new Error(`Selenium 安装错误: ${err}`)
    console.log('Selenium 安装完成.')
})

正常情况下,执行上面的脚本就可以成功下载对应的文件到node_modules/selenium-standalone/.selenium文件夹下。

再回过头看看nightwatch.json文件,是不是selenium.server_pathselenium.cli_args.webdriver.chrome.driver都写明了版本号?如果之后有新版本了,那不仅要修改selenium-conf.js文件,还要修改nightwatch.json肯定很麻烦,所以就需要再增加一个文件,这个文件的作用是从selenium-conf.js中读取字段,并替换nightwatch.json对应内容。

// nightwatch.conf.js
const seleniumConfig = require('./selenium-conf')
const path = require('path')
module.exports = (function (settings) {
  // 告诉 Nightwatch 我的 Selenium 在哪里。
  settings.selenium.server_path = `${path.resolve()}/node_modules/selenium-standalone/.selenium/selenium-server/${seleniumConfig.selenium.version}-server.jar`
  // 设置 Chrome Driver, 让 Selenium 有打开 Chrome 浏览器的能力。
  settings.selenium.cli_args['webdriver.chrome.driver'] = `${path.resolve()}/node_modules/selenium-standalone/.selenium/chromedriver/${seleniumConfig.driver.chrome.version}-${seleniumConfig.driver.chrome.arch}-chromedriver`
  // 打开 ie
  settings.selenium.cli_args['webdriver.ie.driver'] = `${path.resolve()}/node_modules/selenium-standalone/.selenium/iedriver/IEDriverServer.exe`
  return settings;
})(require('./nightwatch.json'))

需要注意的就是,要使用不同浏览器,需要nightwatch.json中"test_settings"字段有不同浏览器的配置,上面默认是firefox,有chrome。然后也要修改node start.js -t tests/demo.js -e chrome --verbose对应参数,表示要使用其他浏览器进行测试。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容