51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 7445|回复: 2
打印 上一主题 下一主题

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

[复制链接]
  • TA的每日心情
    郁闷
    2017-3-1 13:43
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]测试小兵

    跳转到指定楼层
    #
    发表于 2017-2-24 11:04:31 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
    10测试积点
    由于现在的页面太复杂,所以想试着在系统稳定的情况下,使用图片对比来做自动化测试。
    比如说;第一个版本,对登录页进行截图,测试完成后,把图片放到指定路径。
    下个版本执行的时候,对登录页进行截图,然后后历史文件进行对比
    目前遇到的问题是,对比图片的方法,加载图片的时候,截取的图片还没有保存下来
    我使用的对比插件用的是 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
                }
            })
        }

    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    2017-3-1 13:43
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]测试小兵

    2#
     楼主| 发表于 2017-3-10 14:41:49 | 只看该作者
    问题自己解决了:
    修改了监听的事件,把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);
                            });
                        }
                    };
                })
            });
        }

    评分

    参与人数 1测试积点 +10 收起 理由
    lsekfe + 10 自己分享!

    查看全部评分

    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    2017-3-1 13:43
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]测试小兵

    1#
     楼主| 发表于 2017-2-24 16:37:15 | 只看该作者
    加了个延时,问题暂时解决了 等待更好的办法

    //截图对比方法
        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');
        }
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-11-27 23:26 , Processed in 0.064281 second(s), 25 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表