API

Nightwatch的API分为四个部分

1.Expect

在browser实例上以.expect.element开头的BDD(行为驱动测试)风格的接口,0.7及以上版本nightwatch可用。通过.element方法传入一个selector(参考querySelector或者jq的语法)获取到dom实例,通过.text、.value、.attribute等方法获取到实例属性。还有一些语意明确的修饰: 
- to 
- be 
- been 
- is 
- that 
- which 
- and 
- has 
- with 
- at 
- does 
- of 
再加上比较判断:

.equal(value)/.contain(value)/.match(regex)

.selected

.present

还有时间修饰.before(ms)(表示一段时间之内)、.after(ms)(表示一段时间之后)。就像造句一样:某某元素的某某属性(在某某时间)(不)等于什么值,这就是BDD风格的测试代码。例如:

this.demoTest = function (browser) {
browser.expect.element('body').to.have.attribute('data-attr');
browser.expect.element('body').to.not.have.attribute('data-attr');
browser.expect.element('body').to.not.have.attribute('data-attr', 'Testing if body does not have data-attr');
browser.expect.element('body').to.have.attribute('data-attr').before(100);
browser.expect.element('body').to.have.attribute('data-attr')
.equals('some attribute');
browser.expect.element('body').to.have.attribute('data-attr')
.not.equals('other attribute');
browser.expect.element('body').to.have.attribute('data-attr')
.which.contains('something');
browser.expect.element('body').to.have.attribute('data-attr')
.which.matches(/^something\ else/);
};

  

2.Assert

以.assert/.verify开头的两套相同的方法库,区别是assert如果断言失败则退出整个测试用例所有步,verify则打印后继续进行。

this.demoTest = function (browser) {
browser.verify.title("Nightwatch.js");
browser.assert.title("Nightwatch.js");
};

  

有如下判断方法:

.attributeContains(selector, attribute, expected[, message])
检查指定元素(selector)的指定属性(attribute)是否包含有期待的值(expected)打印出指定信息(可选填的message)其他方法讲解类似,不一一赘述 .attributeEquals(selector, attribute, expected[, message])
检查元素指定属性是否等于预期 .containText(selector, expectedText[, message])
包含有指定的文本 .cssClassPresent(selector, className[, message])
检查元素指定class是否存在 .cssClassNotPresent(selector, className[, message])
检查元素指定class是否不存在 .cssProperty(selector, cssProperty, expected[, message])
检查元素指定css属性的值是否等于预期 .elementPresent(selector[, message)
检查指定元素是否存在于DOM中 .elementNotPresent(selector[, message)
检查指定元素是否不存在于DOM中 .hidden(selector[, message)
检查指定元素是否不可见 .title(expected[, message])
检查页面标题是否等于预期 .urlContains(expectedText[, message])
检查当前URL是否包含预期的值 .urlEquals(expected[, message])
检查当前URL是否等于预期的值 .value(selector, expectedText[, message])
检查指定元素的value是否等于预期 .valueContains(selector, expectedText[, message])
检查指定元素的value是否包含预期的值 .visible(selector[, message)
检查指定元素是否可见

3.Commands

很多命令的读写,可以操作BOM、DOM对象:

.clearValue(selector[, message])
清空input、textarea的值 .click(selector[, callback])
callback为执行完命令后需要执行的回调 .closeWindow([callback]) .deleteCookie(cookieName[, callback]) .deleteCookies([callback]) .end([callback])
结束会话(关闭窗口) .getAttribute(selector, attribute, callback) .getCookie(cookieName, callback) .getCookies(callback) .getCssProperty(selector, cssProperty, callback) .getElementSize(selector, callback) .getLocation(selector, callback) .getLocationInView(selector, callback) .getLog(typeString, callback)
获取selenium的log,其中type为string或者function .getLogTypes(callback) .getTagName(selector, callback) .getText(selector, callback) .getTitle(callback) .getValue(selector, callback) .init([url])
url方法的别名,如果不传url则跳转到配置中的launch_url .injectScript(scriptUrl[, id, callback])
注入script .isLogAvailable(typeString, callback)
typeString为string或者function,用来测试log的type是否可用 .isVisible(selector, callback) .maximizeWindow([callback])
最大化当前窗口 .moveToElement(selector, xoffset, yoffset[, callback])
移动鼠标到相对于指定元素的指定位置 .pause(ms[, callback])
暂停指定的时间,如果没有时间,则无限暂停 .perform(callback)
一个简单的命令,允许在回调中访问api .resizeWindow(width, height[, callback])
调整窗口的尺寸 .saveScreenshot(fileName, callback) .setCookie(cookie[, callback]) .setValue(selector, inputValue[, callback]) .setWindowPosition(offsetX, offsetY[, callback]) .submitForm(selector[, callback]) .switchWindow(handleOrName[, callback]) .urlHash(hash) .useCss()
设置当前选择器模式为CSS .useXpath()
设置当前选择器模式为Xpath .waitForElementNotPresent(selector, time[, abortOnFailure, callback, message])
指定元素指定时间内是否不存在 .waitForElementNotVisible(selector, time[, abortOnFailure, callback, message])
指定元素指定时间内是否不可见 .waitForElementPresent(selector, time[, abortOnFailure, callback, message]) .waitForElementVisible(selector, time[, abortOnFailure, callback, message])

简单的例子:

this.demoTest = function (browser) {
browser.click("#main ul li a.first", function(response) {
this.assert.ok(browser === this, "Check if the context is right.");
this.assert.ok(typeof response == "object", "We got a response object.");
});
};

  

4.webdriver protocol

可以操作一些更底层的东西,比如: 
- Sessions 
- Navigation 
- Command Contexts 
- Elements 
- Element State 
- Element Interaction 
- Element Location 
- Document Handling 
- Cookies 
- User Actions 
- User Prompts 
- Screen Capture 
- Mobile Related

简单的例子:

module.exports = {
'demo Test' : function(browser) {
browser.element('css selector', 'body', function(res) {
console.log(res)
});
}
};

  

拓展

也可以单独使用chromedriver等进行单一平台测试,效率更高,测试更快。只需要npm安装chromedriver或者其他webdriver,不需要selenium,在selenium设置中把selenium进程设置为false,测试环境配置中做出相应的改变。在golobal_path设置的配置文件中,利用nightwatch测试的全局before和after钩子中开、关服务器就好:

var chromedriver = require('chromedriver');

function startChromeDriver() {
chromedriver.start();
} function stopChromeDriver() {
chromedriver.stop();
} module.exports = {
before : function(done) {
startChromeDriver.call(this);
done();
}, after : function(done) {
stopChromeDriver.call(this);
done();
}
};

  

nightwatch-helpers

nightwatch-helpers

Custom assertions and commands for easier Nightwatch tests.

Usage

npm install nightwatch-helpers --save-dev

In your Nightwatch config:

{
"custom_commands_path": ["node_modules/nightwatch-helpers/commands"],
"custom_assertions_path": ["node_modules/nightwatch-helpers/assertions"]
}

What's Included

Assertions

  • count(selector, count)

  • attributePresent(selector, attr)

  • evaluate(fn, [args], [message])

  • checked(selector, expected)

  • focused(selector, expected)

  • hasHTML(selector, html)

  • notVisible(selector)

Commands

  • dblClick(selector)

  • waitFor(duration)

  • trigger(selector, event, [keyCode])

  • enterValue(selector, value)

只需要在图中位置配置一下即可

其他

推荐使用Headless测试即不打开浏览器可视界面以便能跑在服务器上。比如Phantomjs可以模拟webkit内核浏览器的行为,在Nightwatch中配置一下Phantomjs环境即可,启动nightwatch时使用–env加上配置里的环境名激活对应的环境。如今(59版本以上)Phantomjs已经停止维护,使用Chrome自带的headless模式是更好的选择。也可以使用Puppeteer来做E2E测试,好处是只依赖一个Puppeteer,并且API相对简单

nightwatch API的更多相关文章

  1. karma + phantom + mocha + sion + chai + nightwatch + selenium2(webdriver) 测试框架学习

    第三方的教程传送门 https://segmentfault.com/a/1190000004558796 karma # github https://github.com/karma-runner ...

  2. Nightwatch——自动化测试(端对端e2e)

    背景: 前端页面模拟仿真操作,目的是避免每次更新相关内容重复之前的测试操作,减少不必要的时间投入,以及校验功能的可用性.但是目前元素定位是个问题(每次页面有修改都要重设某些元素定位) 测试分类: 一. ...

  3. Nightwatch.js – 轻松实现浏览器的自动测试

    Nightwatch.js 是一个易于使用的,基于 Node.js 平台的浏览器自动化测试解决方案.它使用强大的 Selenium WebDriver API 来在 DOM 元素上执行命令和断言. 语 ...

  4. NightWatch端到端测试

    NightWatch http://nightwatchjs.org/ Nightwatch.js Browser automated testing done easy. Write End-to- ...

  5. 脚手架vue-cli系列五:基于Nightwatch的端到端测试环境

    不同公司和组织之间的测试效率迥异.在这个富交互和响应式处理随处可见的时代,很多组织都使用敏捷的方式来开发应用,因此测试自动化也成为软件项目的必备部分.测试自动化意味着使用软件工具来反复运行项目中的测试 ...

  6. 使用Nightwatch.js做基于浏览器的web应用自动测试

    1        安装 1.1   安装Node.js 在http://nodejs.org/ 上下载适合本机系统的安装包运行安装,注意安装选项中选择npm tool以用于后续依赖包的安装. 1.2  ...

  7. Selenium + Nightwatch 自动化测试环境搭建

    首先要安装 Java 7 或更高 ,(http://www.oracle.com/technetwork/java/javase/downloads/index.html) 并且 java 命令可正常 ...

  8. nightwatch 基于Webdriver的端到端自动化测试框架

    nightwatch 是使用nodejs编写的,基于Webdriver api 的端到端自动化测试框架 包含以下特性 清晰的语法,基于js 以及css 还有xpath 的选择器 内置测试runner, ...

  9. nightwatch对前端做自动化测试

    记录node环境使用nightwatch.selenium-server.chromedriver对部署后的前端页面进行自动化测试的项目搭建过程. 1.目标 能对部署后的前端项目进行自动化测试,能自动 ...

随机推荐

  1. Python学习杂记_13_模块(一)_基础

    一.模块和模块调用 模块其实就是一个Python文件,模块的调用实际就是把这个Python文件从头到尾执行一遍. 如果是在相同路径下的调用: 1. 先导入整个模块,然后引用模块中的方法 import ...

  2. linux Centos7 安装Samba服务

    1. 使用Samba服务器需要防火墙开放以下端口 UDP 137 UDP 138 TCP 139 TCP 445 如果碰到 “Unable to save xxxxxxxx 拒绝访问” 的提示,还有最 ...

  3. 【QC】安装

    QC不支持win8 1. 开启win8自带的IIS服务. 在控制面板-程序-启用或关闭Windows功能-Internet Information Service

  4. bottle框架学习(1):命令行

    在最初的一段代码,内容如下: if __name__ == '__main__': from optparse import OptionParser _cmd_parser = OptionPars ...

  5. 函数名后加const

    通过把类成员函数声明为const   以表明它们不修改类对象. 任何不会修改数据成员的函数都应该声明为const类型.如果在编写const成员函数时,不慎修改了数据成员,或者调用了其它非const成员 ...

  6. 如何让springboot中的某些html文件不经过thymeleaf模板解析?

    这个thymeleaf有时有用,有时用不着. 但默认设置,所有的html都会经过它解析. 我的作法,是新建public,在resource里,所有css,js所放里面.(当然,static下也是OK的 ...

  7. chrome报错a parser-blocking, cross-origin script, is invoked via document.write.

    确切的说是警告,内容是: A Parser-blocking, cross-origin script, http://s4.cnzz.com/stat.php?id=xxx&show=pic ...

  8. Codeforces Round #262 (Div. 2) A. Vasya and Socks【暴力/模拟/袜子在可以在合法情况下增加后用几天】

    A. Vasya and Socks time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  9. 前端中 width 的获取

    这篇文章其实是在了解 viewport 的过程中发现这些概念容易混淆做了个小小的总结.viewport的首要关键是宽度的获取,宽度的计算有下面几个属性和方法: clientWidth offsetWi ...

  10. Static和Final修饰类属性变量及初始化

    1.static修饰一个属性字段,那么这个属性字段将成为类本身的资源,public修饰为共有的,可以在类的外部通过test.a来访问此属性;在类内部任何地方可以使用.如果被修饰为private私有,那 ...