zoukankan      html  css  js  c++  java
  • Nightwatch+gulp

    Nightwatch+gulp

    注:

    • npm: 包管理工具

    (一)搭建一个简单的nightwatch项目

    1. 安装底层环境

    • node.js  -- 已经包含npm
    • 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 ightwatchlibpage-objectpage.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的链式编程

  • 相关阅读:
    什么是ORM
    ORM优缺点
    Azure 中快速搭建 FTPS 服务
    连接到 Azure 上的 SQL Server 虚拟机(经典部署)
    在 Azure 虚拟机中配置 Always On 可用性组(经典)
    SQL Server 2014 虚拟机的自动备份 (Resource Manager)
    Azure 虚拟机上的 SQL Server 常见问题
    排查在 Azure 中新建 Windows 虚拟机时遇到的经典部署问题
    上传通用化 VHD 并使用它在 Azure 中创建新 VM
    排查在 Azure 中新建 Windows VM 时遇到的部署问题
  • 原文地址:https://www.cnblogs.com/lj8023wh/p/7059421.html
Copyright © 2011-2022 走看看