Использование скриншотов для тестирования

    Написано по просьбам из соседнего топика — Как мы тестируем поиск в Яндексе. Screenshot-based тестирование блоков результатов



    История про глубокий рефакторинг.

    В нашем приложении был один модуль, реализованный на заре бизнеса. Модуль был реализован используя отличные от других модулей патерны, во всю эксплуатировал глобальные переменные, состоял из более чем сотни javascript файлов, которые были тесно связаны друг с другом. Малоизвестный фреймворк, на базе которого был сделан модуль, больше не использовался нигде. В результате, исправление ошибок или добавление новой функциональности занимало у команды в 2-3 раза больше времени, по сравнению с другими модулями. В связи с грядущими изменениями функциональности назрела острая необходимость отрефакторить этот немаленький модуль.

    Юнит тестирование в данном случае не подходило, т.к. модуль менялся чуть меньше чем полностью. Чтобы автоматизировать функциональное тестирование модуля был выбран phantomjs
    Важное значение в работе приложения имеет визуальная составляющая — подсветка всяческих элементов, правильное расположение на странице, корректное отображение данных. Чтобы отслеживать визуальные изменения было решено во время тестов делать скриншоты. Благо phantomjs позволяет это легко делать:

    page.render('test0001-after-login.png');
    

    Было написано достаточное количество тестов, охватывающих функциональность в известном нам объеме. Как выяснилось позже, знали мы недостаточно глубоко :) Эти тесты генерировали несколько сотен скриншотов. Очевидно, что сравнивать картинки между собой — занятие совершенно неблагодарное. Нужно делать это автоматически. В одном из предыдущих проектов я реализовал на Питоне некоторое количество скриптов манипулирующими картинками (резать, клеить, находить регионы, накладывать картинки друг на друга и пр) и был готов зарядить его и для этой задачи.
    Обошлось всё без изобретения велосипедов. Был задействован мощный кроссплатформенный пакет утилит — ImageMagick
    compare может сравнить два скриншота, подсветить разницу и вывести информацию на экран.
    Пример вызова:
    compare.exe -metric AE shots/test-002_opentree.png reference/test-002_opentree.png diff-002.png 2>&1
    

    Берем свежий скриншот, сравниваем с референсным, выводим текстовую информацию на экран, а графическую сохраняем в файл для ручного просмотра подробностей.

    Трудно заметить разницу между этими двумя скриншотами:



    Но когда разница подсвечена, то всё достаточно очевидно — у одного блока сплошная граница, а не точечная:


    Первые две картинки сделаны тестом phatomjs, а последняя — результат работы compare. Часть информации заблюрена, т.к. у меня нет официального разрешения на публикацию интерфейса нашей программы, хотя бы и устаревшего.

    Окончательный мазок пера — скрипт на poweshell, который сравнивает папку со свежими скриншотами и папку с референсными картинками, а после сравнения убивает те, что не представляют интереса. Скрипт легко может быть переделан на более платформо независмый язык.
    Не забудьте заглянуть в скрипт перед запуском его из командной строки. Винды по умолчанию не разрешают запуск неподписанных скриптов. Что с этим делать написано в шапке.
    Скрипт лежит тут — detectChanges.ps1

    ЗЫ. приношу извинения за дезинформацию насчет использования Питона для решения этой задачи.

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 6 007 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 4

      0
      я использовал чуть более сложно сравнение
      habrahabr.ru/post/140971/
        +1
        Можно было и тем же python одним обойтись, вместо javascript+poweshell. Взять, например, spynner.
          0
          Платформа не виндовс френдли. Тут тебе и зависимость от иксов и Qt. Питон к тому же не является в нашей команде языком разработки. Основной язык для разработки фронтенда веб приложения — javascript. Так что написание собственных расширений и тестов на нем предпочтительней.
            0
            В таком случае да, не лучший выбор.

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое