使用Nightwatch.js做基於瀏覽器的web應用自動化的測試

標籤：cer   abi   another   and   選項   log   pat   運行命令   page   

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.

使用Nightwatch.js做基於瀏覽器的web應用自動化的測試