nightwatch 使用

花了挺久弄明白selenium和nightwatch、踩了挺多坑的，在网上找的使用资料做起来总是出错，于是去看了下官网的资料。selenium有中文文档，但我也没看明白，因此感觉没什么参考价值，于是看了nightwatch的官网介绍，都是英文的，但是确实有用，于是决定翻译一下。。。供以后参考

文章目录

nightwatch 使用
一、Nightwatch是什么？
二、安装Nightwatch
- 1. 安装Node.js
- 2. 安装Nightwatch
- 3. 安装浏览器驱动
- 4. 安装Selenium Server
三、快速开始
- 1. 新建项目
- 2. 安装ChromeDriver和GeckoDriver
- 3. 运行样本测试
- 4. 编写其他测试
总结

一、Nightwatch是什么？

Nightwatch.js 是一个用于web应用和网站上执行自动化端到端（end-to-end）测试的集成框架，用于主流浏览器中，简化编写和执行多种类型地测试程序。包括：基于主流浏览器的端到端的测试、Node.js服务的单元测试、HTTP API的集成测试。

二、安装Nightwatch

1. 安装Node.js

node.js官网安装，还要安装npm工具。

2. 安装Nightwatch

npm install nightwatch --save-dev

3. 安装浏览器驱动

GeckoDriver

npm install geckodriver --save-dev

ChromeDriver

npm install chromedriver --save-dev

Microsoft Edge Driver
官网下载：https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/

SafariDriver

safaridriver --enable

4. 安装Selenium Server

selenium是一个Java应用程序，因此需安装JDK，最低版本为7。可以通过java -version从命令行运行来检查是否安装

使用npm安装：

npm install selenium-server --save-dev

三、快速开始

1. 新建项目

mkdir nightwatch-test-project
cd nightwatch-test-project
//创建package.json
npm init -y

2. 安装ChromeDriver和GeckoDriver

npm install geckodriver chromedriver --save-dev

macOS：在Safari运行测试，需要运行以下命令，以便通过本地计算机上的 WebDriver 启用自动化

safaridriver --enable

3. 运行样本测试

nightwatch有许多测试例子，使用以下命令在firefox下运行ecosia.js示例。此测试使用firefox打开Ecosia.org，在搜索框输入“nightwatch”，然后验证结果是否包含文本“Nightwatch.js”。此命令会自动生成nightwatch.conf.js配置文件。

npx nightwatch node_modules/nightwatch/examples/tests/ecosia.js

输出：


[Ecosia.org Demo] Test Suite
============================
ℹ Connected to localhost on port 4444 (2153ms).Using: firefox (94.0.1) on mac 20.6.0 platform.✔ Running Demo test ecosia.org:✔ Element <body> was visible after 24 milliseconds.
✔ Testing if the page title contains 'Ecosia' (10ms)
✔ Testing if element  is visible (51ms)
✔ Testing if element  is visible (12ms)
✔ Testing if element <.mainline-results> contains text 'Nightwatch.js' (197ms)OK. 5 assertions passed. (1.838s)

chrome中运行

npx nightwatch node_modules/nightwatch/examples/tests/ecosia.js --env chrome

safari中运行

npx nightwatch node_modules/nightwatch/examples/tests/ecosia.js --env safari

同时在chrome、Firefox、safari运行

npx nightwatch node_modules/nightwatch/examples/tests/ecosia.js --env firefox,chrome,safari

4. 编写其他测试

模仿ecosia.js文件，在nightwatch-test-project下新建文件baidu.js，使用 describe() 接口，代码如下：

describe('baidu Demo', function() {before(browser => browser.url('https://www.baidu.com/'));test('Demo test baidu.com', function (browser) {browser.waitForElementVisible('body').assert.titleContains('百度一下').assert.visible('#kw').setValue('#kw', 'nightwatch').assert.visible('#su').click('#su').pause(2000).saveScreenshot("reports/answers.png");});after(browser => browser.end());});

执行以下命令：

npx nightwatch baidu.js --env chrome

chrome浏览器打开百度首页，搜索框输入nightwatch，截图保存至根目录下“report/answer.png”

也可使用“导出”接口

module.exports = {"Demo test ecosia.org": function (browser) {browser.url("https://www.ecosia.org/").waitForElementVisible("body").assert.titleContains("Ecosia").assert.visible("input[type=search]").setValue("input[type=search]","nightwatch").assert.visible("button[type=submit]").click("button[type=submit]").assert.containsText(".mainline-results","Nightwatch.js").end();}
}

总结

有关配置后面再翻译

前端e2e测试使用nightwatch简单示例相关推荐

前端E2E测试略详解（以cypress为例）
上一篇文章很简略的介绍了E2E测试的一些框架,本文从相对更详细的层面进行整理 E2E测试 (by cypress): cypress安装 npm install cypress --save-dev ...
Cypress 前端 E2E 测试——手把手入门教程
目录初始化项目准备好 Docker 镜像安装依赖 ESLint 配置 IDE 集成配置手动配置 Gitlab 集成测试用例配置环境变量静态变量动态变量使用变量添加 Command ...
前端E2E测试-环境搭建-Vue+Cypress(1)
项目背景脚手架: Vue CLI 3.0 Vue 版本: 2.5.16 环境搭建安装cypress依赖 npm install cypress --save-dev // 安装包下载比较慢,并常出 ...
vue e2e 测试
1.vue e2e测试概述 e2e 测试端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期. 典型 e2e 测试框架对比名称断言是否跨浏览 ...
自动化测试（二）02——单元测试类工具-Karma、Jasmine、Mocha、Jest、AVA E2E测试类工具-cypress、nightmare、nightwatch、testcafe
自动化测试(二)02--单元测试类工具-Karma.Jasmine.Mocha.Jest.AVA & E2E测试类工具-cypress.nightmare.nightwatch.testcaf ...
Vue + nightwatch + Chrome76进行e2e测试的正确配置（一）
2019.08.19 修正文章中的错误除了单元测试之外,前端还有一个额外的测试:e2e测试,也就是端到端测试,用来模拟用户操作.对于Vue来说,推荐的e2e测试框架有nightwatch和cypre ...
Vue + nightwatch + Chrome76进行e2e测试的正确配置（二）
在这个问题困扰了我好几个小时,因为在Windows下确实没有问题.直到我看到了这条issue: Strangely, seeing this happen on RHEL (start_server= ...
使用Nightwatch进行E2E测试
本文在线预览 E2E测试不同于行为驱动测试(BDD)和单元测试独立运行并使用模拟/存根,端到端测试将试着尽可能从用户的视角,对真实系统的访问行为进行仿真.对Web应用来说,这意味着需要打开浏览器.加 ...
【前端】之websql实现增删改查，包含简单示例
websql增删改查简单示例新建数据库创建表修改表结构添加数据修改数据删除数据查询数据删除表完整案例简单示例新建数据库创建一个数据库,名为mydb,版本1.0,数据库介绍Te ...

前端e2e测试使用nightwatch简单示例