Nightwatch+gulp
Nightwatch+gulp
注:
- npm: 包管理工具
(一)搭建一个简单的nightwatch项目
1. 安装底层环境
- node.js -- 已经包含npm
- 下载地址 https://nodejs.org ->安装exe->检查是否安装成功 cmd: node -v
- npm install npm -g -- 更新npm。因为npm的更新比较快,上面node.js中自带的npm可能不是最新的,所有要更新npm
2. 创建nightwatch项目
- 初始化基本框架和Drvier
- npm init -y -- 手动创建文件 package.json,项目中的第一个文件
- npm install --save-dev nightwatch --‘--save-dev’加上这几个参数可以在安装nightwatch module的同时并当做dependence存入package.json中,后面可以通过npm install去安装
- npm install --save-dev chromedriver -- selenium webdrvier
- 创建项目文件 -- 因为这个项目会和gulp集成,所以不直接使用安装的nightwatch文件,新建一个会是结构更清晰
- 新建 'lib' 目录->放入下载的 'selenium-server-standalone-2.53.0.jar'
- 新建 'src' 目录->
- 新建‘config’目录->新建nightwatch.json文件 --nightwatch.json文件可以直接从安装的nightwatch目录下去拷贝
- 新建‘sections’目录->
- 新建'commands'’目录->
- 新建'assertions'目录->
- 新建 'tests'目录->
- 配置 'nightwatch.json' 文件
basic settings: page_object,sections…的路径
selenium:
test settings: (命令行中env中的值 --env='')
3. 集成到gulp
- 初始化基本框架
- npm install --save-dev -g gulp --要全局安装才能使用gulp命令,不然会报错
- npm install --save-dev gulp-nightwatch
- 根目录下新建文件 gulpfile.js,并配置
最简单的一个配置
var gulp = require('gulp'),
nightwatch = require('gulp-nightwatch');gulp.task('nightwatch', function() {
return gulp.src('')
.pipe(nightwatch({
configFile: 'src/config/nightwatch.json'
}));
});
- 使用gulp命令跑case
- 在tests目录下新建test文件,并写case
- 使用这个命令就可以跑case了: gulp nightwatch
项目结构
test-project
--lib (selenium-server-standalone-2.53.0.jar)
--node_modules
--src
--config (nightwatch.json)
--page_objects
--sections
--commands
--assertions
--ui_tests
--package.json
--gulpfile.js
4. gulp其他插件
- gulp-eslint --检查JS代码规范
- npm install --save-dev eslint
- npm install --save-dev gulp-eslint
- gulpfile.js
var eslint = require('gulp-eslint');
gulp.task('lint', function() {
return gulp
.src(['**/*.js', '!node_modules/**'])
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
- gulp-util
- del --删除文件,比如我们跑case前需要把上次跑后的输出先删除掉
- npm install --save-dev del
- gulp.task('cleanTestUI', function(done) {
del(output)
.then(function () {
done();
});
});
5. 问题
- 如果nightwatch的config文件目录变了,需要在哪个文件里面去修改路径,使得能够读取?(应该是runner在读取)
- 怎么自动启动selenium server (单独跑nightwatch的case的时候需要单独把selenium server打开)
- 错误: selenium is already running on port 4444 --使用这个链接杀掉当前进程http://localhost:4444/selenium-
- server/driver/?cmd=shutDownSeleniumServer
- 错误:An occurred error while retrieving a new session: "Unable to create new service: ChromeDriverService -- 检查selenium server和driver的路径
- 即使把nightwatch的src文件路径全都变了,nightwatch的lib等文件在node_modules下面,也可以一样的支持么?
(二)怎么样设置不同的浏览器 nightwatch.json
1. selenium的配置
- selenium server的路径要配置 ‘ "server_path": "<%= projectRoot %>/lib/selenium-server-standalone-2.53.0.jar",’
- driver的路径要在selenium配置中写上 -=-路径就是上面用npm下载的放在node_modules里面的路径
"cli_args": {
"webdriver.chrome.driver": "D:/test-project/node_modules/chromedriver/lib/chromedriver/chromedriver.exe",
"webdriver.ie.driver" : "D:/test-project/node_modules/iedriver/lib/iedriver/IEDriverServer.exe",
}
2. test_settings的配置
- default: --desiredCapabilities填写默认的driver
"desiredCapabilities" : {
"browserName" : "internet explorer",
"javascriptEnabled" : true,
"acceptSslCerts" : true
}
browserName要和driver里面的名字相同,这样才能找到对应的driver
命令行不输入任何env的时候,就直接使用default里面的配置
- 自定义其他env值
"chrome": {
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true
}
}
如果只有nightwatch本身,则可以直接cmd中 --env chrome
- 如果和gulp集成了,则需要在config目录下新建一个globals.js文件,通过‘gulp-util’去获取命令行的值,如下
var gutil = require('gulp-util'),
module.exports = {env: gutil.env.env || 'default'}
然后传到gulp task里面
gulp.task('nightwatch', function() {
return gulp.src('')
.pipe(nightwatch({
configFile: 'src/config/nightwatch.json',
cliArgs: {
reporter: 'src/config/html-reporter.js',
env: globals.env
}
}));
});
- phantomJS
- 通过selenium 中的 PhantomJS 作为webdriver能够不启动浏览器来解释js文件并获取其解释后的源码
- 启动真正的浏览器,可能带来两个问题:一个是需要的时间较长,另一个是UI自动化易受干扰、不够稳定
- npm install --save-dev phantomjs-prebuilt
- 通过selenium 中的 PhantomJS 作为webdriver能够不启动浏览器来解释js文件并获取其解释后的源码
"phantomjs" : {
"desiredCapabilities" : {
"browserName" : "phantomjs",
"javascriptEnabled" : true,
"acceptSslCerts" : true,
"phantomjs.binary.path" : "D:/test-project/node_modules/.bin/phantomjs.cmd"
}
}
- 集成到browserStack --跨浏览器测试平台 https://www.browserstack.com/automate/nightwatch
- 线上环境
- 线上环境不需要连接私有网络,所以比较简单,只用在nightwatch.json文件中配置test_settings
- 线上环境
浏览器
"browserstack_chrome" : {
"selenium_host" : "hub-cloud.browserstack.com",
"selenium_port" : 80,
"desiredCapabilities": {
"browserstack.user": "catherinewang2",
"browserstack.key": "kKkbwdQyErB92aeStAB1",
"browser": "chrome"
}
}
模拟机
"browserstack_android" : {
"selenium_host" : "hub-cloud.browserstack.com",
"selenium_port" : 80,
"desiredCapabilities": {
"browserstack.user": "catherinewang2",
"browserstack.key": "kKkbwdQyErB92aeStAB1",
"platform": "WIN8",
"browserName": "chrome",
"device": "Google Nexus 5"
}
}
物理机(real mobile)
"browserstack_real_android" : {
"selenium_host" : "hub-cloud.browserstack.com",
"selenium_port" : 80,
"desiredCapabilities": {
"browserstack.user": "catherinewang2",
"browserstack.key": "kKkbwdQyErB92aeStAB1",
"platform": "ANDROID",
"browserName": "chrome",
"device": "Google Nexus 9",
"realMobile": true
}
}
- 测试环境
- 我们在browserstack平台操作的时候,如果想连接到本地私有网络,有个connect local的按钮需要打开,那集成到nightwatch的时候也需要这一步,这里有两个方法实现这个操作,方法一:
- npm install --save-dev browserstack-local
在nightwatch.json文件中配置:‘'browserstack.local': true’
js文件中配置
var browserstack = require('browserstack-local');
var bs_local;
console.log("BrowserStack connecting local");
bs_local = new browserstack.Local();
bs_local.start({"key": globals.BROWSERSTACK_ACCESS_KEY}, function (error) {
if (error) throw error;
console.log('Connected. Now testing...');
});
- 方法二:
- npm install --save-dev gulp-browserstack
- 在nightwatch.json文件中配置:‘'browserstack.local': true’
- gulp文件中配置
- 我们在browserstack平台操作的时候,如果想连接到本地私有网络,有个connect local的按钮需要打开,那集成到nightwatch的时候也需要这一步,这里有两个方法实现这个操作,方法一:
var browserStack = require('gulp-browserstack');
gulp.task('testUI:test', ['cleanTestUI'], function() {
return gulp
.src('')
.pipe(browserStack.startTunnel({
key: 'TQtWg9ELqiNAscJSH4qz'
}))
.pipe(uiAutomation({
output: output,
tag: 'end2end1',
env: 'browserstack_chrome'
}))
.pipe(browserStack.stopTunnel());
});
3. 问题
- selenium问题是只能打开firefox浏览器,不能访问网址 --网上搜资料说可能是浏览器和selenium server之间兼容性的原因,还没有尝试
(三)集成nigthwatch html reporter
1. 第三方包
- 源代码路径 https://github.com/jls/nightwatch-html-reporter
- 通过npm初始化 npm install --save-dev nightwatch-html-reporter
2. 使用第三包
- 在config目录下新建html-reporter.js文件, 去配置reporter相关的内容 (git上面有介绍)
- 如果只有nightwatch本身,则可以直接当做nightwatch的option --reporter ./html-reporter.js
- 如果与gulp集成
- 第一种方法可以直接写在gulp task里面
nightwatch({
configFile: 'src/config/nightwatch.json',
cliArgs: {
reporter: 'src/config/html-reporter.js'
}
})
- 第二种方法可以通过globals.js去获取命令行中的option 然后传到cliArgs里面
globals.js -
var gutil = require('gulp-util'),
module.exports = {reporter: gutil.env.reporter}
gulpfiles.js --
nightwatch({
configFile: 'src/config/nightwatch.json',
cliArgs: {
reporter: globals.reporter
}
})
cmd: --reporter ./html-reporter.js
Nightwatch
学习地址: http://nightwatchjs.org/
(一) Nightwatch扩展
- node_modules\nightwatch\lib\page-object\page.js|element.js|command-wrapper.js
- 将定义的page objects路径配置到nightwatch.config文件之后,别的文件(一般是test文件)就可以直接使用client.page.PageName()去调用page object了
- 将定义的commands路径配置到nigthwatch.config文件之后,别的文件(一般是test文件)就可以直接使用client.verifyHomeModal()去调用自定义command了(调用对象是command文件的名字)
- 将定义的assertions路径配置到nightwatch.config文件之后,别的文件(一般是page object文件)就可以直接使用this.verify.assersionName()去调用自定义assertion了(调用对象是assertion文件的名字)(this代表当前page object对象)
(二)Nightwatch自己的一些API
- client.maximizeWindow()->Maximizes the current window (nightwatch/lib/api)
- client.saveScreenshot->write in client-command.js (nightwatch/lib/api)
- this.currentTest->all info about out test suite, write in testsuite.js (nightwatch/lib/runner)
(三)浏览器启动模式
- 通过selenium server启动
{"selenium" : {"start_process" : true,"server_path" : "./bin/selenium-server-standalone-3.{VERSION}.jar","log_path" : "","port" : 4444,"cli_args" : {"webdriver.chrome.driver" : "./bin/chromedriver"}} }
- 直接使用browser driver
- 关闭selenium server
{"selenium" : {"start_process" : false} }
- 配置端口和默认网址前缀
{"test_settings" : {"default" : {"selenium_port" : 9515,"selenium_host" : "localhost","default_path_prefix" : "","desiredCapabilities": {"browserName": "chrome","chromeOptions" : {"args" : ["--no-sandbox"]},"acceptSslCerts": true}}} }
- 启动chromedriver server(需要添加额外的文件)
var chromedriver = require('chromedriver'); module.exports = {before : function(done) {chromedriver.start();done();},after : function(done) {chromedriver.stop();done();} };
- 关闭selenium server
(四)Nightwatch中实现并行模式
- 多个浏览器并行:可以在命令行中实现 -e default,chrome
- 多个test文件并行:
"test_workers": {"enabled": true, "workers": "auto" //determined by number of CPUs e.g. 4 CPUs means 4 workers }
(五)问题
- client:test文件中有些function里面会传一个client参数,这client代表的是什么? --当前理解是current browser object, 还需要去debug
Gulp
1. gulp.task('taks name', function () {return ...}) 定义一个task任务
2. gulp.src('') --源文件路径
.pipe()的作用 -- Unix操作系统的管道(pipe)思想,前一集的输出,直接变成后一集的输入。通常命令和命令之前的衔接就是用pipe。类似jQuery的链式编程
转载于:https://www.cnblogs.com/lj8023wh/p/7059421.html
Nightwatch+gulp相关推荐
- gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:"grun ...
- Gulp快速入门教程
Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废 ...
- gulp die('click').live('click' composer
gulp die('click').live('click' composer packagist.org https://getcomposer.org/ 下载后 php composer.pha ...
- eslint 换行_javascript – 预期的换行符为“LF”,但在Eslint中使用gulp找到“CRLF”换行符...
当在gulp项目中使用eslint时,我遇到了像这样的错误的问题.预期的linebreaks为'LF',但是发现'CRLF'linebreak-style,我正在使用 Windows环境运行gulp, ...
- thinkphp整合系列之gulp实现前端自动化
这又是一个一次整合终身受益:不止是终身:换个项目同样可以很方便复用:不信你看另一个项目: thinkphp整合系列之gulp实现前端自动化 虽然我等叫php程序猿:但是不可避免的是要跟html打交道的 ...
- gulp插件之browser-sync安装报错
2019独角兽企业重金招聘Python工程师标准>>> 最近做前端开发,一直用gulp来写一些自动化脚本.之前用的npm的镜像为edunpm,很简单,因为这个镜像非常的快. 但是不知 ...
- 55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
- 基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
最新文章
- 三维刚体变化中Rcw,tcw的含义
- 通过 cygwin64 自己编译对应的 Tera Term cyglaunch.exe
- 超全Python IDE武器库大总结,优缺点一目了然!
- python爬取本地天气信息_用Python写一个爬取中国天气网的终端版天气预报爬虫
- 创建以mybatis为基础的web项目(2)mabitis中的一对一关系项目实战
- 项目受源代码管理。向源代码管理注册此项目时出错。建议不要对此项目进行任何更改...
- 使用代码辅助生成工具CodeSmith -- 生成NHibernate的映射文件
- yalmip简单的例子
- texmacs 源码安装
- HTTP gzip压缩
- 【3】SALSA-基于HIC数据辅助组装长读长组装结果
- 《小朱家的爬虫》第二课------- 编写第一个网络爬虫
- 【android】 如何把gif图片下载到本地
- java.nio.channels.UnresolvedAddressException
- 面试完还呗、拼多多、蚂蚁金服、趣头条、京东到家之后,我知道了这些
- 李峋 爱心代码 点燃我温暖我
- 密歇根大学计算机科学与工程,密歇根大学计算机专业有何独到之处
- 乐优商城之项目搭建(四)
- uniapp项目统计2.0
- MS5611气压计IIC源程序
热门文章
- excel怎么批量插行_如何快速批量合并多个Excel表格,分享给大家
- 服务器经常开关机会影响吗,频繁给手机重启/开关机,会对手机产生危害吗?...
- 如何绕好精密细微线圈
- 京东开普勒导购模式代码分享[java]
- dnf体验服显示服务器爆满,dnf体验服爆率 真的是爆率调整过的服务器
- python读取excel公式计算结果为none_python读取excel保存公式无法读取
- Android系统之路(初识MTK) ------ Default Voice Control/输入法校准、自动校准、首字母大写、按键声音
- 优秀产品背后的设计原则
- 联想小新潮5000如何进入BIOS模式
- 联想小新潮7000-14ikbr装机方法【无法用U盘启动的问题