Нечеткое скриншотное сравнение с Selenium

Я использую Selenium для автоматизации функционального тестирования веб-страницы. Для нас важно сделать сравнение по пикселям при развертывании нового кода, поэтому мы используем Selenium для скриншотов и сравнения строк с кодировкой base64, чтобы увидеть, что-то изменилось.

Мы находим, что на практике трудно получить полную согласованность пикселей, особенно с изображениями. Я хотел бы, чтобы незначительные размытости/рендеринга артефактов считались "проходом" вместо "сбой", поэтому мне интересно, есть ли способ сделать нечеткое сравнение, чтобы наши тесты были немного менее хрупкими.

Я думал о том, что я мог бы взглянуть на расстояние Левенштейна между строками base64 в качестве отправной точки, но я действительно не знаю, хороший ли подход или какие допуски должны отличаться от того, что "что-то перемещалось на странице", от "рендеринга артефакта". Любые идеи/подходы?

Ответ 1

Итак, я закончил работу с инструментом командной строки ImageMagick (потому что зачем повторно изобретать сравнение изображений). Показатель "Пиковая абсолютная ошибка" в инструменте "сравнить" говорит вам, сколько вам нужно, чтобы путать пиксели до того, как два изображения идентичны. Кажется, что это хорошо работает... для изображения с небольшими графическими искажениями может быть много пикселей, которые не совпадают, но для их соответствия достаточно небольшого размытия; но для двух изображений, которые на самом деле отличаются друг от друга, хотя большинство пикселей могут совпадать, те, которые не имеют особого отличия. Прямо сейчас я проверяю, чтобы PAE составлял менее 15%, чтобы увидеть, считаются ли изображения одинаковыми. Командная строка, которую я использую, это:

 compare -metric PAE  original.png new.png comparison.png

Документация по инструменту сравнения ImageMagick находится здесь: http://www.imagemagick.org/script/compare.php

Ответ 2

Я использовал perceptualdiff, который использует модель человеческой визуальной системы, чтобы избежать сообщения о незаметных изменениях (авторы, используемые для рендеринга регрессионное тестирование). Использование довольно просто:

perceptualdiff -output diff.ppm baseline.png test.png

(где diff.ppm - это изображение PPM, выделяющее области разницы)

В needle структура регрессионного тестирования поддерживает использование pdiff для сравнения скриншотов:

http://needle.readthedocs.org/en/latest/#engines

Ответ 3

Используйте формат изображения, который не создает артефакты (например, BMP или PNG), тогда вы можете выполнить сравнение по пикселям. Я думаю, вы можете проверить каждый пиксель с общим Euclidean Distance. Чтобы немного улучшить производительность, не вычисляйте квадратный корень, а проверяйте квадраты расстояний

// Maximum color distance allowed to define pixel consistency.
const float maxDistanceAllowed = 5.0;

// Square of the distance, used in calculations.
float maxD = maxDistanceAllowed * maxDistanceAllowed;

public bool isPixelConsistent(Color pixel1, Color pixel2)
{
    // Euclidean distance in 3-dimensions.
    float distanceSquared = (pixel1.R - pixel2.R)*(pixel1.R - pixel2.R) + (pixel1.G - pixel2.G)*(pixel1.G - pixel2.G) + (pixel1.B - pixel2.B)*(pixel1.B - pixel2.B);

    // If the actual distance is less than the max allowed, the pixel is
    // consistent and the method returns TRUE
    return distanceSquared <= maxD;
}

Не тестировал код С#, но он должен дать вам эту идею. Дайте несколько попыток и настройте maxDistanceAllowed в соответствии с вашими потребностями.

Ответ 4

Если кто-то ищет что-то похожее, есть Depicted- dpxdt. Он предназначен для использования как часть процесса CI/CD.

Он объединяет perceptual diff с сервером, инструментом командной строки, оболочкой для phantom js.

Он имеет функциональность, демонстрируемую как сканирование всего сайта и сравнение страниц для различий.