Визуальное отображение элемента на скриншоте в отчете Allure

allure

Уверен большинство из вас, как и я задавались вопросом “Как сделать так, чтобы визуально видеть то, с чем работает авто-тест, не прибегая к записи видео”.

Я хотел бы поделиться своим решением, которое облегчит проверку результатов авто-тестов, а также поможет сэкономить кучу времени на поисках нужных элементов из скриншота Allure.

На примере выше, можно увидеть работу авто-теста с кнопкой “Pause”.

Для решения данной задачи я использовал JS, а в качестве ЯП использовал Python (данный подход применим к Java и другим языкам).

Мой подход был в использовании execution_script, благодаря этому подходу я мог изменять CSS свойства элемента и делать скриншот на каждое состояние элемента, например: hover, click, active и т.д, и наблюдать это визуально в Allure отчете.

Проблемой стало то, что для поиска локаторов в основном используется XPATH, а как оказалось в JS нет метода getElementByXPATH и поэтому пришлось делать этот метод самому.
В примере ниже вы можете увидеть реализацию.

Разберемся по порядку:

  1. Создается класс, я назвал его Functions
  2. Был создал метод highlight_element_by_xpath, он принимает в качестве аргумента XPATH элемента.
  3. Через execution_script на JS, был создан метод для поиска элемента по XPATH и его CSS свойств.

Рассмотрим простой пример вызова метода в тесте:

Вы можете применить данный подход для всех типов локаторов, можете применять его например в Page Object и т.д.

РЕКОМЕНДУЕМ:
Лучшие клиенты Git GUI для Windows

Моей задачей было показать простой пример реализации, вы можете его улучшить для себя, как посчитаете нужным. Надеюсь данное решение поможет вам, буду рад отзывам, а также конструктивной критике.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий