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. day13-实现Spring底层机制-03

    实现Spring底层机制-03 7.实现任务阶段5 7.1分析 阶段5目标:bean后置处理器的实现 7.2代码实现 新增: 1.创建 InitializingBean 接口,实现该接口的 Bean ...

  2. 如何在阿里云服务器搭建flask

    下载flask不用我多说了,pip3 install flask 今天在阿里云的服务器上测试一个Flask程序,命名指定了 ip:0.0.0.0,port:5000,但是外网IP确怎么也访问不了网页 ...

  3. day05-SpringMVC底层机制简单实现-01

    SpringMVC底层机制简单实现-01 主要完成:核心分发控制器+Controller和Service注入容器+对象自动装配+控制器方法获取参数+视图解析+返回JSON格式数据 1.搭建开发环境 创 ...

  4. Nginx13 openresty使用lua-resty-template

    1 简介 https://github.com/bungle/lua-resty-template 如果学习过JavaEE中的servlet和JSP的话,应该知道JSP模板最终会被翻译成Servlet ...

  5. 关于opencv3.2的parallel_for_函数不支持bind function的处理(基于ch8代码)

    1.换opencv4 2.修改程序 改程序针对slambook2/ch8/direct_method.cpp #include <opencv2/opencv.hpp> #include ...

  6. Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()

    一. provide和inject(依赖注入) 1:在父级组件中提供数据           语法:provide('提供给子组件的变量名',提供给子组件的数据) 2: 在子级组件中获取收据     ...

  7. 主流的第三方直播SDK对比(腾讯云、即构、阿里云、声网、网易云信、网宿)

    直播业务概述 大家所熟知的直播平台虎牙.斗鱼.快手.抖音.B站,直播功能看似普遍,但从零到一开发却不简单.直播中运用到的技术难点非常之多,音频视频处理/编解码,前后处理,直播分发,即时通讯等技术,学好 ...

  8. tensorflow读书笔记

    TensorFlow 是一个用于研究和生产的开放源代码机器学习库.TensorFlow 提供了各种 API,可供初学者和专家在桌面.移动.网络和云端环境下进行开发. TensorFlow是采用数据流图 ...

  9. 脊柱关节病外周关节滑膜高表达的RANK/RANKL/OPG系统与炎症呈部分分离

    脊柱关节病外周关节滑膜高表达的RANK/RANKL/OPG系统与炎症呈部分分离Vandooren B, et al. Arthritis Rheum. 2008;58:718-729目的:脊 柱关节病 ...

  10. 【ACR2015】依那西普按需维持治疗策略有效抑制RA骨破坏进展

    标签: 类风湿关节炎; 依那西普; 药物减停; 复发重治 对RA疾病复发患者, 依那西普按需治疗与持续足剂量治疗是否存在疗效差异? Inui K, et al. ACR 2015. Presentat ...