Gepiu的博客

有点想法很好,有点行动更好

树欲动...


Web系统自动测试

基于Nodejs的前端自动化测试

  • 目的 - 测试自动、可靠
  • 工具 - Selenium 与 Nightwatch
  • 环境 - Java 与 Node.JS
  • 用例 - 编写Case
  • 测试 - 执行测试

目的

释放双手...
缓解压力...
让浏览器在那儿自嗨...
我们盯着屏幕喝点水看测试是不是全通过就好...

以上都是开玩笑...

所有做过测试的人都知道,人工测试由于单调、枯燥等原因
有几个很难忽略的问题:

  • 测试是否完全按照用例进行
  • 测试case是否全部彻底完成
  • 测试结果是否正确记录
  • 当功能修改后又要从头再来
  • 等等...

实际上自动测试的出现就是为了解决这些问题

自动测试的目标是能够自动、完整、准确、可靠、能复用的进行测试工作,排除人这个最不确定的因素,让测试变得更加可靠

工具

有没有什么方案能够做到:

  • 我能一遍喝着茶一边看着它跑;
  • API 功能足够,且扩展性强;
  • 能够和现有项目结合,引入项目配置与外部模块;
  • 调试方便,比如能使用 Webstorm 或 VS Code 的控制台;
  • 能够调取 IE、Firefox、Chrome 这种外部浏览器;
  • 使用 BDD 与 TDD 编写测试案例;

为了满足以上需求,我们将使用 Selenium 与 Nightwatch 搭建我们的测试脚手架。
前者是一款 Web 的自动化测试环境,它将帮我们搭建好测试环境,调取系统安装的浏览器,在浏览器里执行一切自动化行为;
后者是一款 Test Runner,可以简单理解为前者的控制软件,它将提供一系列接口供我们编写测试案例,同时也是与现有前端项目结合的桥梁。

我们将使用 selenium-standalone 安装和管理 Selenium 而不是手工设置原版程序。selenium-standalone 是一款基于 Node.JS 的 Selenium 管理工具包,对于前端而言更加友好。

环境

  • 首先要安装 Java 7 或更高
  • Node.JS , 而且要确保 npm 命令可用

开始搭建!

1. 创建项目

我们来找个地方新建一个目录,起名为 my-test-toolkit,然后在目录内使用终端运行 npm init -y 生成项目配置文件 package.json

2. 安装工具

然后我们将安装 Selenium 与 Nightwatch。

  • 安装 selenium-standalone: npm install selenium-standalone --save-dev

  • 安装 Nightwatch: npm install nightwatch --save-dev

3. 项目配置

先开始配置 Nightwatch,之前提到这是一款 Test Runner 来着,它负责读取我们的测试脚本,为我们提供 API 来操作浏览器,帮我们控制 Selenium。

一. 配置 Nightwatch

Selenium 是自动化测试环境,它提供了测试服务器、启动浏览器、网页自动操作等功能,同时暴露 API 给 Nightwatch 供我们使用。

二. 配置 Selenium

详细的配置方法请参照 LancerComet 的博文

配置与安装工作完成后,项目结构应该为:

nightwatch.json 的配置没有太多需要改动的,不过还是要注意一个配置项:

  • 请注意 desiredCapabilities 下的 browserName 项,这是测试时将使用的浏览器,您可以修改为 chromeinternet explorerphantomjs,本文在介绍时只安装了 Chrome 的 Driver,如果您需要使用其他浏览器,要安装相应的 Driver 才可以正常使用。

  • 默认浏览器为 Firefox,如果您使用 Firefox 的话,不需要额外进行 Driver 的配置。

  • 所以,如果您需要使用 Chrome 的话请将 browserName 修改为 chrome 喔!

Driver 的文档可参考这里

用例

在项目根目录新建一个名为 tests 的目录,然后这里就用来存放我们即将编写的测试用例文件。 那么这个文件夹能不能指向到其他地方去呢?当然可以,不过要修改 nightwatch.json 文件,src_folders就是目标文件夹(可以多个),现在的值为 [tests]

可以在目录中存放多个测试用例文件,且命名随意,Nightwatch 将读取目录中所有的 JS 文件,如果符合测试用例格式,将会自动执行。

看一个简单的Demo

module.exports = {  
  Find the answer.: function (client) {
    // 定义 Bing 页面中的节点.
    const searchInput = #sb_form_q
    const searchBtn = #sb_form_go
    const question = what is microsoft

    // 启动浏览器并打开 bing.com.
    client.url(http://bing.com).maximizeWindow()

    // 确保 body 和输入框可以使用.
    client.expect.element(body).to.be.present
    client.expect.element(searchInput).to.be.visible
    client.pause(2000)  // 稍等两秒.

    // 输入 what is microsoft 然后搜索.
    client.setValue(searchInput, question)
    client.click(searchBtn)
    client.pause(2000)

    // 截一张图然后保存到 reports/answer.png. 
    client.expect.element(body).to.be.present
    client.saveScreenshot(reports/answers.png)
    client.end()
  }
}

client 是代码运行时 Nightwatch 提供的对象,所有对浏览器进行的操作都将使用此对象调取,比如 client.click(CSS Selector)client.getCookie(function () {...})

module.exports 导出一个对象,对象的 Key 即为测试用例名称,您可以编写多个测试用例,Nightwatch 将依次执行。

client 的所有 API 详情见 这里

是不是看起来很像自然语言?这些语句就是测试结果的验证语句,就是我们希望得到的结果。比如 client.expect.element(body).to.be.present.before(3000),意思就是 希望 body 元素能在 3000 毫秒内初始化完毕。

Nightwatch 支持 BDD-Style 与 Assert 断言两种风格,文档可见 这里

测试

执行测试是最简单的了

回到项目根目录,执行 npm start,然后就可以看到浏览器自己测试了!

测试运行完毕之后,测试结果将打印在终端里,同时会生成到 reports 文件夹中。

可以在 nightwatch.json 中修改 output_folder 来更换报告生成目录。

后续

这样就结束了吗? 测试可以跑起来了,但是结果只有一个xml文件,不能直观的展示

所以,我们引入一个第三方的开源组件 nightwatch-html-reporter

让测试的结果直观可见