[Nightwatch]Nightwatch开发环境搭建

背景:Nightwatch是一个node.js的前端自动化测试框架,和PhantonmJS不同,Nightwatch基于Webdriver API去操作浏览器的DOM元素,这里不详解Nightwatch、Webdriver API、selenium、PhantomJS这些框架和概念的区别,仅从实践角度看看Nightwatch的开发环境如何搭建

开发环境:

  • OS:MAC OS X
  • IDE:Webstorm
  • Node:7.9.0
  • NPM:4.2.0
  • TNPM:4.22.0

搭建步骤:

1.install node.js
参考:在mac上安装node.js
2.新建一个node项目,在项目根目录下添加package.json,可以手动添加,也可以使用命令行添加:

npm init -y

3.全局安装nightwatch

cnpm install -g nightwatch

这里和第4步项目中安装nightwatch依赖有什么不同?
-g是全局安装,这样nightwatch的命令可以任意目录都可以识别
如果只是安装为一个项目依赖,那么nightwatch的binary只能在node_modules/.bin中才能引用到
4.安装selenium server,首先安装jdk 1.7以上,然后安装selenium server:

Download the latest version of the selenium-server-standalone-{VERSION}.jar file from the Selenium downloads page and place it on the computer with the browser you want to test. In most cases this will be on your local machine and typically inside your project's source folder.

A good practice is to create a separate subfolder (e.g. bin) and place it there as you might have to download other driver binaries if you want to test multiple browsers.

下载selenium-server-standalone-{VERSION}.jar,然后放到项目的bin/目录下
5.下载webdriver,然后放到项目的bin/目录下:

6.[可选步骤]然后在项目中安装nightwatch和selenium依赖,在项目根目录下运行:

cnpm install --save-dev nightwatch selenium-standalone
[Nightwatch]Nightwatch开发环境搭建_第1张图片

7.在项目根目录下添加配置文件:nightwatch.json

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "",
  "globals_path" : "",

  "selenium" : {
    "start_process" : true,
    "server_path" : "bin/selenium-server-standalone-2.53.0.jar",
    "log_path" : "",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "bin/chromedriver",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://www.baidu.com",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "chrome",
        "marionette": true
      }
    },

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

    "edge" : {
      "desiredCapabilities": {
        "browserName": "MicrosoftEdge"
      }
    }
  }
}

具体每个配置的含义,可以参考:nightwatch配置
8.写一个测试代码:

module.exports = {
    'Demo test' : function (browser) {
        browser
            .url(browser.launchUrl)
            .end();
    }
};
[Nightwatch]Nightwatch开发环境搭建_第2张图片

9.通过nightwatch执行测试代码,如果没有报错,且打开了页面,表示环境搭建成功:

[Nightwatch]Nightwatch开发环境搭建_第3张图片

注意:selenium-server如果使用3以上版本,可能会导致页面打不开,这里替换成2的版本即可,原因未定位

你可能感兴趣的:([Nightwatch]Nightwatch开发环境搭建)