В наши дни вы вряд ли найдете сайт без предупреждений и всплывающих окон! Окна предупреждений предупреждают вас всякий раз, когда вы выполняете неправильное действие или вводите данные для доступа к веб-сайту. Эти предупреждения не позволяют вам выполнять другие функции браузера, пока предупреждение не будет устранено. Вот почему становится важным, чтобы вы обрабатывали их в своих сценариях автоматизации тестирования Selenium.
В этом уроке по обработке предупреждений в Selenium я покажу вам, как обрабатывать предупреждения и всплывающие окна, а также накладные модальные окна в WebDriverIO. Я также расскажу о различных типах предупреждений, с которыми вы можете столкнуться во время автоматизации, и о ключевых моментах, которые необходимо соблюдать при обработке предупреждений в Selenium с помощью WebDriverIO.
- Типы предупреждений в WebDriverIO
- Всплывающие уведомления
- Оповещение о подтверждении
- Всплывающая подсказка
- Накладной модал
- Обработка предупреждений в Selenium с помощью WebDriverIO
- acceptAlert()
- dismissAlert()
- getAlertText()
- sendAlertText()
- isAlertOpen()
- Обработка оверлейного модала с помощью WebDriverIO
- Завершаем!
Типы предупреждений в WebDriverIO
Оповещения и всплывающие окна довольно часто встречаются при разработке любого веб-сайта, и при выполнении автоматизации тестирования Selenium вам также придется с ними работать. Эти предупреждения, или, скорее, предупреждения javascript, представляют собой всплывающие окна, которые отвлекают ваше внимание от текущего браузера и заставляют вас читать их. Вы не сможете выполнить дальнейшие действия в браузере, если не знаете, как справиться с предупреждениями, это справедливо как для ручного, так и для автоматизированного тестирования.
Важно отметить, что вы не можете определить предупреждения с помощью devtools или XPath. Кроме того, поскольку их нельзя обрабатывать как окно, поэтому работа с ними становится немного сложной, но не волнуйтесь, вы найдете больше информации об этом в последнем разделе данного руководства по WebDriverIo.
В WebDriverIO есть три типа предупреждений, которые вам нужно обработать.
-
Всплывающее окно оповещения
-
Предупреждение о подтверждении
-
Всплывающее предупреждение
Всплывающие уведомления
Метод alert pop up или alert() выводит на экран окно оповещения с сообщением и кнопкой ‘OK’. Это предупреждение используется для информирования пользователя о некоторой информации. Здесь отображается только одна кнопка ‘OK’ с текстом информации. Здесь у пользователя есть только одна возможность нажать кнопку OK. Ниже приведен пример всплывающего оповещения.
Хотите проверить совместимость CSS Containment с браузерами? Свойство contain помогает вам создавать диапазоны стилей в вашем CSS, ограничивая область действия стилей браузера, макета и рисования.
Оповещение о подтверждении
Оповещение с подтверждением — это второй тип оповещения с сообщением, где пользователю предоставляется возможность нажать OK или Cancel. Вот пример предупреждения о подтверждении.
Всплывающая подсказка
Всплывающая подсказка — это последнее предупреждение, которое используется для того, чтобы дать пользователю возможность ввести данные для сайта. Здесь пользователь может ввести данные и нажать кнопку OK или нажать Cancel, чтобы не вводить данные. Ниже приведен пример всплывающей подсказки.
Помимо этих встроенных оповещений javascript, существует еще одно всплывающее окно, которое известно как модальное. Основное различие между предупреждением и модалом заключается в том, что предупреждение не может сработать без запрошенных действий, например, OK или Cancel. В модальном окне оно создается с помощью тега < div >, используя специальный код CSS. Этот модал может сработать, если щелкнуть мышью в другом месте, кроме модала.
Хотите проверить совместимость конических градиентов CSS с браузерами? Это метод, использующий свойство background-image и функцию repeating-linear-gradient() для определения конических или повторяющихся конических градиентов в качестве цветов в CSS.
Накладной модал
Этот модал построен с использованием фреймворка на стороне клиента, например, bootstrap, ReactJS. Модал может быть использован для отображения некоторой информации, всплывающих окон и форм. Нет ничего особенного
Вот пример Overlay Modal:
Теперь, когда вы знакомы с различными видами alert и modal, доступными в javascript. Я расскажу вам больше об обработке оповещений в Selenium в этом учебнике по WebDriverIO.
Обработка предупреждений в Selenium с помощью WebDriverIO
Если вы знакомы с обработкой предупреждений в Selenium для автоматизации тестирования с помощью других фреймворков, вы можете предположить, что вам придется перейти к обработке предупреждений до обработки предупреждений в Selenium. Например, в Java вам нужно создать метод switchTo(), а затем обратиться к методу alert(), чтобы выполнить действие. Здесь дело обстоит иначе, и вы увидите, как это сделать по мере дальнейшего продвижения в этом учебнике по WebDriverIO. Для любителей Selenium C# мы уже писали статью об обработке предупреждений в Selenium C#, ознакомьтесь с ней.
Например,
driver.switchTo().alert().accept();
Аналогично, методы dismiss(), sendkeys() также доступны.
Поскольку вам не нужно использовать метод switchTo() перед обработкой предупреждений в Selenium, автоматизация тестирования Selenium становится немного проще.
Для обработки предупреждений в Selenium для автоматизированного тестирования браузера вам понадобятся следующие методы:
-
acceptAlert()
-
отменить предупреждение()
-
getAlertText()
-
sendAlertText()
-
isAlertOpen()
Большим преимуществом WebDriverIO является то, что доступ к оповещениям можно получить непосредственно из объекта драйвера или браузера для автоматизации тестирования Selenium. Например
browser.acceptAlert();
browser.dismissAlert();
browser.getAlertText();
browser.sendAlertText();
browser.isAlertOpen();
acceptAlert()
Метод acceptAlert() аналогичен driver.switchTo().alert().accept() selenium java. Он помогает пользователям нажать на кнопку ‘OK’ во всплывающем окне Alert.
Синтаксис:
browser.acceptAlert();
Пример:
describe("This is example of Alert pop up ", function () {
it("Simple Alert pop up", function () {
browser.url("http://the-internet.herokuapp.com/");
browser.pause(5000);
$("=JavaScript Alerts").click();
browser.pause(5000);
$(".//button[text()='Click for JS Alert']").click();
browser.pause(5000);
browser.acceptAlert();
browser.pause(5000);
});
});
dismissAlert()
Метод dismissAlert() используется для нажатия на кнопку ‘Cancel’. Если сравнить этот метод с методом в selenium java, то он выглядит как driver.switchTo().alert().dismiss()
Синтаксис:
browser.dismissAlert();
Пример:
describe("This is example of Alert pop up ", function () {
it("comfirmation pop up", function () {
browser.url("http://the-internet.herokuapp.com/");
browser.pause(5000);
$("=JavaScript Alerts").click();
browser.pause(5000);
$(".//button[text()='Click for JS Confirm']").click();
browser.pause(5000);
browser.dismissAlert();
browser.pause(5000);
});
});
getAlertText()
Метод getAlertText() используется для чтения сообщения, написанного на всплывающем экране. Он аналогичен driver.switchTo().alert().getText() в Selnium java.
Синтаксис:
browser.getAlertText();
Пример:
describe("This is example of Alert pop up ", function () {
it("getAlertText() pop up", function () {
browser.url("http://the-internet.herokuapp.com/");
browser.pause(5000);
$("=JavaScript Alerts").click();
browser.pause(5000);
$(".//button[text()='Click for JS Confirm']").click();
browser.pause(5000);
const msg = browser.getAlertText();
console.log(msg);
browser.pause(5000);
browser.acceptAlert();
browser.pause(5000);
});
});
sendAlertText()
Метод sendAlertText() используется для отправки ввода в текстовое поле, отображаемое на всплывающей подсказке. Этот метод имеет один параметр, который передается для отправки текста в поле ввода. Метод sendAlertText() аналогичен driver.switchTo().alert().sendKeys() в Selenium Java.
Синтаксис:
browser.sendAlertText(String str)
Пример:
describe("This is example of Alert pop up ", function () {
it("sendAlertText() Pop up ", function () {
browser.url("http://the-internet.herokuapp.com/");
browser.pause(5000);
$("=JavaScript Alerts").click();
browser.pause(5000);
$(".//button[text()='Click for JS Prompt']").click();
browser.pause(5000);
browser.sendAlertText("This is Input Text");
browser.pause(5000);
browser.acceptAlert();
browser.pause(5000);
});
});
isAlertOpen()
Метод isAlertOpen() используется для проверки того, видно ли оповещение или нет. Этот метод возвращает пользователю булево значение, на основании которого пользователь может принять решение.
Синтез:
browser.isAlertOpen()
Пример:
describe("This is example of Alert pop up ", function () {
it("isAlertOpen check pop up", function () {
browser.url("http://the-internet.herokuapp.com/");
browser.pause(5000);
$("=JavaScript Alerts").click();
browser.pause(5000);
$(".//button[text()='Click for JS Alert']").click();
browser.pause(5000);
const isOpen = browser.isAlertOpen();
if (isOpen) {
console.log("===========>" + isOpen);
browser.acceptAlert();
browser.pause(5000);
}
});
});
Хотите проверить совместимость браузера с CSS color-adjust? color-adjust — это свойство CSS, которое можно использовать для принудительной печати фоновых цветов и изображений, указывая, является ли устройство вывода цветным или монохромным.
Обработка оверлейного модала с помощью WebDriverIO
К настоящему времени вы уже знаете разницу между оповещениями и Overlay Modal в этом учебнике по WebDriverIO. Оповещение может быть закрыто только предусмотренным действием, в то время как оверлейный модал может быть закрыт щелчком в любом месте на фоне. Сейчас я покажу вам, как автоматизировать Overlay Modal с помощью WebDriverIO.
При автоматизации модала вам не нужно работать над специальным кодом или классом. Вы просто находите объект элемента непосредственно с помощью селектора WebDriverIO и выполняете операцию.
Вот как вы можете работать с Overlay Modal в Selenium с помощью WebDriverIO.
describe("This is example of Modal pop up ", function () {
it("Handle Modal pop up", function () {
browser.url("https://jquerymodal.com/");
browser.pause(5000);
$(".//a[@href='#ex1']").click();
browser.pause(5000);
$(".//a[@href='#close-modal']").click();
});
});
Завершаем!
В этом руководстве по WebDriverIO я пролил свет на обработку предупреждений в Selenium вместе с Overlay Modal с помощью WebdriverIO. Я также сравнил обработку предупреждений в Selenium с помощью WebDriverIO с другими фреймворками. Я показал, как в WebDriverIO вы можете работать с ними без переключения на них в отличие от других технологий, таких как Selenium Java.
Далее я рассмотрел 5 методов WebDriverIO для обработки предупреждений в Selenium, это acceptAlert(), dismissAlert(), getAlertText(), sendAlertText() и isAlertOpen. Эти методы помогают автоматизировать всплывающие уведомления, но не помогают в работе с оверлейным модалом. Вы можете получить доступ к каждому элементу модала, чтобы напрямую использовать селектор для отдельных элементов и выполнить операцию. Если вы хотите узнать о командах браузера в WebDriverIO, вы можете обратиться к статье по ссылке.
Надеюсь, вам понравилось читать это руководство по WebDriverIO, посвященное обработке предупреждений в Selenium. В случае возникновения вопросов или сомнений обращайтесь к нам в разделе комментариев ниже. Давайте автоматизировать!!!?