如何使用 CodeceptJS 比较页面上元素的视觉差异？答案

【问题标题】：How do I compare the visual differences of an element on a page using CodeceptJS?如何使用 CodeceptJS 比较页面上元素的视觉差异？
【发布时间】：2019-09-28 11:15:07
【问题描述】：

我刚开始使用 CodeceptJS，但无法让 seeVisualDiffForElement 命令正常工作。

这是我目前的测试代码：

Feature('MyTest');

Scenario('Creating base images and comparing using the same command but ran twice',  (I) => {

    I.amOnPage('https://testsite-90d35.firebaseapp.com/');

    I.wait(1);

    I.saveScreenshot("Test1.png");

    I.wait(1);

    I.seeVisualDiff("Test1.png", {tolerance: 0, prepareBaseImage: true});
});

Scenario ('Comparing the blue button on the page', async (I) => {

    I.amOnPage('https://testsite-90d35.firebaseapp.com/testPage.html');

    I.wait(1);

    I.saveScreenshot("Test1.png");

    I.wait(1);

    I.seeVisualDiffForElement(".btnBlue","Test1.png", {tolerance: 0, prepareBaseImage: false});
});

当我运行此代码时，它会打开 Chromium 浏览器（因为我将它与 Puppeteer 一起使用）并很好地运行第一个场景。截取屏幕截图并将其保存为基础图像。然后我必须关闭浏览器才能运行下一个场景。在第二个场景运行后，它未通过测试，但仍会创建屏幕截图。屏幕截图应该有所不同，但差异屏幕截图没有任何概述的更改。

在 CodeceptJS 的文档中，它声明“seeVisualDiffForElement 仅在浏览器中打开 baseImage 页面时才有效，以便 webdriver 可以获取所提供选择器的坐标”。我的浏览器已打开，但与创建基本图像的浏览器不同（因为我必须关闭它才能运行第二个场景）。这可能是测试失败并且无法识别任何更改的原因吗？或者任何人都可以看到我做错了什么？

我也尝试将测试作为单个场景运行，但它给了我相同的输出。

【问题讨论】：

标签： automated-tests codeceptjs

【解决方案1】：

我被告知元素测试仅适用于 WebDriver，但我使用的是 Puppeteer，因此出现错误。

【讨论】：