Рубрики
Без рубрики

Автоматизация веб – браузера с помощью Selenium и Java

Автор оригинала: Shadab Ansari.

Вступление

Несколько инструментов могут управлять веб-браузером так, как это сделал бы реальный пользователь, например, переходя на разные страницы, взаимодействуя с элементами страницы и захватывая некоторые данные. Этот процесс называется Автоматизация веб-браузера . То, что вы можете сделать с автоматизацией веб-браузера, полностью зависит от вашего воображения и потребностей.

Некоторые из распространенных случаев использования автоматизации веб-браузера могут быть:

  • Автоматизация ручных тестов в веб-приложении
  • Автоматизация повторяющихся задач, таких как удаление информации с веб-сайтов
  • Заполнение HTML-форм, выполнение некоторых административных заданий и т. Д

В этом уроке мы рассмотрим один из самых популярных инструментов автоматизации веб – браузера – Selenium . Мы узнаем о его функциях, API и о том, как мы можем использовать его с Java для автоматизации любого веб-сайта.

Что такое Селен?

Selenium – это набор инструментов, который включает в себя Selenium IDE, Selenium RC и Selenium WebDriver.

Selenium IDE-это чисто инструмент для воспроизведения записей, который поставляется в качестве плагина Firefox и расширения Chrome. Selenium RC был устаревшим инструментом, который сейчас обесценился. Selenium WebDriver-это новейший и широко используемый инструмент.

Примечание : Термины Selenium , Selenium WebDriver или просто WebDriver используются взаимозаменяемо для обозначения Selenium WebDriver.

Здесь важно отметить, что Selenium создан только для взаимодействия с веб-компонентами. Поэтому, если вы столкнетесь с какими-либо настольными компонентами, такими как диалоговое окно Windows, Selenium сам по себе не сможет взаимодействовать с ними. Существуют и другие типы инструментов, такие как AutoIt или Automa, которые могут быть интегрированы с Selenium для этих целей.

Зачем использовать Селен?

Selenium-один из самых популярных инструментов автоматизации браузера. Он не зависит от конкретного языка программирования и поддерживает Java, Python, C#, Ruby, PHP, Perl и т.д. Вы также можете написать свою реализацию для языка, если он еще не поддерживается.

В этом уроке мы узнаем, как использовать привязки Java Selenium WebDriver . Мы также рассмотрим API WebDriver .

Успех Selenium также можно объяснить тем фактом, что спецификации WebDriver стали рекомендацией W3C для браузеров.

Предпосылки:

WebDriver обеспечивает привязку для всех популярных языков, как описано в предыдущем разделе. Поскольку мы используем среду Java, нам необходимо загрузить и включить привязки Java в путь сборки. Кроме того, почти каждый популярный браузер предоставляет драйвер, который можно использовать с Selenium для управления этим браузером.

В этом уроке мы будем управлять Google Chrome.

Веб-драйвер

Прежде чем двигаться дальше, полезно понять несколько концепций, которые приводят в замешательство новичков. WebDriver не является классом , это интерфейс .

Все зависящие от браузера драйверы, такие как ChromeDriver , FirefoxDriver , InternetExplorerDriver , являются Java классами , которые реализуют интерфейс WebDriver|/. Эта информация важна, потому что, если вы хотите запустить свою программу в другом браузере, вам не нужно менять кучу кода, чтобы он работал, вам просто нужно поменять WebDriver для любого браузера, который вы хотите.

Во-первых, давайте укажем путь к драйверу браузера. Далее мы создадим экземпляр “правильного драйвера” для этого браузера, ChromeDriver в нашем случае:

System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
WebDriver driver = new ChromeDriver();

Как мы видим, драйвер содержит ссылку на ChromeDriver и, следовательно, может использоваться для управления браузером. Когда будет выполнено приведенное выше утверждение, вы должны увидеть, как в вашей системе откроется новое окно браузера. Но браузер еще не открыл ни одного веб-сайта. Нам нужно дать указание браузеру сделать это.

Примечание : Для использования другого WebDriver вам необходимо указать путь к драйверу в файловой системе, а затем создать его экземпляр. Например, если вы хотите использовать IE, то вот что вам нужно сделать:

System.setProperty("webdriver.ie.driver", "path/to/IEDriver");
WebDriver driver = new InternetExplorerDriver();

С этого момента код будет точно таким же для всех браузеров. Чтобы сосредоточить наше обучение, мы автоматизируем stackabuse.com .

Переход на Веб-сайт

Как упоминалось выше, сначала нам нужно перейти на ваш целевой веб-сайт. Для этого мы просто отправляем запрос GET на URL-адрес веб-сайта:

driver.get("http://stackabuse.com");

ВебЭлемент

Первым шагом в автоматизации веб-браузера является поиск элементов на веб-странице, с которыми мы хотим взаимодействовать, таких как кнопка, ввод, выпадающий список и т.д.

Селеновым представлением таких HTML-элементов является Веб-элемент . Как и WebDriver , WebElement также является интерфейсом Java. Как только мы получим WebElement , Мы сможем выполнить с ними любую операцию, которую может выполнить конечный пользователь, например, щелкнуть, ввести, выбрать и т. Д.

Очевидно, что попытка выполнить недопустимые операции, например, ввести текст в элемент кнопки, приведет к исключению.

Мы можем использовать HTML-атрибуты элемента, такие как идентификатор , класс и имя , чтобы найти элемент. Если таких атрибутов нет, мы можем использовать некоторые продвинутые методы определения местоположения, такие как CSS-селекторы и XPath .

Чтобы проверить HTML-атрибуты любого элемента, мы можем открыть веб-сайт в нашем браузере Chrome (другие браузеры также поддерживают это), щелкните правой кнопкой мыши на элементе, который вы хотите выбрать, и нажмите Проверить элемент . Это должно открыть Инструменты разработчика и отобразить HTML – атрибуты этого элемента:

Как мы видим, элемент имеет <вход> тег и несколько атрибутов, таких как идентификатор , класс и т.д.

WebDriver поддерживает 8 различных локаторов для поиска элементов:

  • идентификатор
  • Имя класса
  • имя
  • тагНаме
  • Текст ссылки
  • Частичная ссылка на текст
  • cssSelector*
  • xpath

Давайте рассмотрим их все по очереди, автоматизировав различные элементы на нашем целевом веб-сайте.

Определение местоположения элементов с помощью идентификатора

Если мы проверим поле ввода информационного бюллетеня на нашем целевом веб-сайте, мы сможем обнаружить, что у него есть атрибут id :

Мы можем найти этот элемент с помощью идентификатора локатора:

WebElement newsletterEmail = driver.findElement(By.id("email"));

Поиск элементов по имени класса

Если мы проверим то же поле ввода, мы увидим, что оно также имеет атрибут class .

Мы можем найти этот элемент, используя имя класса локатор:

WebElement newsletterEmail = driver.findElement(By.className("required email input-lg"));

Примечание : Имя локатора – Имя класса , а не класс . Но атрибут HTML-это класс .

Определение местоположения элементов по имени

Для этого примера давайте представим выпадающий список, в котором пользователь должен выбрать свой возрастной диапазон. В раскрывающемся списке есть атрибут name , который мы можем найти:

Мы можем найти этот элемент, используя имя локатор:

WebElement age = driver.findElement(By.name("age"));

Определение местоположения элементов с помощью xpath

Однако иногда эти подходы устаревают, так как существует несколько элементов с одним и тем же атрибутом:


    Female

    Male

    Still Exploring

В этом примере мы видим, что все три элемента input имеют один и тот же атрибут name “generer”, но не все они имеют одинаковое значение. Иногда базовые атрибуты, такие как идентификатор , класс или имя , не являются уникальными, и в этом случае нам нужен способ точно определить, какой элемент мы хотели бы получить.

В этих случаях мы можем использовать Локаторы XPath . XPath-это очень мощные локаторы, и они сами по себе являются полной темой. Следующий пример может дать вам представление о том, как создать XPath для приведенных выше фрагментов HTML:

WebElement gender = driver.findElement(By.xpath("//input[@value='Female']"));

Поиск элементов с помощью селектора css

Опять же, давайте представим список флажков, в которых пользователь выбирает предпочитаемый язык программирования:


    Java

    Python

    C#

    C

    Vbscript

Технически, для этого фрагмента HTML мы можем легко использовать имя локатор, поскольку они имеют разные значения. Однако в этом примере мы будем использовать селекторы css для поиска этого элемента, который широко используется во интерфейсе с такими библиотеками, как jQuery.

Следующий пример может дать вам представление о том, как создавать селекторы CSS для предыдущего фрагмента HTML:

WebElement languageC = driver.findElement(By.cssSelector("input[value=c]"));
WebElement languageJava = driver.findElement(By.cssSelector("input[value=java]"));

Очевидно, это очень похоже на подход XPath.

Поиск элементов с помощью linkText

Если элемент является ссылкой, т. Е. имеет тег , мы можем найти его, используя его текст. Например, ссылка “Злоупотребление стеком”:

Stack Abuse

Мы можем найти ссылку по ее тексту:

WebElement homepageLink = driver.findElement(By.linkText("Stack Abuse"));

Поиск элементов с помощью partialLinkText

Скажем, у нас есть ссылка с текстом – “случайный текст-xyz-я-не-изменю-случайную цифру-123”. Как было показано ранее, мы можем найти этот элемент с помощью linkText locator.

Однако API WebDriver предоставил другой метод partialLinkText . Иногда часть текста ссылки может быть динамической, которая изменяется при каждой перезагрузке страницы – например, “Заказ #XYZ123”.

В этих случаях мы можем использовать partialLinkText локатор:

WebElement iWontChangeLink = driver.findElement(By.partialLinkText("i-wont-change"));

Приведенный выше код успешно выберет вашу ссылку “случайный текст-xyz-я-не буду-менять-случайную цифру-123”, поскольку наш селектор содержит подстроку ссылки.

Определение местоположения элементов с помощью tagName

Мы также можем найти элемент, используя его имя тега, например , , <ввод> , <выбор> и т. Д. Вы должны использовать этот локатор с осторожностью. Поскольку может быть несколько элементов с одинаковым именем тега, и команда всегда возвращает первый соответствующий элемент на странице:

WebElement tagNameElem = driver.findElement(By.tagName("select"));

Этот способ поиска элемента обычно более полезен, когда вы вызываете метод findElement для другого элемента, а не для всего HTML-документа. Это сужает ваш поиск и позволяет находить элементы с помощью простых локаторов.

Взаимодействие с элементами

До сих пор мы находили HTML-элементы на странице и могли получить соответствующий Веб-элемент . Однако мы еще не взаимодействовали с этими элементами, как это сделал бы конечный пользователь – щелчок, ввод, выбор и т. Д. Мы рассмотрим некоторые из этих простых действий в следующих нескольких разделах.

Щелчок по элементам

Мы выполняем операцию щелчка с помощью метода click () . Мы можем использовать это на любом веб-элементе , если он доступен для кликабельности. Если нет, это вызовет исключение.

В этом случае давайте перейдем по ссылке домашняя страница :

homepageLink.click();

Поскольку это фактически выполняет щелчок по странице, ваш веб-браузер затем перейдет по ссылке, которая была нажата программным способом.

Ввод Текста

Давайте введем некоторый текст в поле ввода Электронная почта :

newsletterEmail.sendkeys("[email protected]");

Выбор Переключателей

Поскольку переключатели просто нажимаются, мы используем метод click() для выбора одной из них:

gender.click();

Установка Флажков

То же самое касается выбора флажков, хотя в этом случае мы можем выбрать несколько флажков. Если мы выберем другой переключатель, будет выбран предыдущий:

languageC.click();
languageJava.click();

Выбор элементов из выпадающего списка

Чтобы выбрать элемент из выпадающего списка, нам нужно будет сделать две вещи:

Во-первых, нам нужно создать экземпляр Выбрать и передать ему элемент со страницы:

Git Essentials

Ознакомьтесь с этим практическим руководством по изучению Git, содержащим лучшие практики и принятые в отрасли стандарты. Прекратите гуглить команды Git и на самом деле изучите это!

Select select = new Select(age);

Здесь важно отметить, что Select – это класс Java, реализующий интерфейс Select .

Затем мы можем выбрать элемент, используя его:

Отображаемый текст :

select.selectByVisibleText("Under 30");

Значение (атрибут значение ):

select.selectByValue("20 to 30");

Индекс (начинается с 0):

select.selectByIndex(2);

Если приложение поддерживает множественный выбор, мы можем вызвать один или несколько из этих методов несколько раз, чтобы выбрать различные элементы.

Чтобы проверить, позволяет ли приложение выполнять несколько вариантов выбора, мы можем запустить:

select.isMultiple();

Есть много других полезных операций, которые мы можем выполнить в раскрывающемся списке:

  • Получение списка опций:
java.util.List options = select.getOptions();
  • Получение списка выбранных параметров:
java.util.List options = select.getAllSelectedOptions();
  • Получение первого выбранного параметра
java.util.List options = select.getFirstSelectedOption();
  • Отмените выбор всех параметров
select.deselectAll();
  • Отмените выбор по отображаемому тексту:
select.deselectByVisibleText("Under 30");
  • Отменить выбор по значению:
select.deselectByValue("20 to 30");
  • Отменить выбор по индексу:
select.deselectByIndex(2);

Примечание : Мы также можем объединить два шага поиска элемента и взаимодействия с ними в один оператор с помощью цепочки. Например, мы можем найти и нажать на кнопку Отправить следующим образом:

driver.findElement(By.id("submit_htmlform")).click();

Мы также можем сделать это с помощью Select :

Select select = new Select(driver.findElement(By.name("age")));

Получение Значений Атрибутов

Чтобы получить значение определенного атрибута в элементе:

driver.findElement(By.id("some-id")).getAttribute("class")

Установка Значений Атрибутов

Мы также можем задать значение определенного атрибута в элементе. Это может быть полезно там, где мы хотим включить или отключить какой-либо элемент:

driver.findElement(By.id("some-id")).setAttribute("class", "enabled")

Взаимодействие с мышью и клавиатурой

API WebDriver предоставил класс Действия для взаимодействия с мышью и клавиатурой.

Во-первых, нам нужно создать экземпляр Действия и передать ему экземпляр WebDriver :

Actions builder = new Actions(driver);

Перемещение мыши

Иногда нам может потребоваться навести курсор на пункт меню, в котором отображается пункт подменю:

WebElement elem = driver.findElement(By.id("some-id"));
builder.moveToElement(elem).build().perform();

Перетаскивание

Перетаскивание элемента поверх другого элемента:

WebElement sourceElement = driver.findElement(By.id("some-id"));
WebElement targetElement = driver.findElement(By.id("some-other-id"));
builder.dragAndDrop(sourceElement, targetElement).build().perform();

Перетаскивание элемента на несколько пикселей (например, 200 пикселей по горизонтали и 0 пикселей по вертикали):

WebElement elem = driver.findElement(By.id("some-id"));
builder.dragAndDropBy(elem, 200, 0).build().perform();

Нажатие Клавиш

Удерживайте определенную клавишу при вводе некоторого текста, например, клавиши Shift :

WebElement elem = driver.findElement(By.id("some-id"));
builder.keyDown(Keys.SHIFT)
    .sendKeys(elem,"some value")
    .keyUp(Keys.SHIFT)
    .build()
    .perform();

Выполните такие операции, как Ctrl+a , Ctrl+c , Ctrl+v и ВКЛАДКА :

// Select all and copy
builder.sendKeys(Keys.chord(Keys.CONTROL,"a"),Keys.chord(Keys.CONTROL,"c")).build().perform();

// Press the tab to focus on the next field
builder.sendKeys(Keys.TAB).build().perform();

// Paste in the next field
builder.sendKeys(Keys.chord(Keys.CONTROL,"v")).build().perform();

Взаимодействие с браузером

Получение источника страницы

Скорее всего, вы будете использовать это для очистки веб-страниц:

driver.getPageSource();

Получение заголовка страницы

driver.getPageTitle();

Максимизация браузера

driver.manage().window().maximize();

Увольнение водителя

Важно выйти из драйвера в конце программы:

driver.quit();

Примечание : API WebDriver также предоставляет метод close () , и иногда это сбивает с толку новичков. Метод close() просто закрывает браузер и может быть снова открыт в любое время. Это не уничтожает объект WebDriver . Метод quit() более подходит, когда вам больше не нужен браузер.

Делать Скриншоты

Во-первых, нам нужно привести WebDriver к TakesScreenshot типу, который является интерфейсом . Далее мы можем вызвать getScreenshotAs() и передать OutputType.ФАЙЛ .

Наконец, мы можем скопировать файл в локальную файловую систему с соответствующими расширениями, такими как *.jpg,*. png и т.д.

File fileScreenshot=((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

// Copy screenshot in local file system with *.png extension
FileUtils.copyFile(fileScreenshot, new File("path/MyScreenshot.png"));

Выполнение JavaScript

Мы также можем ввести или выполнить любой допустимый фрагмент JavaScript через Selenium WebDriver. Это очень полезно, так как позволяет вам делать многие вещи, которые не встроены непосредственно в Селен.

Во-первых, нам нужно привести WebDriver к типу JavascriptExecutor :

JavaScriptExecutor js = (JavaScriptExecutor)driver;

Может быть несколько вариантов использования, связанных с JavascriptExecutor :

  • Выполнение операций естественный способ сделать это, если API WebDriver не удался – например, нажмите() или SendKeys() .
js.executeScript("driver.getElementById('some-id').click();");

Мы также можем сначала найти элемент с помощью локаторов WebDriver и передать этот элемент в execute Script() в качестве второго аргумента. Это более естественный способ использования JavascriptExecutor :

// First find the element by using any locator
WebElement element = driver.findElement(By.id("some-id"));

// Pass the element to js.executeScript() as the 2nd argument
js.executeScript("arguments[0].click();", element);

Чтобы задать значение поля ввода:

String value = "some value";
WebElement element = driver.findElement(By.id("some-id"));
js.executeScript("arguments[0].value=arguments[1];", element, value);
  • Прокрутка страницы вниз:
js.executeScript("window.scrollTo(0, document.body.scrollHeight);");
  • Прокрутка элемента, чтобы перенести его в окно просмотра :
WebElement element = driver.findElement(By.id("some-id"));

// If the element is at the bottom pass true, otherwise false 
js.executeScript("arguments[0].scrollIntoView(true);", element);
  • Изменение страницы (добавление или удаление некоторых атрибутов элемента):
WebElement element = driver.findElement(By.id("some-id"));
js.executeScript("arguments[0].setAttribute('myattr','myvalue')", element);

Доступ к файлам Cookie

Поскольку многие веб-сайты используют файлы cookie для хранения состояния пользователя или других данных, вам может быть полезно получить к ним программный доступ с помощью Selenium. Некоторые распространенные операции с файлами cookie описаны ниже.

Получить все файлы cookie:

driver.manage().getCookies();

Получите конкретный файл cookie:

driver.manage().getCookieNamed(targetCookie);

Добавьте файл cookie:

driver.manage().addCookie(mySavedCookie);

Удалите файл cookie:

driver.manage().deleteCookie(targetCookie);

Вывод

Мы рассмотрели все основные функции Selenium WebDriver, которые могут потребоваться при автоматизации веб-браузера. Selenium WebDriver имеет очень обширный API и охватывает все, что выходит за рамки этого руководства.

Возможно, вы заметили, что Selenium WebDriver имеет множество полезных методов для моделирования почти всех взаимодействий с пользователем. Сказав это, современные веб – приложения действительно умны. Если они хотят ограничить свое автоматическое использование, есть различные способы сделать это, например, с помощью капчи. К сожалению, Селен не может обойти капчу. Пожалуйста, используйте этот инструмент, помня Условия использования целевого веб-сайта.