Как составить устойчивые локаторы практически для любого сайта20.02.2025 17:00

Вступление

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

В данной статье собрана информация, необходимая для составления устойчивых локаторов. То есть тех локаторов, которые не нужно будет часто менять. Это крайне необходимо для автоматизации, когда вполне могут поменяться локаторы из-за обновления тегов и их атрибутов программистами, например, во время рефакторинга или написания нового функционала. Статья написана максимально просто, без «воды», на основе около десятилетнего опыта в автотестировании веб-сайтов на различных проектах. 

Данная статья может быть особенно интересна «новичкам» в области автотестирования веб-сайтов. Но и автотестировщики с опытом могут найти в ней интересные моменты для своей работы.

Основная теория

Локаторы составляются по тегам из дерева тегов страницы. В данной статье описано составление локаторов Xpath в Chrome.

Элемент можно найти,  кликнув правой кнопкой мыши по нему, а затем выбрав — «Исследовать элемент». Или нажав F12 (или Ctrl + Shift + I),  а затем найдя элемент поиском (CTRL+F) по ключевым словам. Наведя курсор на элемент в дереве тегов, этот элемент подсветится на UI странице.

Локатор должен быть уникальным. Уникальность локатора можно проверить, зайдя в Console→DevTools (открывается через F12 или Ctrl + Shift + I) и введя строку $x («locator»). При наведении курсора на локатор из списка соответствующий элемент на странице подсветится.

Бывает,  программисты делают специальные ключи для автоматизации, но в условиях написания автотестов, например, для сторонних сайтов, как в моем случае VK, Telegram, Yandex Messenger, Whatsapp нет возможности попросить разработчиков об этом. Чтобы локатор был уникальным и стабильным, необходимо найти говорящий, уникальный ключ или ключи. Это может быть текст на странице или значение class, id, name и т. д.

На что обратить внимание при составлении локаторов:

• Локатор должен быть не очень длинным, поэтому можно использовать часть текста или значения class и т. д., которое характеризует элемент.

• Не стоит использовать локаторы с данными, которые очень вероятно могут поменяться (например, с id=«r110», href=»#-4563532102», class=«title QljEeKI5»).

• Также не стоит использовать все значения, например, class и т. д. если их много. Достаточно выбрать ключевые 1–2 значения и использовать contains. Это нужно для удобства чтения локатора. Также «побочные» значения могут поменяться в короткие сроки. 

• Если в самом элементе нет уникальных текстов и значений, то тогда можно взять соседний элемент (выше по дереву, ниже по дереву, из соседнего узла) и через перемещения по дереву дойти до необходимого элемента.

Примеры локаторов

Примеры локаторов из популярных мессенджеров для веб:

Пример 1. Простой:

...

"//button[@title='Send Message']"

Пример 2. С текстом:

    
Очистить чат

"//li/div[text()='Очистить чат']"

Пример 3.1. С contains:

Для данного случая в коде программы хотелось получить один локатор для похожих элементов разных версий переписки: диалога и группы. Здесь нужен contains, так как для разных чатов у текста элемента есть общая часть, но есть и отличия.

Delete for me and QA

Delete for everyone

Локатор:

"//button[contains(text(), 'Delete for')]"

Отмечу, что данный код уже устарел, так как был переделан интерфейс telegram.

Пример 3.2. С contains:

Для данного случая нужен contains, чтобы локатор не был слишком длинный, но при этом он был уникальным.

    

    ...

"//button[contains(@class, 'btn-send')]/div[@class='c-ripple']"

Пример 4.1. С переходом по дереву тегов (»/» — один уровень вниз,»//» — один или больше уровней вниз,»/…» — один уровень вверх):

Здесь нужно подняться вверх по дереву, так как для автотеста нужен кликабельный элемент (кликабельность проверяется перебором или ищется »//a»), а для самой ссылки »/a» уникальный простой локатор не сделать.

    

    
 
    

        

            

                
*** QA Group

"//h3[text()='*** QA Group']/../../../.."

    "Automation telegram web 2024-11-06 14:17:59.713550"
    
        ...
        
...
    
    ::after

f"//div[contains(text(), '{TEXT_MESSAGE_BEGIN}')]//div", где TEXT_MESSAGE_BEGIN - переменная

    Delete for me and QA
    Delete just for me
    Cancel

"//div[@class='dialog-buttons-column']/button[1]"

"//div[@title='Меню'][@data-tab='6']"

                

                    

                        You:
                        
                        "Automation yandex messenger web 2024-11-01 08:04:45.638888"
                        

                    
                
                
...