使用Nightwatch.js做基于浏览器的web应用自动测试

1        安装

1.1   安装Node.js

http://nodejs.org/ 上下载适合本机系统的安装包运行安装,注意安装选项中选择npm tool以用于后续依赖包的安装。

1.2   通过npm工具安装Nightwatch

命令行运行“npm install nightwatch”,如下的提示表明安装成功。

1.3   Npm相关目录结构

所有npm安装的模块都会基于当前cmd窗口的目录,也就是说如果cmd的工作目录是在c:\根目录,则会在该目录下创建node_modules文件夹,并将安装的模块都放到该目录下,如果通过windows附件程序或者win+R启动的,则工作目录在“%USERPROFILE%\”下。

Npm安装所下载的临时文件保存在“%appdata%\npm-cache”下。

1.4   下载Selenium WebDriver server

http://selenium-release.storage.googleapis.com/index.html上下载最新版本的jar包,并将其放到NightWatch的bin目录下。

2        实例使用

2.1   nightwatch.js中增加引用

在”\node_modules\nightwatch\examples\tests\nightwatch.js”中增加引用“require(‘../../bin/runner.js‘);”

2.2  运行Selenium WebDriver server(进入jar所在目录, 我的目录是D:\nodejs\node_modules\nightwatch\bin,运行命令“java -jar 2.53.1-server.jar”

2.3   运行nightwatch.js

命令行下,cd到nightwatch所在的目录(我的目录是D:\nodejs\node_modules\nightwatch),然后运行“node ./examples/tests/nightwatch.js”

我用的chrome浏览器,我将chromedriver.exe放置在目录D:\nodejs\node_modules\nightwatch\bin下, nightwatch.json配置文件如下:

{
  "src_folders" : ["./examples/tests"],
  "output_folder" : "./examples/reports",
  "custom_commands_path" : "./examples/custom-commands",
  "page_objects_path" : "./examples/pages",
  "custom_assertions_path" : "",
  "globals_path" : "",
  "live_output" : false,
  "parallel_process_delay" : 10,
  "disable_colors": false,
  "test_workers" : false,

  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "host" : "127.0.0.1",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "./",
      "webdriver.ie.driver" : "",
      "webdriver.firefox.profile" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_host" : "127.0.0.1",
      "selenium_port" : 4444,
      "silent" : true,
      "disable_colors": false,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities" : {
        "browserName" : "chrome",
        "javascriptEnabled" : true,
        "acceptSslCerts" : true
      }
    },

	"chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    },

    "saucelabs" : {
      "selenium_host" : "ondemand.saucelabs.com",
      "selenium_port" : 80,
      "username" : "${SAUCE_USERNAME}",
      "access_key" : "${SAUCE_ACCESS_KEY}",
      "use_ssl" : false,
      "silent" : true,
      "output" : true,
      "screenshots" : {
        "enabled" : false,
        "on_failure" : true,
        "path" : ""
      },
      "desiredCapabilities": {
        "name" : "test-example",
        "browserName": "firefox"
      },
      "globals" : {
        "myGlobal" : "some_sauce_global"
      },
      "selenium" : {
        "start_process" : false
      }
    },

    "phantomjs" : {
      "desiredCapabilities" : {
        "browserName" : "phantomjs",
        "javascriptEnabled" : true,
        "acceptSslCerts" : true,
        "phantomjs.binary.path" : "/path/to/phantomjs"
      }
    },

    "browserstack" : {
      "selenium" : {
        "start_process" : false
      },
      "selenium_host" : "hub.browserstack.com",
      "selenium_port" : 80,
      "silent" : true,
      "desiredCapabilities": {
        "name" : "test-example",
        "browserName": "firefox",
        "browserstack.user" : "...",
        "browserstack.key" : "..."
      }
    },

    "testingbot" : {
      "selenium_host" : "hub.testingbot.com",
      "selenium_port" : 80,
      "apiKey" : "${TB_KEY}",
      "apiSecret" : "${TB_SECRET}",
      "silent" : true,
      "output" : true,
      "screenshots" : {
        "enabled" : false,
        "on_failure" : true,
        "path" : ""
      },
      "desiredCapabilities": {
        "name" : "test-example",
        "browserName": "firefox"
      },
      "selenium" : {
        "start_process" : false
      }
    }
  }
}

  

2.3   异常处理

如果没意外,执行上述js的时候会抛类似下面的异常,不要慌张,根据异常提示,安装所需要的module即可,安装方法“npm install xxx”。

3        基本原理

4        测试套件

Nightwatch.js makes it possible to organizedyour test scripts into groups and run them as needed. To group tests togetherjust place them in the same sub-folder. The folder name is the name of thegroup.例如下面的目录结构。

5        自己的脚本

在nightwatch根目录下建一个名为test.js的文件:

require(‘./bin/runner.js‘);

var nightwatch = require(‘./index.js‘);

module.exports = {

"step one" : function (browser) {

browser

.url("http://www.google.com.hk")

.waitForElementVisible(‘body‘, 1000)

.setValue(‘input[type=text]‘, ‘nightwatch‘)

.waitForElementVisible(‘button[name=btnG]‘, 1000)

},

"step two" : function (browser) {

browser

.click(‘button[name=btnG]‘)

.pause(1000)

.assert.containsText(‘#main‘, ‘The Night Watch‘)

.end();

}

};

然后”node ./test.js”运行:

更多的使用参见其api文档:http://nightwatchjs.org/api

6        产品特征

?  Simple but powerful syntax which enables you to write tests veryquickly, using only JavaScript and CSS selectors. No need to initialize otherobjects and classes, you only need to write the test specs.

?  Built-in command-line test runner which enables you to run the testseither altogether, by group or single.

?  Manages the Selenium server automatically; can be disabled ifSelenium runs on another machine.

?  Continous Integration support: JUnit XML reporting is built-in soyou can integrate your tests in your build process with systems suchs as Hudsonor Teamcity.

?  Use CSS selectors or Xpath to locate and verify elements on the pageor execute commands.

?  Easy to extend if you need to implement your own commands specificto your application.

时间: 2024-10-09 13:40:36

使用Nightwatch.js做基于浏览器的web应用自动测试的相关文章

Breach - HTML5 时代,基于 JS 编写的浏览器

Breach 是一款属于 HTML5 时代的开源浏览器项目,,完全用 Javascript 编写的.免费.模块化.易于扩展.这个浏览器中的一切都是模块,Web 应用程序在其自己的进程运行.通过选择合适的模块为您构建自己的浏览体验. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件 精心挑选的美轮美奂的 jQuery 图片特

10款基于jquery的web前端特效及源码下载

1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. 在线演示一 在线演示二 在线演示三 源码下载 2.使用Ctrl+Enter提交表单 我们发表微博或论坛发帖时,在内容输入框中输入完内容后,可以点击 提交 按钮来发表内容.可是,如果你够 懒 ,你可以不用动鼠标,只需按住键盘上的Ctrl+Enter

基于SignalR的web端即时通讯 - ChatJS

先上图. ChatJS 是基于SignalR实现的Web端IM,界面风格模仿的是“脸书”,可以很方便的集成到已有的产品中. 项目官网:http://chatjs.net/ github地址:https://github.com/andrerpena/ChatJS 在浏览器端,ChatJS是一系列的jQuery插件,这些代码都是使用TypeScript(微软开发的JS的一个面向对象超集,可以编译成JS)编写.在服务端,是一个简单的类库.如果要集成ChatJS ,服务端需要做的仅仅是实现 IChat

Flask之旅《Flask Web开发:基于Python的Web应用开发实战》学习笔记

<Flask Web开发:基于Python的Web应用开发实战> 点击上方的"目录"快速到达哦! 虽然简单的网站(Flask+Python+SAE)已经上线,但只是入门.开发大型网站,系统地学习一遍还是有必要的. 1 虚拟环境 2016-6-8 书上介绍了 virtualenv,每个venv都会拷贝一份packages到项目 /venv目录. virtualenv venv venv\Scripts\activate.bat (venv) $ pip freeze >

20个最强的基于浏览器的在线代码编辑器

20个最强的基于浏览器的在线代码编辑器,你听过或者用过吗? 1. Compilr Compilr是一个在线编译器和在线IDE.可以用它来开发PHP, C, C++, Ruby.在浏览器中编译Java, C# 和 VB.net等. 马上使用 2. Dabblet 跨浏览器兼容,对前端攻城师们来说是一个不得不处理的问题.为了在浏览器间呈现统一的显示效果,攻城师们不仅要为每个游览器添加CSS前缀,甚至还需要用到一些特殊的CSS Hack技巧.于是,jsFiddle.JSBin等前端代码的在线测试工具应

JS做深度学习1——偶然发现与入门

JS做深度学习1--偶然发现与入门 不久前,我初次涉猎了Node.js,并且使用它开发了毕业设计的WEB模块,然后通过在Node中调用系统命令执行Python文件方式实现了深度学习功能模块的对接,Python代码的介入,让JS代码显得很累赘,我说过我很爱ES6以后的JS并且很讨厌Python的代码风格,无奈,我在写毕设那会Google还没有正式发布基于JS的深度学习框架,好吧,其实我对这事已经抱怨了很久,但是我的"呼声"仿佛很快就被Google"认同了"(滑稽),就

基于HTML5的Web SCADA工控移动应用

在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用,近些年随着HTML5的流行,加上移动终端对HTML5支持的普及,越来越多新项目开始采用真正纯HTML5的方案,更具体的说大数据量应用性能高于SVG的Canvas方案,已经逐渐成为当今Web SCADA前端技术的首选标配方案. htt

基于jQuery 常用WEB控件收集

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook

基于HT for Web的Web SCADA工控移动应用

在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用,近些年随着HTML5的流行,加上移动终端对HTML5支持的普及,越来越多新项目开始采用真正纯HTML5的方案,更具体的说大数据量应用性能高于SVG的Canvas方案,已经逐渐成为当今Web SCADA前端技术的首选标配方案. 最近客