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. 函数传参 Java JavaScript python 都是按值传递的

    实验代码如下: Java python JavaScript:

  2. 学习ASP.NET Core Blazor编程系列二十五——登录(4)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  3. ChatGPT留给知乎、小红书的时间不多了

    大家好啊,今天我打算给大家整点好活!挑战一下用ChatGPT打入各平台内部. 知乎挑战! 首先了解一下"知乎体" 知乎体是以专业知识为基础,以清晰的条理对问题进行阐述,并解决该问题 ...

  4. 线程基础知识17 Quene

    1 ConcurrentLinkedQueue 1.1 简介 它是一个基于链接节点的无界线程安全队列.此队列按照 FIFO(先进先出)原则对元素进行排序. 新的元素插入到队列的尾部,队列获取操作从队列 ...

  5. 【爬虫+数据清洗+可视化分析】舆情分析哔哩哔哩"狂飙"的评论

    目录 一.背景介绍 二.爬虫代码 2.1 展示爬取结果 2.2 爬虫代码讲解 三.可视化代码 3.1 读取数据 3.2 数据清洗 3.3 可视化 3.3.1 IP属地分析-柱形图 3.3.2 评论时间 ...

  6. 2.5.scrollView和swiper组件的使用

    # scroll-view 可滚动视图区域.用于区域滚动. 需注意在webview渲染的页面中,区域滚动的性能不及页面滚动. 属性说明 属性名 类型 默认值 说明 平台差异说明 scroll-x Bo ...

  7. 原生微信小程序的一些注意点

    1.微信小程序的数据更新 Page({ // 响应式的数据定义在data里面 data: { bannerList: [] }, // 微信小程序的数据更新是在setData里面做的 this.set ...

  8. 解决veture和eslint冲突的问题

    vscoder自带的veture和eslint存在冲突,主要表现在 末尾逗号,分号,单双引号的不一致.解决办法:1.npm install --save-dev prettier2.在根目录新建.pr ...

  9. 使用express设置静态目录,创建服务,响应get请求

    // 1.引入express const express = require('express');//在node应用中载入express // 2.创建应用对象 const app = expres ...

  10. Visual Studio Code C / C++ 语言环境配置的历程

    前言 从大一开始学习c++用的dev-c++,后来看到老师用的是vs  code,实在是馋它的颜值便去下了vs  2017.至于为什么下载vs 2017呢?是因为下载的时候我以为他们是一样的,便下了v ...