Nightwatch+gulp

Posted 2020-10-11

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当做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
• 即使把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 

"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文件中配置

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)

（三）问题

• 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的链式编程