Визуальное отображение элемента на скриншоте в отчете Allure
Invite pending
Приветствую,
Данную статью решил написать по просьбе коллег, а также из-за ее актуальности для автоматизации тестирования.
Я хотел бы поделиться своим решением, которое облегчит проверку результатов авто-тестов, а также поможет сэкономить кучу времени на поисках нужных элементов из скриншота Allure.
Уверен большинство из вас, как и я задавались вопросом “Как сделать так, чтобы визуально видеть то, с чем работает авто-тест, не прибегая к записи видео”.
На примере выше, можно увидеть работу авто-теста с кнопкой “Pause”.
Для решения данной задачи я использовал JS, а в качестве ЯП использовал Python (данный подход применим к Java и другим языкам).
Мой подход был в использовании execution_script, благодаря этому подходу я мог изменять CSS свойства элемента и делать скриншот на каждое состояние элемента, например: hover, click, active и т.д, и наблюдать это визуально в Allure отчете.
Проблемой стало то, что для поиска локаторов в основном используется XPATH, а как оказалось в JS нет метода getElementByXPATH и поэтому пришлось делать этот метод самому.
В примере ниже вы можете увидеть реализацию.
Разберемся по порядку:
Рассмотрим простой пример вызова метода в тесте:
Вы можете применить данный подход для всех типов локаторов, можете применять его например в Page Object и т.д.
Моей задачей было показать простой пример реализации, вы можете его улучшить для себя, как посчитаете нужным.
Надеюсь данное решение поможет вам, буду рад отзывам, а также конструктивной критике.
Данную статью решил написать по просьбе коллег, а также из-за ее актуальности для автоматизации тестирования.
Я хотел бы поделиться своим решением, которое облегчит проверку результатов авто-тестов, а также поможет сэкономить кучу времени на поисках нужных элементов из скриншота Allure.
Уверен большинство из вас, как и я задавались вопросом “Как сделать так, чтобы визуально видеть то, с чем работает авто-тест, не прибегая к записи видео”.
На примере выше, можно увидеть работу авто-теста с кнопкой “Pause”.
Для решения данной задачи я использовал JS, а в качестве ЯП использовал Python (данный подход применим к Java и другим языкам).
Мой подход был в использовании execution_script, благодаря этому подходу я мог изменять CSS свойства элемента и делать скриншот на каждое состояние элемента, например: hover, click, active и т.д, и наблюдать это визуально в Allure отчете.
Проблемой стало то, что для поиска локаторов в основном используется XPATH, а как оказалось в JS нет метода getElementByXPATH и поэтому пришлось делать этот метод самому.
В примере ниже вы можете увидеть реализацию.
class Functions():
def highlight_element_by_xpath(self,xpath):
self.driver.execute_script("function getElementByXpath(path) {return document.evaluate(path,document,null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;}console.log((getElementByXpath(\""+xpath+"\").style.border=\"3px solid #0cff00\"));")
Разберемся по порядку:
- Создается класс, я назвал его Functions
- Был создал метод highlight_element_by_xpath, он принимает в качестве аргумента XPATH элемента.
- Через execution_script на JS, был создан метод для поиска элемента по XPATH и его CSS свойств.
Рассмотрим простой пример вызова метода в тесте:
with allure.step("Click on pause button"):
self.functions.highlight_element_by_xpath(locators.pause_button)
self.history_page.click_on_pause_button()
self.functions.getScreenshot("pause_button") // может лежать в методе click_on_pause_button()
Вы можете применить данный подход для всех типов локаторов, можете применять его например в Page Object и т.д.
Моей задачей было показать простой пример реализации, вы можете его улучшить для себя, как посчитаете нужным.
Надеюсь данное решение поможет вам, буду рад отзывам, а также конструктивной критике.