Можно ли сравнить два изображения, чтобы убедиться, что точное изображение доступно с помощью TestCafé?

Question

В нашем проекте мало иконок. Можем ли мы проверить эти изображения / значки с помощью TestCafe.

Пример кода:

 <a href="www.fb.com/" class="fa fa-facebook-square"> </a>

Ожидаемый результат:

• изображение 1 -> Локально сохранено
• image 2 -> Доступно на сайте.

И мне нужно вызвать местное изображение и сравнить его с изображением сайта.

Answer 1

Я могу предложить два способа сравнения изображений на веб-сайте.

Один из способов - сделать снимок экрана элемента DOM с изображением и использовать стороннюю библиотеку для сравнения. это с местным изображением. Например, см. выглядит так же библиотека.

Другой способ - зарегистрировать запрос на изображение с помощью RequestLogger и сравнить тело ответа с локальным файлом, используя метод Buffer.compare () . См. Пример ниже, иллюстрирующий этот подход:

import fs from 'fs';
import { RequestLogger } from 'testcafe';

const logger = RequestLogger('https://devexpress.github.io/testcafe/images/landing-page/banner-image.png', {
    logResponseBody:    true
});

fixture `Compare images`
    .page`https://devexpress.github.io/testcafe/`;

test
    .requestHooks(logger)
    ('Test', async t => {
        await t.expect(logger.count(record => record.response.statusCode === 200)).eql(1);

        const actualImageBuffer   = logger.requests[0].response.body;
        const expectedImageBuffer = fs.readFileSync('c:\\Tests\\images\\banner-image.png');

        await t.expect(Buffer.compare(actualImageBuff, expectedImageBuff)).eql(0);
    });