Уверен большинство из вас, как и я задавались вопросом “Как сделать так, чтобы визуально видеть то, с чем работает авто-тест, не прибегая к записи видео”.
Я хотел бы поделиться своим решением, которое облегчит проверку результатов авто-тестов, а также поможет сэкономить кучу времени на поисках нужных элементов из скриншота Allure.
На примере выше, можно увидеть работу авто-теста с кнопкой “Pause”.
Для решения данной задачи я использовал JS, а в качестве ЯП использовал Python (данный подход применим к Java и другим языкам).
Мой подход был в использовании execution_script, благодаря этому подходу я мог изменять CSS свойства элемента и делать скриншот на каждое состояние элемента, например: hover, click, active и т.д, и наблюдать это визуально в Allure отчете.
Проблемой стало то, что для поиска локаторов в основном используется XPATH, а как оказалось в JS нет метода getElementByXPATH и поэтому пришлось делать этот метод самому.
В примере ниже вы можете увидеть реализацию.
1 2 3 4 |
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 свойств.
Рассмотрим простой пример вызова метода в тесте:
1 2 3 4 |
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 и т.д.
РЕКОМЕНДУЕМ:
Лучшие клиенты Git GUI для Windows
Моей задачей было показать простой пример реализации, вы можете его улучшить для себя, как посчитаете нужным. Надеюсь данное решение поможет вам, буду рад отзывам, а также конструктивной критике.