Мы с вами уже научились настраивать среду для запуска тестов. Умеем выводить отчёты и нажимать на элементы, но так и не научились искать эти самые элементы. Эта статья как раз про локаторы, как же научиться правильно писать локатор, чтобы автотесты проходили успешно.
Поиск локаторов в консоли
Давайте перейдём на сайт OZON и попробуем определить локатор для какого-нибудь элемента.
- Перейдите на главную страницу сайта OZON.
- Нажмите клавишу F12 или используйте правую кнопку мыши, чтобы вызвать контекстное меню и выбрать пункт «Исследовать элемент».
- В открывшемся окне инструментов разработчика найдите нужный элемент на странице. Вы можете использовать различные способы поиска:
- Поиск по XPath. Введите XPath-выражение в поле поиска и нажмите Enter.
- Поиск по CSS-селектору. Введите CSS-селектор в поле поиска и нажмите Enter.
- Поиск по имени тега. Введите имя тега в поле поиска и нажмите Enter.
- Когда вы найдёте нужный элемент, вы увидите его атрибуты и свойства. Среди них будет атрибут id или class, который можно использовать в качестве локатора.
- Запишите полученный локатор. Он будет использоваться в ваших тестах для взаимодействия с этим элементом.
Найдём локатор, к примеру "Одежда и обувь".
В Dom нас перенесёт на этот самый элемент
Как можем заметить это ссылка под тегом "а", это очевидный знак уникальности элемента, её и будем использовать.
Переходим в вкладку Console и пишем следующий запрос:
$x("") - поиск по xpath элемента
$("") - поиск по css элемента
Для начала разберем разницу между css и xpath
Стандарты HTML и CSS, разработанные W3C, играют ключевую роль в создании веб-приложений. Они обеспечивают согласованность и удобство работы с кодом, упрощая его поддержку и обновление.
XPath — это мощный инструмент для навигации по дереву элементов DOM. Он позволяет точно определять элементы на странице, что особенно важно при автоматизации тестирования. Абсолютный XPath начинается с корневого элемента и указывает на конкретный элемент, в то время как относительный XPath используется для навигации по дереву элементов относительно текущего контекста.
CSS, в свою очередь, описывает внешний вид HTML-документов. Стили могут быть внешними (в отдельном файле .css) или внутренними (внутри HTML-документа). Внутренние стили могут быть описаны внутри тега <style> или применены как атрибут к конкретному элементу.
Хотя CSS может показаться проще в использовании, иногда он не позволяет точно определить элемент, в отличие от XPath. Это делает XPath универсальным инструментом для автоматизации тестирования веб-приложений.
Пишем локатор xpath
В нашем случае прописываем данные для элемента "Одежда и обувь".
Из вашего описания следует, что вы нашли уникальный локатор для элемента на странице. Это означает, что при написании автоматических тестов вы можете использовать этот локатор для точного определения элемента и взаимодействия с ним.
Локатор состоит из нескольких частей:
- Искомый тег — в вашем случае это тег а.
- @href — название атрибута, который вы хотите использовать для идентификации элемента.
- ‘/category/muzhskaya-odezhda-7542/’ — значение атрибута @href. Это конкретное значение, которое отличает данный элемент от других элементов с таким же тегом и атрибутом на странице.
Использование такого локатора гарантирует, что автоматический тест будет взаимодействовать именно с тем элементом, который вам нужен.
Если у вас возникнут дополнительные вопросы или потребуется дополнительная информация о написании XPath-выражений, пожалуйста, дайте знать. Мы готовы предоставить более подробные инструкции или примеры кода.
Пишем локатор CSS
Для css наш локатор будет выглядеть следующим образом
$("a[href='/category/muzhskaya-odezhda-7542/']")
Запись локаторов в наши тесты
Как уже было рассказано в нашей статье про PageObject, мы создаём отдельный класс под каждую страницу, чтобы легче было ориентироваться. Добавляем наш локатор и теперь класс будет выглядеть так:
Давайте перейдём в Одежду и возьмём цену первого товара.
Локатор для одежды:
$x("//a[@href='/category/muzhskaya-odezhda-7542/?sorting=score']")
Локатор для динамически изменяющихся элементов нужно подбирать тщательнее. К примеру первый товар будет каждый раз другой, соответственно брать ссылку в качестве локатора не подойдет.
Структура Dom элементов
Чтобы написать локатор для цены товара, вам нужно следовать определённой структуре. Сначала определите, где находятся все карточки товаров на странице. Предположим, они расположены в блоке с фиксированным названием. Затем выберите первый элемент в этом блоке, который содержит цену товара.
Пример локатора для цены товара:
//div[@class='block-name']/div[1]
Этот локатор найдёт первый элемент div внутри блока с классом block-name, который содержит цену товара.
Поэтому ищем этот блок и в неём все карточки товара
У нас вышло что карточек товара на 1 странице = 36
$x("//div[@class='widget-search-result-container lk1']//div[@class='yj4 jy5']")
Нам нужна 1 карточка
$x("//div[@class='widget-search-result-container lk1']//div[@class='yj4 jy5'][1]")
Чтобы найти цену товара, вам нужно использовать следующий локатор:
//div[@class='widget-search-result-container lk1']//div[@class='yj4 jy5'][1]//div[@class='_33-a0']
Этот локатор находит первый элемент div с классом _33-a0, который является потомком элемента div с классом yj4 jy5, который, в свою очередь, является потомком элемента div с классом widget-search-result-container lk1.
Обратите внимание, что локатор //div[@class='yj4 jy5'] находит все 36 элементов div с классом yj4 jy5, но поскольку после него идёт [1], выбирается только первый элемент.
div[@class=''l1k] - мы пропустили
- [1] - означает что мы берём первый элемент из всего списка, первую карточку
- //div[@class='_33-a0'] - элемент с ценой товара
Так выглядит наш PageObject:
Так выглядит тест:
Как итог мы получим такой результат:
Если вывести отчёт в Allure мы можем убедиться, что цена первого товара равна 517р.
Если в этой статье было что то не понятно. То скорее подписывайся и смотри предыдущие статьи, в них мы подробно разбираем все моменты, которые используем в данном тесте!
Если у вас есть вопросы или вы просто хотите стать частью команды тестировщиков, то переходи в ТГ канал, где можем пообщаться с единомышленниками и найти много интересных и полезных знаний!Также если вам нужна индивидуальная консультация, менторство и помощь в создании проекта пишите в ТГ канал!
