Автоматизация тестирования функций с помощью Selenium WebDriver

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

Что такое селен и как он может вам помочь?

Selenium — это фреймворк для автоматизированного тестирования веб-приложений. Используя Selenium, вы можете автоматизировать каждую задачу в своем браузере, как если бы ее выполнял реальный человек. Интерфейс, используемый для отправки команд в разные браузеры, называется Selenium WebDriver. Реализации этого интерфейса доступны для всех основных браузеров, включая Mozilla Firefox, Google Chrome и Internet Explorer.

Автоматизация тестирования функций с помощью Selenium WebDriver

Какой тип веб-разработчика вы? Вы дисциплинированный тип, который тестирует все ключевые функции вашего веб-приложения после каждого развертывания. Если это так, вас, вероятно, раздражает, сколько времени занимает это повторяющееся тестирование. Или вы из тех, кто просто не беспокоится о тестировании ключевых функций и всегда думает: «Я должен тестировать больше, но лучше разрабатывать новые вещи». Если это так, вы, вероятно, обнаруживаете ошибки случайно или когда ваш клиент или начальник жалуются на них.

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

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

Это был день, когда я начал проводить исследования по автоматизации процесса тестирования веб-приложений и наткнулся на Selenium и его WebDriver. Selenium — это, по сути, фреймворк, который позволяет автоматизировать веб-браузеры. WebDriver — это ключевой интерфейс, который позволяет отправлять команды во все основные браузеры (мобильные и десктопные) и работать с ними так, как это сделал бы настоящий пользователь.

Подготовка первого теста с Selenium WebDriver

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

В качестве простого первого теста я протестировал вход в один из моих проектов WordPress. Почему WordPress? Просто потому, что использование формы входа в WordPress — это пример, которому каждый может следовать легче, чем если бы я ссылался на какое-то пользовательское веб-приложение.

Что вам нужно, чтобы начать использовать Selenium WebDriver? Поскольку я решил использовать наиболее распространенную реализацию Selenium в Java, мне нужно было настроить свою маленькую среду Java.

Если вы хотите последовать моему примеру, вы можете использовать среду Java по вашему выбору. Если вы еще не настроили его, я предлагаю установить Eclipse и убедиться, что вы можете запустить простой скрипт «Hello world» на Java.

Поскольку я хотел проверить вход в Chrome, я убедился, что браузер Chrome уже установлен на моем компьютере. Это все, что я сделал при подготовке.

Загрузка ChromeDriver

Все основные браузеры предоставляют собственную реализацию интерфейса WebDriver. Поскольку я хотел протестировать вход в WordPress в Chrome, мне нужно было получить реализацию Chrome в WebDriver: ChromeDriver.

Я распаковал ZIP-архив и сохранил исполняемый файл chromedriver.exe в месте, которое я мог запомнить на потом.

Настройка нашего проекта Selenium в Eclipse

Шаги, которые я предпринял в Eclipse, вероятно, будут довольно простыми для тех, кто много работает с Java и Eclipse. Но для таких, как я, кто не так знаком с этим, я пройдусь по отдельным шагам:

1. Откройте затмение.
2. Щелкните значок «Новый».
   

   

3. Выберите мастер, чтобы создать новый «Проект Java», и нажмите «Далее».
   

   

4. Дайте вашему проекту имя и нажмите «Готово».
   

   

5. Теперь вы должны увидеть свой новый Java-проект в левой части экрана.
   

   

Добавление библиотеки Selenium в наш проект

Теперь у нас есть Java-проект, но Selenium по-прежнему отсутствует. Итак, далее нам нужно добавить фреймворк Selenium в наш Java-проект. Вот шаги, которые я предпринял:

1. Загрузите последнюю версию библиотеки Java Selenium.
   

   

2. Распакуйте архив и сохраните папку в легко запоминающемся месте.
3. Вернитесь в Eclipse и перейдите в «Проект» → «Свойства».
   

   

4. В диалоговом окне перейдите к «Путь сборки Java», а затем к регистрации «Библиотеки».
5. Нажмите «Добавить внешние JAR».
   

   

6. Перейдите в только что загруженную папку с библиотекой Selenium. Выделите все файлы .jar и нажмите «Открыть».
   

   

7. Повторите это для всех файлов .jar в подпапке libs .
8. В итоге вы должны увидеть все файлы .jar в библиотеках вашего проекта:
   

   

Вот и все! Все, что мы сделали до сих пор, является одноразовой задачей. Теперь вы можете использовать этот проект для всех ваших различных тестов, и вам не нужно будет снова выполнять весь процесс настройки для каждого тестового примера. Вроде аккуратно, не правда ли?

Создание нашего тестового класса и открытие браузера Chrome

Теперь у нас есть проект Selenium, но что дальше? Чтобы увидеть, работает ли это вообще, я хотел попробовать что-то действительно простое, например, просто открыть браузер Chrome.

Для этого мне нужно было создать новый класс Java, из которого я мог бы выполнить свой первый тестовый пример. В этот исполняемый класс я скопировал несколько строк кода Java, и, хотите верьте, хотите нет, это сработало! Волшебным образом браузер Chrome открылся и через несколько секунд закрылся сам по себе.

Попробуй сам:

1. Нажмите кнопку «Создать» еще раз (пока вы находитесь в папке вашего нового проекта).
   

   

2. Выберите мастер «Класс» и нажмите «Далее».
   

   

3. Назовите свой класс (например, «RunTest») и нажмите «Готово».
   

   

4. Замените весь код в новом классе следующим кодом. Единственное, что вам нужно изменить, это путь к chromedriver.exe на вашем компьютере:
   

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }

5. Сохраните файл и нажмите кнопку воспроизведения, чтобы запустить код.
   

   

6. Если вы все сделали правильно, код должен открыть новый экземпляр браузера Chrome и вскоре после этого закрыть его.
   

   

Тестирование входа администратора WordPress

Теперь я надеялся, что смогу автоматизировать свой первый небольшой тест функций. Я хотел, чтобы браузер перешел к одному из моих проектов WordPress, вошел в административную область и убедился, что вход прошел успешно. Итак, какие команды мне нужно было искать?

1. Перейдите к форме входа,
2. Найдите поля ввода,
3. Введите имя пользователя и пароль в поля ввода,
4. Нажмите кнопку входа,
5. Сравните заголовок текущей страницы, чтобы увидеть, был ли вход успешным.

Опять же, после того, как я сделал все необходимые обновления своего кода и нажал кнопку запуска в Eclipse, мой браузер начал волшебным образом работать через вход в WordPress. Я успешно провел свой первый автоматизированный тест сайта!

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

1. Расположение вашего файла chromedriver.exe (как указано выше),

2. URL-адрес учетной записи администратора WordPress, которую вы хотите протестировать,

3. Имя пользователя WordPress,

4. Пароль WordPress.

Затем сохраните и дайте ему запуститься снова. Он откроет Chrome, перейдет к логину вашего веб-сайта WordPress, войдет в систему и проверит, является ли заголовок h1 текущей страницы «Dashboard».

 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }

Если вы все сделали правильно, ваш вывод в консоли Eclipse должен выглядеть примерно так:

Понимание кода

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

В зависимости от того, возвращает ли метод значение true или false, вы получите вывод в консоли, сообщающий, прошел ли этот конкретный тест или нет.

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

Теперь, шаг за шагом, вот что происходит в нашей маленькой программе:

1. Во-первых, мы сообщаем нашей программе, где она может найти конкретный WebDriver для Chrome.
   

    System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");

2. Открываем браузер Chrome и разворачиваем окно браузера.
   

    webDriver = new ChromeDriver(); webDriver.manage().window().maximize();

3. Здесь мы переходим к нашему подметоду и проверяем, возвращает ли он true или false.
   

    if (testWordpresslogin()) …

4. Следующая часть нашего подметода может быть не интуитивно понятной:
   Блоки try{…}catch{…} . Если все пойдет так, как ожидалось, будет выполнен только код в try{…} , но если что-то пойдет не так во время выполнения try{…} , тогда выполнение продолжится в catch{} . Всякий раз, когда вы пытаетесь найти элемент с помощью findElement а браузер не может найти этот элемент, он генерирует исключение и выполняет код в catch{…} . В моем примере тест будет помечен как «проваленный» всякий раз, когда что-то пойдет не так и будет выполнен catch{} .
5. В подметоде мы начинаем с перехода в нашу административную область WordPress и поиска полей для имени пользователя и пароля, ища их идентификаторы. Кроме того, мы вводим данные значения в эти поля.
   

    webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");

   
   

   

6. После заполнения формы входа мы находим кнопку отправки по ее идентификатору и нажимаем ее.
   

    webDriver.findElement(By.id("wp-submit")).click();

7. Чтобы визуально следить за тестом, я включаю здесь 7-секундную паузу (7000 миллисекунд = 7 секунд).
   

    Thread.sleep(7000);

8. Если вход в систему выполнен успешно, заголовок h1 текущей страницы теперь должен быть «Панель инструментов», ссылаясь на область администрирования WordPress. Поскольку заголовок h1 должен существовать только один раз на каждой странице, я использовал здесь имя тега, чтобы найти элемент. В большинстве других случаев имя тега не является хорошим локатором, потому что имя тега HTML редко бывает уникальным на веб-странице. Найдя h1 , мы извлекаем текст элемента с помощью getText() и проверяем, равен ли он строке «Dashboard». Если вход не будет успешным, мы не найдем «Dashboard» в качестве текущего h1 . Поэтому я решил использовать h1 , чтобы проверить, успешен ли вход в систему.
   

    if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; } 

   
   

   

9. Если бы что-то пошло не так в предыдущей части подметода, программа сразу бы перешла к следующей части. Блок catch напечатает тип исключения, которое произошло с консолью, а затем вернет false основному методу.
   

    catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }

Адаптация тестового примера

Здесь становится интересно, если вы хотите адаптировать и добавить свои собственные тестовые случаи. Как видите, мы всегда вызываем методы объекта webDriver , чтобы что-то сделать с браузером Chrome.

Во-первых, мы максимизируем окно:

 webDriver.manage().window().maximize();

Затем в отдельном методе мы переходим в нашу административную область WordPress:

 webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");

Есть и другие методы объекта webDriver , которые мы можем использовать. Помимо двух вышеперечисленных, вы, вероятно, будете часто использовать этот:

 webDriver.findElement(By. …)

Метод findElement помогает нам находить различные элементы в DOM. Существуют различные варианты поиска элементов:

• By.id
• By.cssSelector
• By.className
• By.linkText
• By.name
• By.xpath

Если возможно, я рекомендую использовать By.id потому что идентификатор элемента всегда должен быть уникальным (в отличие, например, от className ), и обычно он не зависит от изменения структуры вашего DOM (в отличие, скажем, от xPath ). .

Примечание . Подробнее о различных вариантах поиска элементов с помощью WebDriver можно прочитать здесь.

Как только вы получаете элемент с помощью метода findElement , вы можете вызывать различные доступные методы элемента. Наиболее распространенными являются sendKeys , click и getText .

Мы используем sendKeys для заполнения формы входа:

 webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");

Мы использовали click для отправки формы входа, нажав кнопку отправки:

 webDriver.findElement(By.id("wp-submit")).click();

И getText использовался для проверки того, какой текст находится в h1 после нажатия кнопки отправки:

 webDriver.findElement(By.tagName("h1")).getText()

Примечание . Обязательно ознакомьтесь со всеми доступными методами, которые можно использовать с элементом.

Заключение

С тех пор, как я открыл для себя возможности Selenium WebDriver, моя жизнь как веб-разработчика изменилась. Я просто люблю это. Чем глубже я погружаюсь в фреймворк, тем больше возможностей открываю — запускаю один тест одновременно в Chrome, Internet Explorer и Firefox или даже на смартфоне, или автоматически делаю скриншоты разных страниц и сравниваю их. Сегодня я использую Selenium WebDriver не только для целей тестирования, но и для автоматизации повторяющихся задач в Интернете. Всякий раз, когда я вижу возможность автоматизировать свою работу в Интернете, я просто копирую свой первоначальный проект WebDriver и адаптирую его к следующей задаче.

Если вы считаете, что Selenium WebDriver для вас, я рекомендую ознакомиться с документацией по Selenium, чтобы узнать обо всех возможностях Selenium (таких как одновременный запуск задач на нескольких (мобильных) устройствах с помощью Selenium Grid).

Я с нетерпением жду ответа, найдете ли вы WebDriver столь же полезным, как и я!