Nightwatch.js 是一个用来测试web应用和网站的自动化测试框架,它是由NodeJs编写的,使用了W3C WebDriver API(之前是Selenium WebDriver)

所以我们首先是要安装NodeJs:

1.首先,从Node.js官网下载对应平台的安装程序,网速慢的童鞋请移步国内镜像,在Windows上安装时务必选择全部组件,包括勾选Add to Path

2.安装完成后输入 npm -v(npm是Node.js的包管理工具(package manager)

Nightwatch 安装

1.完成后我们创建一个文件夹名为(nightwatch-test),名称根据个人喜好

2.初始化项目: npm init -y

3.安装依赖:npm install nightwatch

4.安装seleniumserver服务:npm install selenium-server

5.安装谷歌驱动:npm install chromedriver   ps:这边要根据你的浏览器版,有可能会版本不兼容的情况

从Chrome75版本开始,就默认使用了W3C的webdriver协议,但nightwatch用的是JSONWP,和W3C不兼容,所以如果想要正常使用,必须关闭W3C的协议。也就是说,可以在测试文件里加上这么一段:

module.exports = {
desiredCapabilities: {
browserName: "chrome",
chromeOptions: {
w3c: false
}
}
}

Nightwatch配置

在项目的根目录下新建一个nightwatch.conf.js文件,然后将以下的代码拷贝进去。

module.exports = {
src_folders: ['examples'],//这边的src_folders的值为运行的测试目录
output_folder: 'output',
custom_assertions_path: [],
page_objects_path: '',
globals_path: '', selenium: {
start_process: true,
server_path: require('selenium-server').path,
host: '127.0.0.1',
port: 5555,
cli_args: {
'webdriver.chrome.driver': require('chromedriver').path
}
}, test_settings: {
default: {
selenium_port: 5555,
selenium_host: 'localhost',
silent: true,
globals: {
devServerURL: 'http://localhost:' + (process.env.PORT || 1111)
}
}, chrome: {
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true
}
}, firefox: {
desiredCapabilities: {
browserName: 'firefox',
javascriptEnabled: true,
acceptSslCerts: true
}
}
}
}

Nightwatch 脚本编写

1.在项目的根目录下新建一个examples(必须跟你刚才在src_folder下设置的名称一直)的文件夹,用于存放我们的测试脚本。接着新建一个js文件作为测试文件

2.创建脚本js文件

module.exports = {
desiredCapabilities: {
browserName: "chrome",
chromeOptions: {
w3c: false
}
},
'search nightwatch on baidu': function (browser) {
browser
.url('https://www.baidu.com/')
.waitForElementVisible('body', 1000)
.setValue('#kw', 'nightwatch')
.click('#su')
.pause(3000)
.waitForElementVisible('#content_left', 3000)
.end();
}
};

3.创建第二个js脚本

module.exports = {
'search nightwatch on baidu': function (browser) {
browser
.url('http://192.xxx.x.xx:6013/')
.waitForElementVisible('body', 1000)
.useXpath()
.setValue('//*[@id="app"]/div/div/form/div[1]/div/div/input', 'admin')
.setValue('//*[@id="app"]/div/div/form/div[2]/div/div/input', '123456')
.click('//*[@id="app"]/div/div/form/div[3]/div/button')
.pause(3000)
.end();
}
};

  

运行测试用例

1.接着我们在package.json的scripts中"e2e": "nightwatch --env chrome"加入运行脚本:

{
"name": "nightwatch-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"e2e": "nightwatch --env chrome", //路径
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"nightwatch": "^1.0.19",
"selenium-server": "^3.141.59"
}
}

接着在项目根目录下运行:

npm run e2e

强烈推荐学习地址:

https://github.com/cythilya/nightwatch101

nightwatch入门教程的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. Content Security Policy 入门教程

    阮一峰文章:Content Security Policy 入门教程

  5. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  6. UE4新手引导入门教程

    请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf

  7. ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  8. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

  9. 转载:TypeScript 简介与《TypeScript 中文入门教程》

    简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...

  10. SharePoint 2013 Designer 入门教程

    SharePoint的使用中,SharePoint Designer是非常重要的工具,我们可以通过Designer设计页面.母版页,维护.管理站点,也可以定制列表表单.数据视图,设计工作流等等.下面总 ...

随机推荐

  1. Echarts 折线图Demo调色12种,可以直接使用~~~

    测试Demo代码~~ <template> <div> <div id="myChart" ref="mapBox" style= ...

  2. Vue13 样式动态绑定

    1 class样式的动态绑定 1.1 说明 通过命令v-bind:class设置一个对象,动态切换class.可以简写为:class. class=""可以和:class=&quo ...

  3. 有序数组的平方&长度最小的子数组&螺旋矩阵Ⅱ

    一.有序数组的平方 977.有序数组的平方 leetcode链接 1.方法概述 双"指针"解法:因为数组本来是有序的,平方后可能出现的两端大数值大的情况.所以从数组两端开始遍历,谁 ...

  4. xml基本学习

    概念:可拓展标记语言.可拓展即标签都是自定义的.标记语言即由标签构成的语言. 功能:存储数据: 配置文件 在网络中传输 语法 基本语法: xml文件后缀名为.xml xml第一行必须定义为文档声明 x ...

  5. 视觉十四讲:第十二讲_RGB-D稠密点云

    1.点云地图 所谓点云,就是由一组离散的点表示的地图,最基本的点包含x,y,z三维坐标,也可以带有r,g,b的彩色信息. #include <iostream> #include < ...

  6. python-最近面试遇到的代码题,mark一下

    1. 打印1000以内的质数 draft版本: def printlist(): a = [] for i in range(1, 1001): b.append(i) for j in range( ...

  7. jenkins简单安装及配置(Windows环境

    jenkins简单安装及配置(Windows环境) jenkins是一款跨平台的持续集成和持续交付.基于Java开发的开源软件,提供任务构建.持续集成监控的功能,可以使开发测试人员更方便的构建软件项目 ...

  8. python批量修改一个文件夹下含多个文件夹中的所有图片名称

    网上能找到的,大多是只对一个文件夹下所有图片进行重命名的代码. 这边实现的是,一个文件夹下有多个文件夹内图片的重命名. rename.py #!/usr/bin/python # -*- coding ...

  9. kubebuilder简明教程

    一.operator概述 Operator 是 Kubernetes 的扩展软件,它利用 定制资源 管理应用及其组件. Operator 遵循 Kubernetes 的理念,特别是在控制器 方面[1] ...

  10. Electron 打包 (electron-builder)

    本文只测试了Windows 10 下打包Windows基础安装包 更多花哨的配置,请戳官方文档 https://www.electron.build/​ www.electron.build/ 构建基 ...