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

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

1 голос
/ 13 мая 2019

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

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

1 Ответ

1 голос
/ 13 мая 2019

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

...