2

我在 jest-image-shot 和 puppeteer repos 中浏览了几个问题。然而，我还没有找到合适的解决方案。基本上，我想要做的是，允许 jesttoMatchImageSnapshot在 puppeteer chrome 实例的执行页面中忽略某些元素或区域来运行它。

jest-image-shot 本身中的任何指针或现有解决方案，或者在执行 puppeteer 期间删除元素是解决它的唯一方法？

4

1 回答 1

4

不，你想要的不是那样容易实现的。库jest-image-snapshot使用库pixelmatch来比较两个图像。这意味着它实际上比较了图像的像素，而不对文档本身执行任何逻辑。

你有三个选择：

  1. 用于failureThreshold定义可以相差多少
  2. 在截屏之前从页面中删除元素（正如您已经建议的那样）
  3. 删除/黑色图像中的元素

选项 1：使用failureThreshold

该库有一个名为failureThresholdbuilt-in 的选项，它允许在比较图像时定义一个阈值。此阈值适用于整个图像，而不是特定于图像的元素或部分。根据您的用例，如果您要忽略的页面部分很小并且其他微小的更改可能是可以容忍的，这可能会很有用。

代码示例

it('...', async () => {
    // ...
    expect(image).toMatchImageSnapshot({
        failureThreshold: '0.01',
        failureThresholdType: 'percent'
    });
});

选项 2：从页面中删除元素

这将是最简单的方法。删除要忽略的元素。如果剩余页面没有因此而完全改变，这可能是最简单和最好的方法。

代码示例

it('...', async () => {
    const page = await browser.newPage();
    await page.goto('...');
    await page.execute(() => {
        // remove element from the DOM
        const el = document.querySelector('#element-selector');
        el.parentElement.removeChild(el);
    });
    const image = await page.screenshot();

    expect(image).toMatchImageSnapshot();
});

选项 3：删除/黑色图像中的元素

如果选项 2 由于某种原因不可行，您也可以操纵图像本身。首先，检查页面内元素的位置及其高度和重量，然后将该位置的图像部分变黑。

要获取元素的位置和大小，可以使用以下代码：

const [top, left, weight, height] = await page.execute(() => {
    const el = document.querySelector('#element-selector');
    const rect = element.getBoundingClientRect();
    return [rect.top, rect.left, rect.width, rect.height];
});

之后，您可以使用lwip或jimp 之类的库来直接操作图像并将图像的该部分涂黑（或像素化），然后再进行比较。

于 2019-05-13T20:33:55.787 回答