【测试】前端自动化测试的简单构想（windows）

2018-10-30 管理

自动化测试作为持续集成的重要环节，是必须的内容。有时候可能测试代码会超过业务代码的数量，但不能因为这样就对自动化测试望而却步。我内心有一个愿景，让自动化编写简单，运行高效，并且最重要的，实用性高。我觉得自动化测试按照测试内容可以分成逻辑结构测试，数据结构测试（接口测试），以及界面测试。最终希望能有一个基于配置的测试方式，不用写庞杂的代码并且简单可重用，而且有一些已经写好的业务逻辑测试代码。当然这种方式目前只是一个简单的构想，但是也要有切实可行的测试方式才行。前端框架多的不胜枚举，我单单用我熟悉且按照以上说的三个部分聊聊。

开发环境配置

# nodejs-8.2.1
# jdk 7以上
# python 2.7.15
# opencv 2.4.13.6
git clone https://gitee.com/zhoyq/examples.git
// 运行前确保依赖程序被安装到正确的位置
// bin/opencv/
// bin/MicrosoftWebDriver.exe
// bin/geckodriver.exe
// bin/chromedriver.exe
// bin/selenium-server-standalone-3.14.0.jar
// 配置env.bat之后运行
// 更多信息请查看README.md
cd examples/autoTest
npm install node-gyp
npm install
npm test // 或者运行 mocha test-mocha/test2.js

简单介绍

这个工程是基于mocha、nightwatch以及opencv和selenium编写的整合测试框架，算是对前端测试的一个尝试。工程以mocha为中心，整合了nightwatch、selenium和opencv的测试环节。当然也提供了以nightwatch为中心的测试方式，但是就完整性而言，mocha应该是优于nightwatch的。同时nightwatch也支持使用mocha的方式进行测试，配置文件里也已经整合了这部分配置。但本文还是以mocha的代码结构为主。

使用mocha进行逻辑结构测试

逻辑结构测试指的是以函数参数和返回值的正确性为导向的一种测试方式。需要枚举出可能的参数和参数下必然的结果，当然实例是不可能穷举完的。需要举出一些特征比较明显的数据进行测试，或者真实场景下使用的数据，需要按照经验进行测试。以下是测试的实例：

// 被测试函数
function sum(a, b){
  return a + b;
}
// 测试用例
describe('逻辑结构测试',function(){
  this.timeout(2000); // 默认值
  describe('测试函数sum',function(){
    it('当传入1，2的时候返回值应该是3',function(){
      let s = sum(1, 2);
      expect(s).to.be.equal(3);
    });
  });
});

使用mocha进行数据结构测试

数据结构测试主要是为了确保数据的完整性进行的测试。这种测试不像逻辑测试（有点像黑盒测试），具有明显的确定性（有就是有，没有就是没有）。

// 被测试链接
let url = "/login";
// 测试用例
let app = "http://127.0.0.1:8080";
describe('数据结构测试',function(){
  this.timeout(2000); // 默认值
  describe('测试post请求/login',function(){
    it('返回数据中必须有status',function(){
      request(app)
        .post('/login')
        .end(function(err, res) { 
          expect(res.body).to.have.any.keys('state');
        });
    });
  });
});

使用nightwatch、selenium和node-opencv进行界面测试

界面测试一种是测试界面的数据结构，一种是测试界面的显示结果。数据结构和之前的数据结构测试是一致的，具有明显的确定性。在开发网站的时候或者之前，都可以与网站开发并行进行，只要确定页面必须元素，以及命名即可。而显示结果的测试，一方面可以检查代码中的不兼容设计，这个算是代码质量检查的一部分内容，并不在本次内容中，就不多阐述。另一方面可以以显示结果为测试对象，检查运行后的结果（实际上就是检查图片一致性），只要得到的结果和设计给出的内容一致就可以了。这种测试案例，可以在设计结果出来之后就开始着手编写。以下便是实例：

// 被测试图片（设计提供或者开发自己在成品中截图）
let tempPath = './screenshots/b.png';
// 测试原图 正常情况下需要用nightwatch截图
let sourcePath = './screenshots/a.png';
// 测试用例
describe('界面测试', function() {
  describe('测试图片匹配程度', function() {
    it('在原图中找到图片内容并对比相似度应该在98%以上', function(done) { // 98%是一个经验数据
      cv.readImage(sourcePath, (err, sourceImg) => {
        if (err) return done(err);
        let result = sourceImg.matchTemplate(tempPath, 5);
        let newMat = sourceImg.crop(result[1], result[2], result[3], result[4]);
        cv.readImage(tempPath, (error, tempImg) => {
          if (error) return done(err);
          let per = cosine(getHistogram(newMat),getHistogram(tempImg));
          expect(per >= 0.98).to.be.ok;
          done();
        });
      });
    });
  });

  describe('界面元素测试', function() {
    it('必须有预定义的元素', function(done) {
      browser
        .maximizeWindow()
        .url('https://www.baidu.com')
        .waitForElementVisible('body', 1000)
        .setValue('#kw', '衷于栖')
        .click('#su')
        .pause(3000)
        .assert.containsText('#wrapper_wrapper', '衷于栖')
        .saveScreenshot('./screenshots/fileName.png')
        .end();

      client.start(done);
    });
  });
});

衷于栖