Ранее мы уже изучали локаторы, с помощью которых можно идентифицировать элементы на web странице. В этой главе мы пристальнее рассморим наиболее сложные из них, а именно CSS, Xpath и jQuery локаторы.
Многие браузеры реализуют CSS движок, чтобы разработчики смогли применять CSS таблицы в своих проектах. Что позволяет разделить между собой контент страницы с её оформлением. В CSS есть паттерны, согласно которым стили, создаваемые разработчиком, применяются к элементам страницы (DOM). Эти паттерны называются локаторы (selectors). Selenium WebDriver использует тот же принцип для нахождения элементов. И он намного быстрее, чем поиск элементов на основе XPath, который мы рассмотрим чуть позже.
Давайте рассморим несколько базовых локаторов с использованием 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"));
//или
WebElement userName = driver.findElement(By.cssSelector("#username"));
Поиск по классу:
WebElement userName = driver.findElement(By.cssSelector("input.classname"));
//или
WebElement userName = driver.findElement(By.cssSelector(".classname"));
Поиск по значениям атрибутов html тегов:
WebElement previousButton = driver.findElement(By.cssSelector("img[alt='Previous']"));
Поиск по названию атрибутов:
List<WebElement> 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 можем найти родительский элемент, по дочернему.
Рассмотрим некоторые примеры:
Абсолютный путь:
WebElement userName = driver.findElement(By.xpath("html/body/div/div/form/input"));
Относительный путь:
WebElement userName = driver.findElement(By.xpath("//input"));
Поиск непосредственного дочернего элемента:
WebElement userName = driver.findElement(By.xpath("//div/a"));
Поиск дочернего элемента любого уровня:
WebElement userName = driver.findElement(By.xpath("//div//a"));
Поиск элемента по тексту:
WebElement userName = driver.findElement(By.xpath(".//*[text()='Первая ссылка']/.."));
Поиск по значениям атрибутов:
WebElement userName = driver.findElement(By.xpath("//input[@id='username']"));
Поиск по названию атрибутов:
List<WebElement> imagesWithAlt = driver.findElements(By.xpath ("img[@alt]"));
Поиск родительского элемента:
WebElement userName = driver.findElement(By.xpath("//input[@id='username']/.."));
Мы можем находить элементы, используя jQuery локаторы. Они используются, когда CSS локаторы изначально не поддерживаются браузерами.
Первое, что нужно сделать для их использования - проверить, поддерживает ли приложение jQuery библиотеку. Если нет, то мы сами должны её добавить:
private static void addJQuery (JavascriptExecutor js) {
String script = "";
boolean needInjection = (Boolean)(js.executeScript("return this.$ === undefined;"));
if(needInjection) {
URL u = Resources.getResource("jquery.js");
try {
script = Resources.toString(u, Charsets.UTF_8);
} catch(IOException e) {
e.printStackTrace();
}
js.executeScript(script);
}
}
Теперь нам нужен объект, с помощью которого мы смогли бы работать с JavaScript и, как следствие, с jQuery. Для этого мы будем использовать JavaScriptExecutor
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
JavascriptExecutor js = (JavascriptExecutor)driver;
Теперь всё готово, для того, чтобы мы могли использовать jQuery локаторы.
WebElement element = (WebElement) js.executeScript("return jQuery.find('#hplogo');");
А вот и сам локатор:
'#hplogo'
Так же мы можем использовать CSS локаторы внутри jQuery локаторов:
jQuery.find('input.someclass')