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

"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)

（三）浏览器启动模式

通过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();
  }
};

（四）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的链式编程

posted @ 2017-10-25 09:32 Catherine-Wang 阅读(447) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Catherine-Wang

Nightwatch+gulp

Nightwatch+gulp

（一）搭建一个简单的nightwatch项目

（二）怎么样设置不同的浏览器 nightwatch.json

（三）集成nigthwatch html reporter

Nightwatch

Gulp

公告