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. 图文并茂学习记录--从零开始进行微信小程序开发+引入Vant Weapp组件

    新建项目 创建页面 让人崩溃的东西来了 经过研究,发现这个图标不可以放在二级,只能一级 项目初始化 引入VANT组件库 文档地址:https://youzan.github.io/vant-weapp ...

  2. 模板层语法、模板层之标签、模板的继承与导入、模型层之ORM常见关键字

    模板层语法.模板层之标签.模板的继承与导入.模型层之ORM常见关键字 一.模板层语法 1.模板语法的传值 urls代码: path('modal/', views.modal) views代码: de ...

  3. java 进阶P-3.3+P-3.4

    Array list的操作 ArrayList 类是一个可以动态修改的数组,与普通数组的区别就是它是没有固定大小的限制,我们可以添加或删除元素.ArrayList 继承了 AbstractList , ...

  4. touchke变化值小的解决办法

    方法一,提高主频 方法二,减小充电时间. 方法三,充电电流减半(具体看RM手册touchkey章节) 建议测试时采样值维持在3000-4000 其实以上操作就是增大Y轴间隔,以增大按下和未按下时的采样 ...

  5. 一个通用的 java 项目的模板

    #!groovy def oper_checkout(SCM_TYPE,SCM_URL,SCM_AUTH_PASS,SCM_BRANCH=' ',SCM_AUTH_USER=' '){ if (SCM ...

  6. Android IO 框架 Okio 的实现原理,如何检测超时?

    本文已收录到  AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 在上一篇文章里,我们聊到了 Square 开源的 I/O 框架 Okio 的三个 ...

  7. [​DuckDB] 多核算子并行的源码解析

    DuckDB 是近年来颇受关注的OLAP数据库,号称是OLAP领域的SQLite,以精巧简单,性能优异而著称.笔者前段时间在调研Doris的Pipeline的算子并行方案,而DuckDB基于论文< ...

  8. springboot 多数据源 实例(sybase、mysql数据库)(上)

    最近项目 需要用到 sybase(sql anywhere).mysql 数据库 两边数据交互 .由于之前对sybase 数据库一点不懂 踩了许多坑 特意记下: 连接 sybase 客户端需要用到 S ...

  9. IOS + H5 开发,如何实现,H5页面显示在IOS上

    环境:IOS12.0 工具:Xcode 12.0 工程:IOS12.0工程 + H512.0工程 1,先把开发的H5画面,编译打包:assets静态资源文件 favicon.ico图标 index.h ...

  10. Android实现仿微信实时语音对讲功能|与女友游戏开黑

    与亲朋好友一起玩在线游戏,如果游戏中有实时语音对讲能力就可以拉进玩家之间的距离,添加更多乐趣.我们以经典的中国象棋为例,开发在线语音对讲象棋.本文主要涉及如下几个点: 在线游戏的规则,本文以中国象棋为 ...