Локаторы в селениде помогают найти необходимые элементы на странице.
Для примера воспользуемся сайтом-калькулятором.
Прежде всего для просмотра DOM-элемента, его атрибутов и свойств воспользуемся стандартным инструментом разработчика, к примеру в Google Chrome. Для отображения инструментов требуется нажать на кнопку "F12". В итоге должно открыться окно на скриншоте ниже
Для поиска определенного элемента воспользуйтесь кнопкой под цифрой "1"
Локатор "ID"
Локатор By.id выполняет поиск DOM-элемента по атрибуту "id"
Для демонстрации механизма поиска по ID выполним следующие шаги:
- найдем кнопку "1" в калькуляторе
- Кликнем на нее.
С помощью инструментов разработчика найдем нужный нам элемент
Как видим кнопка "1" имеет атрибут id='Btn1'.
Для поиска данной кнопки воспользуемся следующим методом:
Selenide.$(By.id("Btn1"))
Полный тест, описанный ранее, выглядит следующим образом
@Test
@DisplayName("Тест локатора по 'ID'")
public void testIdLocators() {
SelenideElement btn1 = Selenide.$(By.id("Btn1"));
btn1.click();
Selenide.sleep(10000);
}
Локатор "ClassName"
Локатор By.className определяет DOM-элемент по атрибуту "class".
Для демонстрации механизма поиска локатора выполним следующие шаги:
- Найдем контейнер с кнопками
- Выведем в консоль его положение
Для поиска контейнера воспользуемся следующим методом:
Selenide.$(By.className("center"));
Полный тест, описанный ранее, выглядит следующим образом
@Test
@DisplayName("Тест локатора по 'className'")
public void testClassLocators() {
SelenideElement calcContainer = Selenide.$(By.className("center"));
Rectangle rect = calcContainer.getRect();
System.out.println(rect.toString());
Selenide.sleep(10000);
}
Локатор "name"
Локатор By.name определяет DOM-элемент по атрибуту "name".
Поиск локатора осуществляется следующей строчкой кода:
Selenide.$(By.name("center"));
Так как механизм похож на className, то пример механизма можно упустить.
Наконец я оставил, исходя из моей практики, я оставил наиболее используемые локаторы, одному из которых я посвящу отдельную статью.
CSS селектор
Локатор осуществляет поиск DOM-элемента с помощью css селекторов(ссылка на старый добрый htmlbook).
Для примера выполним с калькулятором следующие действия:
1. Найдем кнопку "Sin"
2. Нажмем на найденную кнопку
Для поиска составим css-селектор, который сначала ищет родительский div кнопок(1) и далее найдем потомка(2)
Итоговый селектор будет: ".btns button[title='Синус, sin(x)']"
Поиск с помощью css-селектора осуществляется следующим методом:
Selenide.$(".btns button[title='Синус, sin(x)']")
Полный тест выполняющие шаги выглядит следующим образом:
@Test
@DisplayName("Тест css селектора")
public void testCssLocators() {
SelenideElement button = Selenide
.$(".btns button[title='Синус, sin(x)']")
.shouldBe(Condition.visible);
button.click();
Selenide.sleep(10000);
}
XPath локаторы
XPath - язык запросов xml документов. О локализации DOM-элементов с помощью XPath подробно рассмотрю в отдельной статье. В рамках текущей составим простой, обзорный XPath запрос.
Итак, давайте рассмотрим задачу, которую мы решили с помощью css-селектора, и посмотрим на разницу с xpath.
Итоговый XPath запрос выглядит следующим образом: ".//div[@class='btns']//button[@title='Синус, sin(x)']", где:
"." - Корневой элемент или document,
"//" - Поиск дочерних элементов вглубь, т.е. дочерние дочерних.
далее идут основные конструкции частей XPath: *тег*[*условия поиска*][*индекс элемента(опционально)*]
Поиск с помощью XPath осуществляется следующим методом:
Selenide.$x(".//div[@class='btns']//button[@title='Синус, sin(x)']")
Полный тест выглядит следующим образом:
@Test
@DisplayName("Тест XPATH")
public void testXpathLocators() {
SelenideElement button = Selenide
.$x(".//div[@class='btns']//button[@title='Синус, sin(x)']")
.shouldBe(Condition.visible);
button.click();
Selenide.sleep(10000);
}
Ссылка на примеры в github: