Привет, Хабр! Меня зовут Роман Орлов, я Lead Software Test Automation Engineer в EPAM. Работал на разных платформах (Web, Desktop, Mobile) с разными типами тестов (UI, API, Unit-тесты) и архитектурами проектов (монолит и микросервисы). А ещё я автор курса «Автоматизатор тестирования на Java» в Яндекс Практикуме.

Рано или поздно в жизни любого автоматизатора тестирования (на каком бы языке программирования вы ни работали) возникает ситуация, когда необходимо обработать всплывающие окна в браузере. Казалось бы, в эру реактивных приложений такое явление, как всплывающие окна, должно отойти на задний план, ведь современные инструменты предоставляют богатый выбор реализации модальных окон через HTML-код страницы, а не средствами браузера. Однако не стоит забывать, что наш мир не идеален и не все проекты написаны на React/Vue/Angular, а посему стоит ожидать, что со всплывающими окнами браузера всё-таки придется столкнуться.

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

Что такое всплывающие окна?

Всплывающие окна — это инструмент браузера, пришедший к нам из далеких годов, когда веб-разработка ещё не была мейнстримом. Однако всплывающие окна до сих пор существуют и в современных версиях JS — разработчики позаботились об обратной совместимости, чтобы не сломать давно написанные проекты.

Всплывающие окна решают две задачи:

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

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

Какие типы всплывающих сообщений бывают?

Простое предупреждение. Это сообщение с единственной кнопкой — ОК, нажав на которую мы просто закроем всплывающее окно и, таким образом, сможем дальше работать с веб-интерфейсом. Давайте посмотрим, как оно выглядит.

Откройте в браузере консоль разработчика (F12) и перейдите на вкладку Консоль:

Перед нами командная строка Javascript, в которой можно писать код, и браузер его будет выполнять. Набираем в интерпретаторе команду alert('This is alert'); и нажимаем Enter. В результате выполнения видим всплывающее окно с сообщением 'This is alert':

Такое окно может использоваться для вывода важной информации пользователю для ознакомления без возможности сделать какой-либо выбор со стороны пользователя.

Окно подтверждения. Данное окно представляет из себя сообщение с двумя возможными вариантами действия — ОК и Отмена. Поведение такого окна более сложное, чем у простого alert’а, разные фрагменты кода будут выполнены в зависимости от опции, выбранной пользователем. Цель этой статьи — научиться обрабатывать подобные всплывающие окна с помощью инструментов Selenium, поэтому не будем подробно останавливаться на реализации разного выбора со стороны пользователя.

Чтобы вызвать prompt, нам необходимо проделать такие же действия, как мы выполняли для появления alert’а, но написать другую команду: confirm('Choose your destiny:');. В результате выполнения этого кода будет показано следующее окно:

И, наконец, последний тип всплывающего окна — это окно ввода, где пользователь может не просто выбрать из двух доступных вариантов, а написать свой собственный. Такое окно точно так же можно вызвать из Javascript, выполнив следующую команду: prompt('What is your favourite test automation library?', 'Selenium');. Команда prompt принимает в себя два аргумента — сообщение, которое выведется пользователю, и ответ по умолчанию (в нашем случае — Selenium). В результате выполнения этого кода будет показано следующее окно с предполагаемым вариантом ответа (но мы, конечно же, можем ввести и свой или вообще отказаться предоставлять данные, нажав на кнопку Отмена):

Зачем нужна обработка всплывающих окон в Selenium

Чтобы ответить на этот вопрос, давайте проделаем небольшое упражнение для всех трёх типов всплывающих окон:

• Находясь на любой странице в браузере, откройте консоль разработчика и вызовите всплывающее окно

• Как только окно появилось на экране, попробуйте взаимодействовать с элементами на экране (картинками, ссылками и т.п.)

• Закройте всплывающие окна разными способами (нажимая на доступные кнопки или предварительно введя информацию в окне prompt). Обратите внимание, что выводится в консоли разработчика при закрытии окон тем или иным способом

Если вы всё сделали правильно, то ответ на вопрос, зачем обрабатывать всплывающее окно в автоматизации тестирования, становится довольно прозрачным:

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

2. При нажатии на разные кнопки и ввод информации (только для окна типа prompt) мы получаем разные значения, а значит, можем эмулировать различные пользовательские сценарии. Таким образом, мы можем создать набор автоматизированных тестов, которые покроют все возможные ветки развития событий для пользователя.

Взаимодействие со всплывающими окнами в Selenium

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

https://testpages.herokuapp.com/styled/alerts/alert-test.html.

Переключение на всплывающее окно

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

// Кликаем на кнопку, вызывающую alert
driver.findElement(By.id("alertexamples")).click();

// Переключаем контекст WebDriver на всплывающее окно
driver.switchTo().alert();

Получение текста всплывающего окна

В примере выше в последней строке мы переключили внимание Selenium на alert (так же будет работать и для confirm или prompt окон). В результате вызова метода alert() возвращается специальный класс Alert, который и помогает нам работать со всплывающими окнами.

Теперь мы можем написать полноценный тест, который проверит текст alert’а на соответствие ожидаемому. Для этого будем использовать метод getText() в классе Alert:

@Test
void testAlert() {
    driver.findElement(By.id("alertexamples")).click();

    // Получаем текст всплывающего окна
    String message = driver.switchTo().alert().getText();
    assertEquals("I am an alert box!", message);
}

Закрытие всплывающего окна

Наш пример довольно прост. На практике же зачастую недостаточно просто получить текст из окна, но продолжить работу. Чтобы этого добиться, нужно научиться закрывать всплывающие окна, используя Selenium.

Для практики будем использовать второй тип всплывающих окон — confirm. На нашей странице для тестирования выбор пользователя отображается в отдельном сообщении, которое появляется под кнопкой. Используем это для тестирования различных методов взаимодействия со всплывающим окном.

Всего в классе Alert есть два метода:

• accept() — с помощью этого метода Selenium «нажмет» на кнопку «ОК» всплывающего окна любого типа;

• dismiss() — такой же эффект, но будет нажата кнопка «Отмена» всплывающего окна.

@Test
void testAcceptConfirm() {
    driver.findElement(By.id("confirmexample")).click();

	// Принимаем окно (ОК)
    driver.switchTo().alert().accept();

    boolean result = Boolean.parseBoolean(driver.findElement(By.id("confirmreturn")).getText());
    String clickedButton = driver.findElement(By.id("confirmexplanation")).getText();

    assertTrue(result);
	assertTrue(clickedButton.contains("You clicked OK"));
}

@Test
void testDismissConfirm() {
    driver.findElement(By.id("confirmexample")).click();

	// Отклоняем окно (Отмена)
    driver.switchTo().alert().dismiss();

    boolean result = Boolean.parseBoolean(driver.findElement(By.id("confirmreturn")).getText());
    String clickedButton = driver.findElement(By.id("confirmexplanation")).getText();

	assertFalse(result);
	assertTrue(clickedButton.contains("You clicked Cancel"));
}

Ввод пользовательского варианта

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

Итак, наши два тестовых сценария:

• Нажать на кнопку, ввести сообщение и нажать «ОК»

• Нажать на кнопку, ввести сообщение и нажать «Отмена»

Для реализации этих сценариев необходимо познакомиться с новым методом класса Alert:

sendKeys() — ввести текст в окно типа prompt. Давайте посмотрим на тесты, которые используют этот метод:

@Test
void testAcceptPrompt() {
    driver.findElement(By.id("promptexample")).click();

    String text = "I like test automation!";

	// Вводим текст в окно с вопросом и нажимаем ОК
    driver.switchTo().alert().sendKeys(text);
    driver.switchTo().alert().accept();

    String message = driver.findElement(By.id("promptreturn")).getText();
    String clickedButton = driver.findElement(By.id("promptexplanation")).getText();

	assertEquals(message, text);
	assertTrue(clickedButton.contains("You clicked OK"));
}

@Test
void testDismissPrompt() {
    driver.findElement(By.id("promptexample")).click();

    String text = "I like test automation!";

	// Вводим текст в окно с вопросом и нажимаем Отмена
    driver.switchTo().alert().sendKeys(text);
    driver.switchTo().alert().dismiss();

    String message = driver.findElement(By.id("promptreturn")).getText();
    String clickedButton = driver.findElement(By.id("promptexplanation")).getText();

	assertEquals(message, "");
	assertTrue(clickedButton.contains("You clicked Cancel"));
}

Заключение

В этой статье мы разобрали работу со всплывающими окнами в Selenium:

• Узнали, что существуют разные типы всплывающих окон: alert, confirm, prompt

• Научились вызывать появление всплывающих окон с помощью команд Javascript

• Узнали, что в Selenium существует специальный класс для работы со всплывающими окнами — Alert

• C помощью метода getText() научились получать сообщение внутри всплывающего окна

• С помощью методов класса Alert accept() и dismiss() научились нажимать кнопки «ОК» и «Отмена» во всплывающих окнах и таким образом выбирать дальнейший путь пользователя

• C помощью метода sendKeys() научились вводить своё сообщение в окнах типа prompt

Как видно из кода, работа со всплывающими окнами не так уж и сложна, вся «магия» уже написана разработчиками библиотеки Selenium, нам остаётся лишь использовать предоставленные методы. Сохраняйте примеры кода, используйте их в своей повседневной работе и, конечно же, не переставайте автоматизировать!

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

За 5 месяцев команда Практикума (наставники, ревьюеры, кураторы) поможет вам:

• освоить основные инструменты и технологии автоматизации: PyCharm, Allure, Pytest, XPath, Git, CSS, DevTools, Selenium WebDriver, Консоль;

• научиться писать код на Python или Java и проводить юнит-тесты;

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

• добавить 5 проектов в портфолио.

А ещё вы получите консультацию по развитию карьеры и повысите шансы зарабатывать больше.

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