Локаторы. CSS, XPATH, JQUERY.

Ранее мы уже изучали локаторы, с помощью которых можно идентифицировать элементы на web странице. В этой главе мы пристальнее рассморим наиболее сложные из них, а именно CSS, Xpath и jQuery локаторы.

CSS локаторы

Многие браузеры реализуют 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 локаторы

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 локаторы

Мы можем находить элементы, используя 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')