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. webpack配置less以及js中引入的图片问题

    1.问题重现 当我做了这个配置以后,发现less里的图片可以正常展现到页面,但是js里的图片以及其他文件都不能正常展现,都报404 原始配置如下: // 如果有額外的.babelrc配置的話就可以使用 ...

  2. (原创)【B4A】一步一步入门02:可视化界面设计器、控件的使用

    一.前言 上篇 (原创)[B4A]一步一步入门01:简介.开发环境搭建.HelloWorld 中我们创建了默认的项目,现在我们来看一下B4A项目的构成,以及如何所见即所得的设计界面,并添加和使用自带的 ...

  3. python学习第五周总结

    面向对象前戏之人狗大战 # 编写代码简单的实现人打狗 狗咬人的小游戏(剧情需要) """推导步骤1:代码定义出人和狗""" person1 ...

  4. JavaScript: symbol 和 string key 取值用法

    '' 做 key 可以被 . 或者 [] 运算符取出 [""] 做 key 同样可以被 . 或者 [] 运算符取出 symbol 做 key 只能被 . 取出 [symbol] 做 ...

  5. Spring boot 3.0 日志

    spring boot 3.0 已经自己集成了日志功能  logback SpringBoot 启动时自动加载配置文件,配置文件的默认名称为: logback.xml 或 logback-test.x ...

  6. SQLSERVER 临时表和表变量到底有什么区别?

    一:背景 1. 讲故事 今天和大家聊一套面试中经常被问到的高频题,对,就是 临时表 和 表变量 这俩玩意,如果有朋友在面试中回答的不好,可以尝试看下这篇能不能帮你成功迈过. 二:到底有什么区别 1. ...

  7. ClickHouse exception, code: 62, host: hadoop102, port: 8123; Code: 62, e.displayText() = DB::Exception: Syntax error: failed at position 183 (end of query):

    报错 ClickHouse exception, code: 62, host: hadoop102, port: 8123; Code: 62, e.displayText() = DB::Exce ...

  8. Cesium计算范围(十三)

    function bounds(positions = [], expand = 0) { let minLng = 180 let minLat = 90 let maxLng = -180 let ...

  9. 【译】.NET 7 中的性能改进(四)

    原文 | Stephen Toub 翻译 | 郑子铭 边界检查消除 (Bounds Check Elimination) 让.NET吸引人的地方之一是它的安全性.运行时保护对数组.字符串和跨度的访问, ...

  10. OpenLayers地图标注及弹窗实现

    1. 引言 地图标注是在地图中进行文字或图标的标注,从而显示对应的信息 本文基于OpenLayers实现地图上图文的标注与弹窗显示 OpenLayers官网:OpenLayers - Welcome ...