Написано по просьбе соседней темы - Как мы тестируем поиск в Яндекс.
Тестирование блоков результатов на основе снимков экрана 
История о глубоком рефакторинге.
В нашем приложении был один модуль, реализованный еще на заре бизнеса.
Модуль был реализован с использованием шаблонов, отличных от других модулей, полностью использовал глобальные переменные и состоял из более чем сотни файлов JavaScript, тесно связанных друг с другом.
Малоизвестный фреймворк, на котором основан модуль, больше нигде не использовался.
В результате исправление ошибок или добавление нового функционала заняло у команды в 2-3 раза больше времени по сравнению с другими модулями.
В связи с предстоящими изменениями функционала возникла острая необходимость рефакторинга этого достаточно большого модуля.
Юнит-тестирование в данном случае не подходило, потому что.
Модуль изменился чуть менее чем полностью.
Для автоматизации функционального тестирования модуля был выбран фантомы В работе приложения важна визуальная составляющая – подсветка всевозможных элементов, правильное расположение на странице, корректное отображение данных.
Чтобы отслеживать визуальные изменения, во время тестов было решено делать скриншоты.
Хороший фантомы позволяет это легко сделать :
Было написано достаточное количество тестов, покрывающих функционал в известном нам объеме.page.render('test0001-after-login.png');
Как выяснилось позже, мы недостаточно глубоко разбирались :) В ходе этих тестов было сгенерировано несколько сотен скриншотов.
Очевидно, что сравнивать картинки между собой – занятие совершенно неблагодарное.
Это необходимо сделать автоматически.
В одном из своих предыдущих проектов я реализовал на Python ряд скриптов, манипулирующих картинками (вырезание, склеивание, поиск областей, наложение картинок друг на друга и т. д.) и был готов использовать его и для этой задачи.
Все произошло без изобретения велосипедов.
Использован мощный кроссплатформенный пакет утилит — ИзображениеМагия сравнивать может сравнить два скриншота, выделить разницу и вывести информацию на экран.
Пример вызова: compare.exe -metric AE shots/test-002_opentree.png reference/test-002_opentree.png diff-002.png 2>&1
Делаем свежий скриншот, сравниваем его с эталонным, выводим на экран текстовую информацию, а графическую информацию сохраняем в файл для ручного просмотра деталей.
Трудно отличить эти два скриншота: 
А вот когда разница выделена, то все совершенно очевидно — у одного блока граница сплошная, а не пунктирная: 
Первые две фотографии сделаны с помощью теста.
phatomjs , а последнее - результат работы сравнивать .
Часть информации размыта, потому что.
У меня нет официального разрешения на публикацию интерфейса нашей программы, даже если он устарел.
Последний штрих пера — скрипт poweshell, который сравнивает папку со свежими скриншотами и папку с эталонными изображениями, а после сравнения убивает те, которые не представляют интереса.
Сценарий можно легко преобразовать в более независимый от платформы язык.
Не забудьте просмотреть скрипт перед его запуском из командной строки.
Windows по умолчанию не разрешает запуск неподписанных скриптов.
Что с этим делать написано в шапке.
Скрипт здесь - обнаружитьChanges.ps1 ПС.
прошу прощения за дезинформация об использовании Python для решения этой проблемы.
Теги: #тестирование приложений #разработка приложений #рефакторинг #разработка веб-сайтов #тестирование ИТ-систем
-
Важность Восстановления Данных На Диске
19 Oct, 24 -
Что Такое Ux/Ui-Дизайн На Самом Деле?
19 Oct, 24 -
5 Важных Жизненных Уроков От Кунг-Фу Панды
19 Oct, 24 -
Музыка Является Неотъемлемой Частью Меня
19 Oct, 24
