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

Question

我刚开始使用 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 一起使用）并且运行通过第一个场景就好了。获取屏幕截图并将其保存为基本图像。然后我必须关闭浏览器才能进入运行下一个场景。在第二个场景有运行后，它未通过测试但仍会创建屏幕截图。屏幕截图应该有所不同，但 diff 屏幕截图没有任何概述的更改。

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

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

Answer 1

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

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

How do I compare the visual differences of an element on a page using CodeceptJS?

automated-tests

codeceptjs