51Testing软件测试论坛

标题: protractor 如何在获取页面截图后对比历史图片 [打印本页]

作者: hyj785 时间: 2017-2-24 11:04
标题: protractor 如何在获取页面截图后对比历史图片
由于现在的页面太复杂，所以想试着在系统稳定的情况下，使用图片对比来做自动化测试。
比如说；第一个版本，对登录页进行截图，测试完成后，把图片放到指定路径。
下个版本执行的时候，对登录页进行截图，然后后历史文件进行对比
目前遇到的问题是，对比图片的方法，加载图片的时候，截取的图片还没有保存下来
我使用的对比插件用的是 looksSame
https://github.com/gemini-testing/looks-same

use strict';
const step = function () {
//页面元素
const page = require(constants.local.login.page)
//保存文件的路径
const path = constants.Path.patha;
let cUrl = '/';
let res = 8;

this.go = () => {
      browser.manage().deleteAllCookies();
      browser.get(cUrl);
      base.writeScreenShotBVT(path, 'go1');
      base.waitUntilUrlChange(cUrl);
      expect(browser.getLocationAbsUrl()).toMatch("/login");
      base.see(page.loginButton);
      expect(browser.getTitle()).toMatch('DART');
   //这里运行的时候会报找不到图片
      base.compareImage('go1', res)
      browser.sleep(1000);
      console.log(res)
      browser.sleep(1000);
}

}

//截图
this.writeScreenShotBVT = function (test, id) {
      browser.takeScreenshot().then(function (png) {
         let stream = fs.createWriteStream(test + id + ".png");
         stream.write(new Buffer(png, 'base64'));
         stream.end();
      });
};

//图片对比
this.compareImage = function (p1,result) {
   return  looksSame(ph.patha + p1 + '.png', ph.pathb + p1 + '.png', function (error, equal) {
         let result = equal
         expect(equal).toEqual(true);
         return result
      });
};

/*---------------
等待元素出现
----------------*/
this.see = (e) => {
      browser.waitForAngular();
      browser.sleep(2000);
      return browser.wait(EC.visibilityOf(e), 10000).then((result) => {
         if (result === true) {
            return true
         }
         else {
            return result
         }
      })
}

作者: hyj785 时间: 2017-2-24 16:37
加了个延时，问题暂时解决了等待更好的办法

//截图对比方法
this.takecompare = function (id) {
      browser.takeScreenshot().then(function (png) {
         let stream = fs.createWriteStream(ph.patha + id + '.png');
         stream.write(new Buffer(png, 'base64'));
         stream.end();
         //加个延时
         browser.sleep(2000);
         stream.on('finish', function () {
            return looksSame(ph.patha + id + '.png', ph.pathb + id + '.png', function (error, equal) {
                  expect(equal).toEqual(true);
            });
         });
      })
};

//步骤
this.go = () => {
      browser.manage().deleteAllCookies();
      browser.get(cUrl);
      base.waitUntilUrlChange(cUrl);
      expect(browser.getLocationAbsUrl()).toMatch("/login");
      base.see(page.loginButton);
      expect(browser.getTitle()).toMatch('DART');
      base.takecompare( 'go1');
}

作者: hyj785 时间: 2017-3-10 14:41
问题自己解决了：
修改了监听的事件，把finish改成close，就好了。

下面是优化代码，加入了历史文件和写入文件的验证

this.takecompare = function (id) {
      browser.takeScreenshot().then((png) => {
         const newfile = ph.patha + id + '.png'
         const oldfile = ph.pathb + id + '.png'
         let stream = fs.createWriteStream(newfile);
         const stant = this;
         stream.write(new Buffer(png, 'base64'));
         stream.end();

         stream.on('close', () => {

            if (!fs.existsSync(oldfile)) {
                  console.log('old file no find')
            }
            else {
                  if (!fs.existsSync(newfile)) {
                     console.log('new file no find')
                  }
                  else {
                     looksSame(oldfile, newfile, function (error, equal) {
                        expect(equal).toEqual(true);
                     });
                  }
            };
         })
      });
}

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)