Для тестирования важно понимать как можно взаимодействовать с элементами на странице. Особенно для дальнейшей автоматизации проекта.
Особенно полезные атрибуты Html
Для начала вспомним структуру HTML-тега. Он состоит из имени тега и набора пар атрибут="значение". В этой записи тег имеет имя button и 4 пары атрибут="значение":
<button type="button" class="_mainMenuItem__action_zlwrnv_17" aria-label="Developer Tools: Open submenu" data-test="main-menu-item-action">Developer Tools</button>
- type="button"
- class="_mainMenuItem__action_zlwrnv_17"
- aria-label="Developer Tools: Open submenu"
- data-test="main-menu-item-action"
Ну и название самого элемента можно также считать за атрибут
- Developer Tools
Итого 5 параметров с помощью которых можно идентифицировать элемент.
Некоторые атрибуты используются в основном для вёрстки или удобства использования (например, required, placeholder, type), в то время как другие не влияют на отображение или поведение элементов, но полезны для тестировщиков при автоматизации веб-приложений. Они помогают однозначно идентифицировать объекты на странице. Примерами таких атрибутов являются name и id. На первый взгляд может показаться, что это дублирующие друг друга атрибуты, однако на самом деле они выполняют совершенно разные функции.
Атрибут name - применяется в первую очередь к элементам формы. Это идентификатор, с помощью которого скрипт-обработчик этой формы (на JavaScript или серверный скрипт) получает доступ к значению, переданному из формы. То есть программист может писать не $_POST[5], а $_POST["user[email]"], что значительно упрощает работу с формами на сервере.
Атрибут id - предназначен для идентификации тега в CSS. По id можно применить стиль только к одному конкретному объекту, а атрибут name никак не используется в CSS.
Также стоит обратить внимание на атрибут class, который применяет CSS-стили к объекту. По нему можно найти объект на странице, потому что объектов с одинаковыми наборами классов на странице обычно немного. Это не самый надёжный метод, но и он бывает полезен, если страница свёрстана не тестопригодно.
От слов к делу. Строим свой Xpath путь.
DOM (Document Object Model) — это программный интерфейс, который позволяет программам и скриптам работать с содержимым HTML-, XHTML- и XML-документов. Он представляет документ в виде дерева объектов, что позволяет легко получать доступ к элементам документа, изменять их содержимое, структуру и оформление.
XPath — путь к конкретному элементу в дереве элементов DOM. Он может быть абсолютным (или полным) и относительным. Полный путь всегда начинается с корневого элемента — HTML, и он в общем случае определяет строго один элемент. В начале полного пути ставится знак «/».
Полный путь
Полный путь не очень удобен из за своей длинны. Вам буквально нужно будет пройтись от первого элемента до нужного. К примеру путь к той же кнопке, которую мы обсуждали выше будет выглядеть так:
/html/body/div[1]/div[1]/div[3]/header/div/div/div[2]/div[1]/div/nav/div[1]/button
Сразу разберём минусы:
- В данном случае использованы номера элементов, например мы открываем элемент, а в нём несколько элементов с одинаковым тегом. И вместо того чтобы использовать уникальные идентификаторы, мы просто пишем номер этого тега.
В таком случае, при малейшем изменении вашей страницы, локатор будет не актуален.
Знак / всегда означает то, что мы переходим от элемента к элементу внутри. Как бы лесенкой
Мы не можем перескакивать и пропускать какой либо промежуточный элемент
Относительный путь
Относительный путь начинается с символов «//» и определяет некоторую последовательность элементов внутри дерева DOM.
Данный способ нам позволяет перейти к элементу сразу без прописывания множества других тегов.
Например, всё тот же элемент будет выглядеть следующим образом
//button[@aria-label='Developer Tools: Open submenu']
Мы просто указали сразу на конкретный элемент.
Мы можем указывать сразу несколько параметров у одного элемента, если одного будет недостаточно, чтобы определить один элемент.
//button[@aria-label='Developer Tools: Open submenu'][@class='_mainMenuItem__action_zlwrnv_17']
Для поиска XPath можно использовать инструменты разработчика в Google Chrome. Но они не всегда дают хороший результат, так что зачастую приходится строить локатор вручную.
Как искать нужный локатор на странице?
Для этого нам всё также поможет панель разработчика. Можем выбрать данный элемент
и после навести на нужный элемент страницы
После того, как мы нажмём на него, он отобразится у нас в Dom дереве.
Чтобы написать путь до элемента, тем самым проверив верно ли вы его написали можно воспользоваться одним из удобных способов.
1 способ:
Перейти во вкладку консоль и написать следующее
$x("")
В двойных кавычках можем прописывать уже любой локатор.
Как мы видим локатор, который написал я работает отлично, находится единственный элемент.
Но и локатор который предлагает сама консоль также находит единственный элемент
2 способ:
В поисковике можно также прописывать любые локаторы. Переходим во вкладку элементы и нажимаем Ctrl + F, у нас появляется окно для поиска. Там прописываем сразу локатор без дополнительных символов.
В следующих уроках разберём углублённый поиск по Xpath.
Если у вас есть вопросы или вы просто хотите стать частью команды тестировщиков, то переходи в ТГ канал, где можем пообщаться с единомышленниками и найти много интересных и полезных знаний! Также если вам нужна индивидуальная консультация, менторство и помощь в создании проекта пишите в ТГ канал!