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

最新推荐文章于 2023-06-06 19:15:14 发布

lunarych

最新推荐文章于 2023-06-06 19:15:14 发布

阅读量585

点赞数

文章标签：前端 selenium 测试工具

原文链接：https://nightwatchjs.org/guide/getting-started/introduction.html

版权

nightwatch 使用

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

一、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();
    }
}

总结

有关配置后面再翻译

lunarych

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
前端e2e测试使用nightwatch简单示例

nightwatch 使用花了挺久弄明白selenium和nightwatch、踩了挺多坑的，在网上找的使用资料做起来总是出错，于是去看了下官网的资料。selenium有中文文档，但我也没看明白，因此感觉没什么参考价值，于是看了nightwatch的官网介绍，都是英文的，但是确实有用，于是决定翻译一下。。。供以后参考文章目录nightwatch 使用一、Nightwatch是什么？二、安装Nightwatch1. 安装Node.js2. 安装Nightwatch3. 安装浏览器驱动4. 安装Seleni
复制链接

扫一扫