Тесты Selenium обычно имеют очень большую область, например, убедитесь, что браузер, перемещающийся по вашему приложению, не останавливается где-то на различных веб-страницах из-за возможных ошибок в коде JavaScript или в результате интеграции между различными частями.
Одной из суперспособностей Selenium 2 является возможность повторять эту проверку практически на любом браузере с установлением общего протокола, который реализуют Firefox, Chromium и другие драйверы. Одной из общих операций, помимо нажатия и ввода текста, является создание снимков экрана с текущим состоянием страницы.
API Selenium 2 предоставляет метод session /: id / screenshot, который возвращает PNG BLOB. Этот метод обычно предоставляется драйверами как есть, как в моем собственном методе PHPUnit_Extensions_Selenium2TestCase :: currentScreenshot (). Эти снимки экрана содержат основной фрейм браузера без заголовка или строки меню, не говоря уже о границах.
Этот метод можно использовать для проведения регрессионных тестов над графическим отображением страницы, сравнивая текущий снимок экрана с предыдущим и провалив тест, если есть значительные различия.
Предостережения: поддержка
Функциональность скриншота определяется JSON Wire Protocol, контрактом Selenium с драйверами браузера. Однако наличие одного URL-адреса и протокола не является гарантией поддержки — функция скриншотов не была реализована в драйвере Safari в прошлый раз, когда я проверял. Более того, для настройки некоторых драйверов может потребоваться время и машины, в то время как вы можете распределить ответственность за внешний сервис, такой как SauceLabs, при условии, что промежуточная среда находится на общедоступном IP-адресе.
Предостережения: размеры
Снимок экрана создается с размерами содержимого окна браузера, расширяя каждую полосу прокрутки. Это позволяет проверить даже то, что не помещается внутри окна, но вы должны обратить внимание на макет.
Selenium позволяет вам установить текущий размер окна в его / window API. Это выставлено PHPUnit_Selenium как:
$this->currentWindow()->size(array( 'width' => 800, 'height' => 600, ));
но доступно и в других драйверах.
Предостережения: поколение
Точно такой же тест должен быть выполнен во время генерации эталонных изображений, чтобы привести приложение в одно и то же состояние во время генерации и автоматической проверки.
Я управляю этим с помощью переменной среды STORE_SCREENSHOTS, которая может быть установлена в 0 или 1:
STORE_SCREENSHOTS=1 phpunit ... STORE_SCREENSHOTS=0 phpunit ...
Предостережения: сравнение
Байт-байтное или попиксельное сравнение или эталонные и фактические изображения обычно недостаточно надежны для автоматизированных тестов. Например, некоторые драйверы, такие как Android, отображают цвета немного по-разному в зависимости от внешних условий (чего я не знаю). Различия в изображениях, генерируемые после этих сбоев, показывают несколько пикселей, которые не соответствуют ожидаемому цвету (например, # 00669c вместо # 006699). Это может происходить из-за сглаживания или других «оптимизаций» движка браузера.
Таким образом, следует сделать более абстрактное сравнение, если вы не хотите, чтобы ваши тесты давали вам ложные срабатывания каждый день.
Внутри PHP-кода с помощью вызовов exec () вы можете использовать некоторые утилиты командной строки. Прежде всего, преобразование в PNM (растровый формат) с помощью imagemagick:
file_put_contents('result.png', $this->currentScreenshot());
exec('convert result.png result.pnm');
Затем сравнение средней средней ошибки:
exec('imgcmp -f reference.pnm -F result.pnm -m mae | paste -sd+ | bc', $comparison);
$ сравнение [0] теперь содержит число с плавающей запятой (в форме строки), которое изменяется от 0,0001 в случае ложных срабатываний до 0,02 или 0,2 в случае разных изображений. В Ubuntu imgcmp содержится в пакете libjasper-runtime .
Я рекомендую пользователям ссылочные изображения для каждого браузера: иметь идеальную по пикселям компоновку, равную для каждого браузера и версии, вероятно, не стоит вашего времени.
Вы должны выяснить пороговое значение для объявления теста неудачным в зависимости от вашего приложения. Я видел 0,000016 и 0,244 как два примера для классификации, и поэтому я установил его на 0,001.
Предостережение: несколько дублей
Обычно в этом нет необходимости, но если вашему приложению не хватает устойчивого состояния и все движется, или вы не уверены, что анимация еще не завершена, вы можете прибегнуть к нескольким дублям, чтобы сохранить лучшие снимки экрана.
Для эталонных изображений процесс работает с кворумом: сделайте 5 снимков экрана с интервалом в 1 секунду, выберите один, который повторяется как минимум 3 раза.
Для реальных изображений не сравнивайте со ссылкой только первый скриншот; возьмите максимум 5 на расстоянии 1 секунды и сравнивайте каждый с эталоном, пока он не станет хорошим. Если скриншот объявлен хорошим, вы можете сделать ранний выход; если вы приехали с 6 снимками, объявите об ошибке.
Вывод
Тесты Selenium улавливают любую проблему, которая затрудняет доступ реальных пользователей к вашему приложению, уделяя особое внимание проблемам рендеринга и кросс-браузерным проблемам. При создании скриншотов с ними учтите этот совет, чтобы избежать ложных срабатываний и всегда красных тестовых комплектов.