量角器：如何比较整页截图与量角器图像比较 [英] Protractor: how to compare full page screenshot with protractor-image-comparison

问题描述

我发现这个模块 https://www.npmjs.com/package来自wswebcreation-nl的/ protractor-image-comparison ，我认为这在我的案例中很有意思。但是我在Protractor上并不擅长，我在比较整页屏幕时遇到了问题。然而，比较元素图像是有效的，但仍会引发错误。

I've found this module https://www.npmjs.com/package/protractor-image-comparison from wswebcreation-nl, which I find interesting and useful in my case. However I'm not that good at Protractor yet, I have problem comparing full page screens. Comparing element images however works, but still throws an error.

Config.js

Config.js

    onPrepare: function() {
            // protractor-image-comparison module
            const protractorImageComparison = require('protractor-image-comparison');
            browser. protractorImageComparison = new protractorImageComparison(
                {
                    autoSaveBaseline: true,
                    baselineFolder: '../baseline/',
                    screenshotPath: '../actual_screenshots/',
                    debug: true,
                    disableCSSAnimation: true,
                    nativeWebScreenshot: true,
                    blockOutStatusBar: true,
                    ignoreColors: true
                }
            );
    ...
    }

Spec.js

// page objects
var landingPage = require('../landing_page/landing_page.js');

describe('User is on landing page', function() {
it('should see landing page screenshot compared successfully to the baseline', function() {
        // initialize page object
        var landing = new landingPage();

        browser.protractorImageComparison.saveElement(landing.registerButton, 'imageA');

        expect(browser.protractorImageComparison.checkElement(landing.registerButton, 'imageB')).toEqual('imageA');

    });
});

测试完成后，我在所有文件夹中都有元素的截图（基线，实际屏幕/实际和actual_screenshots / diff。

Once test is finished, I have screenshots of the element in all folders (baseline, actual_screenshots/actual and actual_screenshots/diff.

来自控制台的错误：

规格已启动。用户是在登陆页面上$ b $b√应该看到注册按钮

Spec started . User is on landing page √ should see register button

ignoreRectangles：[] ，ignoreTransparentPixel：false}

ignoreRectangles: [], ignoreTransparentPixel: false }

F×应该看到登陆页面截图成功比较到
基线
- 预期0等于'imageA'。

F × should see landing page screenshot compared successfully to the baseline - Expected 0 to equal 'imageA'.

推荐答案

我自己发现它没有以我期待的方式工作，因为我不明白预期应该如何工作。所以不应该 .toEqual（'imageA'）; 这应该是wri像 .toEqual（0）; 这意味着0％的差异。从像我这样的新手的文档中不太清楚的东西。否则，图像比较可以正常运行并且完美无瑕。

Found out by myself that it doesn't work in the way I was expecting, because I didn't understood how expect should work. So instead of .toEqual('imageA'); this should be written like .toEqual(0); which means 0 % difference. Something that isn't very clear from the docs for noobs like me. Otherwise image comparison works as intended and flawlessly.

这篇关于量角器：如何比较整页截图与量角器图像比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！