Типи елементів. Пошук за локаторами

Аби взаємодіяти і управляти Web елементами сторінки, спочатку потрібно їх знайти. Шукати веб елементи ми можемо різними способами.

• Щоб знайти один елемент, вживаємо метод webdriver.fund_element(спосіб_знаходження, вираз_пошуку)
• Щоб знайти усі веб елементи за певним критерієм, пишемо webdriver.find_elements(спосіб_знаходження, вираз_пошуку)
• Модуль webdriver.common.by.By містить наступні способи знаходження веб елементів:

Скажімо напряму By:

1. За ідентифікатором
2. За назвою класу
3. За TagName
4. По імені
5. За посиланням
6. За частиною тексту у посиланні

Наведемо приклади:

driver.find_element_by_id("submit_btn").click()    #пошук по id і клік по кнопці	
driver.find_element_by_name("comment").send_keys("Selenium Cool")   #ввід символів
driver.find_element_by_name("comment").send_keys("Selenium Cool")
driver.find_element_by_link_text("Cancel").click()
driver.find_element_by_partial_link_text("ance").click()     #повний текст посилання "Cancel me"

Також Selenium використовує так звані локатори, щоб знаходити елементи на веб-сторінці. Шукати можна по XPath, CSS, JavaScript, jQuery. Найчастіше на практиці використовують пошук по CSS.

Пошук Web елементів за допомогою CSS

В CSS є патерни, згідно з якими стилі, створювані розробником, застосовуються до елементів сторінки (DOM). Ці патерни називаються локатори (selectors). Давайте розглянемо кілька базових локаторів з використанням CSS:

Абсолютний шлях:

WebElement userName = driver.findElement(By.cssSelector("html body div div form input"));

Відносний шлях:

WebElement userName = driver.findElement(By.cssSelector("input"));

Пошук дочірнього елементу:

WebElement userName = driver.findElement(By.cssSelector("div > a"));

Пошук дочірнього елементу будь-якого рівня:

WebElement userName = driver.findElement(By.cssSelector("div a"));

Пошук по ID елементу:

WebElement userName = driver.findElement(By.cssSelector("input#username"));

Пошук по классу:

Пошук за значеннями атрибутів html тегів:

WebElement previousButton = driver.findElement(By.cssSelector("img[alt='Previous']"));

Пошук по назві атрибутів:

List imagesWithAlt = driver.findElements(By.cssSelector("img[alt]"));

Пошук за початком та закінченням строки:

WebElement previousButton = driver.findElement(By.cssSelector("header[id^='page-']"));
WebElement previousButton = driver.findElement(By.cssSelector("header[id$='page-']"));

Пошук по частковому співпадінню:

WebElement previousButton = driver.findElement(By.cssSelector("header[id*='page-']")); 

XPath (XML path) — це мова для нодів (nodes) в XML документі. Так як багато браузерів підтримують XHTML, то ми можемо використовувати XPath для знаходження елементів на web сторінках.
Важливими відмінностями між CSS і XPath локаторами є те, що, використовуючи XPath, ми можемо робити переміщення як у глибину DOM ієрархії, так і повертатися назад. Що ж стосується CSS, то тут ми можемо рухатися тільки у глибину. Це означає, що з XPath ми можемо знайти батьківський елемент, по дочірньому.

Приклад:

driver.find_element_by_xpath("//*[@id='div2']/input[@type='checkbox']").click()

HTML для якого буде працювати

Уникайте XPath з Developer Tool
Уникайте використання скопійованого XPath з інструменту Developer Tool.

Інструмент розробника браузера (клацніть правою кнопкою миші, щоб вибрати «Перевірити елемент», щоб побачити) дуже корисний для визначення веб-елемента на веб-сторінці. Ви можете отримати XPath веб-елемента там, як показано нижче (в Chrome):jQuery локатори
Ми можемо знаходити елементи, використовуючи також jQuery локатори. Вони використовуються, коли CSS локатори спочатку не підтримуються браузерами. Проте щоб хтось використовував такий метод, відверто…. я ніколи не чула.

W3Schools XPath Tutorial

Шпаргалка по XPath

Ви можете виконати довільний JavaScript, щоб знайти елемент, і як тільки ви повернути DOM елемент, він буде автоматично перетворений в об’єкт WebElement.