Аби взаємодіяти і управляти Web елементами сторінки, спочатку потрібно їх знайти. Шукати веб елементи ми можемо різними способами.
- Щоб знайти один елемент, вживаємо метод webdriver.fund_element(спосіб_знаходження, вираз_пошуку)
- Щоб знайти усі веб елементи за певним критерієм, пишемо webdriver.find_elements(спосіб_знаходження, вираз_пошуку)
- Модуль webdriver.common.by.By містить наступні способи знаходження веб елементів:
Скажімо напряму By:
- За ідентифікатором
- За назвою класу
- За TagName
- По імені
- За посиланням
- За частиною тексту у посиланні
Наведемо приклади:
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 локатори спочатку не підтримуються браузерами. Проте щоб хтось використовував такий метод, відверто…. я ніколи не чула.
Шпаргалка по XPath
Ви можете виконати довільний JavaScript, щоб знайти елемент, і як тільки ви повернути DOM елемент, він буде автоматично перетворений в об’єкт WebElement.