protractor 如何在获取页面截图后对比历史图片

hyj785

由于现在的页面太复杂，所以想试着在系统稳定的情况下，使用图片对比来做自动化测试。
比如说；第一个版本，对登录页进行截图，测试完成后，把图片放到指定路径。
下个版本执行的时候，对登录页进行截图，然后后历史文件进行对比
目前遇到的问题是，对比图片的方法，加载图片的时候，截取的图片还没有保存下来
我使用的对比插件用的是 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

加了个延时，问题暂时解决了 等待更好的办法

//截图对比方法
    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

问题自己解决了：
修改了监听的事件，把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);
                        });
                    }
                };
            })
        });
    }