Как игнорировать область или элемент внутри тега body при использовании jest-image-snapshot для сравнения снимков изображения?

Question

Я прошелся по нескольким вопросам в репозиториях "jest-image-shot" и "кукловод". Тем не менее, я не смог найти правильного решения для этого. По сути, я хочу позволить шутку toMatchImageSnapshot с игнорированием определенных элементов или областей в пределах исполняемой страницы экземпляра Chrome кукловода.

Любой указатель или существующее решение для этого в самом jest-image-shot или удаление элемента во время выполнения кукловода - единственный способ обойти это?

Answer 1

Нет, то, что вы хотите, не так просто возможно. Библиотека jest-image-snapshot использует библиотеку pixelmatch для сравнения двух изображений. Это означает, что он фактически сравнивает пиксели изображения, не выполняя никакой логики для самого документа.

У вас есть три варианта:

1. использование failureThreshold определить, сколько может отличаться
2. Удалите элемент со страницы, прежде чем снимать скриншот (как вы уже предлагали)
3. Удалить / черный элемент в изображении

Вариант 1: использование failureThreshold

В библиотеке есть опция под названием failureThreshold встроенный, который позволяет определить порог при сравнении изображений. Этот порог относится ко всему изображению и не относится к элементам или частям изображения. В зависимости от вашего варианта использования может быть полезно, если часть страницы, которую вы хотите игнорировать, мала, а другие незначительные изменения могут быть допустимы.

Пример кода

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, чтобы напрямую манипулировать изображением и закрашивать эту часть изображения черным (или пиксельным) изображением, прежде чем сравнивать их.