Как использовать JavaScriptExecutor в Selenium

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

Тем не менее, существуют сценарии, когда фактические команды Selenium WebDriver не работают так, как ожидалось, так как Selenium не может взаимодействовать с WebElements напрямую. Здесь на помощь приходит JavaScriptExecutor.

В этом блоге мы обсудим JavaScriptExecutor в Selenium и как начать с практических случаев и примеров.

Что такое JavaScriptExecutor в Selenium?

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

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

org.openqa.selenium.JavascriptExecutor

JavaScriptExecutor в Selenium предоставляет два метода для взаимодействия с WebElements:

• executeScript() – этот метод выполняет JavaScript в контексте текущего выбранного окна или фрейма в Selenium. Скрипт будет выполнен как тело анонимной функции.
• executeAsyncScript() – Этот метод выполняет асинхронный фрагмент JavaScript в контексте текущего выбранного окна или фрейма в Selenium. Скрипт будет выполнен как тело анонимной функции.

Примечание: Основное различие между методами executeScript() и executeAsyncScript() заключается в том, что скрипт, вызванный с помощью executeAsyncScript(), должен сигнализировать о завершении выполнения с помощью функции callback().

Вызов методов с использованием executeAsyncScript() в основном используется, когда необходимо выполнить ожидание в браузере под тестом или когда тесты должны быть синхронизированы в приложении AJAX.

Почему использовать JavaScriptExecutor в Selenium?

Существуют сценарии, когда некоторые команды WebDriver не работают ожидаемым образом по различным причинам, как указано ниже:

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

В этих случаях мы обращаемся за помощью к JavaScriptExecutor в Selenium.

Традиционно мы используем локаторы Selenium такие как ID, Name, CSS Selector, XPath и т. д., для нахождения WebElement. Если эти локаторы не работают, или вы работаете с сложным XPath, в таких случаях JavaScriptExecutor помогает найти нужный WebElement.

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

Как известно, в браузерах реализован JavaScript и они могут понимать команды JavaScript. Поэтому понимание JavaScriptExecutor в Selenium позволит выполнять ряд операций более эффективно.

Основы JavaScriptExecutor в Selenium

Цель этого раздела – дать общее представление о шагах реализации JavaScriptExecutor в Selenium. Для демонстрации мы будем использовать Java в качестве предпочтительного языка программирования.

Давайте рассмотрим основные шаги.

1. Импортируйте пакет, связанный с JavaScriptExecutor:

import org.openqa.selenium.JavascriptExecutor;

2. Используйте JavaScriptExecutor, создайте ссылку на интерфейс и присвойте ее экземпляру WebDriver, приведя тип:

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Вызовите методы executeAsyncScript() или executeScript() . Например, синтаксис для executeScript() приведен ниже:

js.executeScript(java.lang.String script, java.lang.Object... args)

Демонстрация: Использование JavaScriptExecutor в Selenium

Прежде чем мы рассмотрим, как использовать JavaScriptExecutor в Selenium, выполните следующие предварительные требования:

• Создайте новый проект Maven с использованием IntelliJ IDE
• Добавьте последнюю зависимость Selenium WebDriver в pom.xml
• Добавьте последнюю зависимость TestNG в pom.xml

Мы будем использовать веб-сайт LambdaTest eCommerce Playground для демонстрации работы JavaScriptExecutor в Selenium путем запуска тестов в локальном браузере Chrome.

Сценарий теста 1

Наша цель – написать простой код, иллюстрирующий пример с использованием метода executeScript() в следующем тестовом сценарии.

1. Перейти на страницу Вход в учетную запись веб-сайта LambdaTest eCommerce Playground.
2. Ввести действительные учетные данные и нажать на кнопку Вход, выделив поле красной рамкой.
3. Вывести заголовок страницы и доменное имя.
4. Утверждать, что заголовок страницы “Моя учетная запись” отображается при успешном входе в систему.

Реализация

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

Давайте объявим WebDriver на уровне класса, так как нам понадобится он в обоих методах: методе setup() для запуска сеанса драйвера и методе tearDown() для грациозного завершения сеанса.

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

    //...

}

Создадим новый метод setup(), который будет создавать экземпляр класса WebDriver и соответственно устанавливать конфигурацию для запуска тестов в локальном браузере Chrome.

@BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

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

@AfterTest

    public void tearDown () {

        driver.quit ();

    }

Наконец, когда тест выполняется, будет вызван метод tearDown(), который закроет сеанс RemoteWebDriver грациозно.

Теперь добавим метод testJavaScriptExecutorCommand() в тот же тестовый класс для реализации обсуждаемого сценария тестирования.

@Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        //....

      }

Код переходит на страницу входа на сайт LambdaTest eCommerce Playground. Следующая строка приводит экземпляр WebDriver к JavascriptExecutor, чтобы можно было выполнять команды JavaScript в браузере.

WebElement emailAddressField = driver.findElement (By.id ("input-email"));

js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

emailAddressField.sendKeys ("[email protected]");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

Затем он находит поле emailAddressField, используя стратегию локатора id. Затем используется команда JavaScriptExecutor для выделения границы поля электронной почты красным цветом.

WebElement passwordField = driver.findElement (By.id ("input-password"));

js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

passwordField.sendKeys ("Password123");

js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

Затем поле пароля находится и выделяется красной рамкой. Это выделение помогает понять, какие шаги выполняются во время выполнения автоматизированного теста.

WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

js.executeScript ("arguments[0].click();", loginBtn);

Точно так же кнопка “Вход” находится с использованием стратегии CSS Selector и также выделена.

String titleText = js.executeScript ("return document.title;").toString ();

System.out.println ("Page Title is: " + titleText);

​

String domainName = js.executeScript ("return document.domain;").toString ();

System.out.println ("Domain is: " + domainName);

Затем заголовок страницы и доменное имя находятся с использованием JavaScriptExecutor и выводятся в консоль.

String myAccountHeader = driver.findElement (By.cssSelector ("#content h2")).getText ();

assertEquals (myAccountHeader, "My Account");

Наконец, находится заголовок страницы “Мой аккаунт”, который отображается после успешного входа, и выполняется проверка, чтобы убедиться, что он отображает текст “Мой аккаунт“.

Вот полный код из класса TestJavaScriptExecutor:

public class TestJavaScriptExecutor {

​

    private WebDriver driver;

​

    @BeforeTest

    public void setup () {

        driver = new ChromeDriver ();

        driver.manage ()

            .window ()

            .maximize ();

        driver.manage ()

            .timeouts ()

            .implicitlyWait (Duration.ofSeconds (30));

    }

​

    @AfterTest

    public void tearDown () {

        driver.quit ();

    }

​

    @Test

    public void testJavaScriptExecutorCommand () {

        driver.get ("https://ecommerce-playground.lambdatest.io/index.php?route=account/login");

​

        JavascriptExecutor js = (JavascriptExecutor) driver;

        WebElement emailAddressField = driver.findElement (By.id ("input-email"));

        js.executeScript ("arguments[0].style.border='3px solid red'", emailAddressField);

        emailAddressField.sendKeys ("[email protected]");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", emailAddressField);

​

        WebElement passwordField = driver.findElement (By.id ("input-password"));

        js.executeScript ("arguments[0].style.border='3px solid red'", passwordField);

        passwordField.sendKeys ("Password123");

        js.executeScript ("arguments[0].style.border='2px solid #ced4da'", passwordField);

​

        WebElement loginBtn = driver.findElement (By.cssSelector ("input.btn"));

        js.executeScript ("arguments[0].style.border='3px solid red'", loginBtn);

        js.executeScript ("arguments[0].click();", loginBtn);

​

        String titleText = js.executeScript ("return document.title;")

            .toString ();

        System.out.println ("Page Title is: " + titleText);

​

        String domainName = js.executeScript ("return document.domain;")

            .toString ();

        System.out.println ("Domain is: " + domainName);

​

        String myAccountHeader = driver.findElement (By.cssSelector ("#content h2"))

            .getText ();

        assertEquals (myAccountHeader, "My Account");

    }

Тестовое выполнение

На следующем скриншоте из IntelliJ IDE показано, что тест был успешно выполнен.

Сценарий тестирования 2

Наша цель – написать простой код, чтобы проиллюстрировать пример, используя метод executeAsyncScript() с помощью следующего тестового сценария.

1. Перейти на веб-сайт Площадка электронной торговли LambdaTest.
2. Прокрутить вниз до нижней части домашней страницы.
3. Утверждать, что текст “ИЗ БЛОГА” отображается в нижней части страницы.

Реализация:

Создайте новый метод testExecuteAsyncScript() в существующем классе TestJavaScriptExecutor.

@Test

    public void testExecuteAsyncScript() {

        driver.get("https://ecommerce-playground.lambdatest.io");

        JavascriptExecutor js = (JavascriptExecutor) driver;

        js.executeAsyncScript("var callback = arguments[arguments.length - 1];" + "window.scrollBy(0,document.body.scrollHeight); + callback()");

​

        String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

        assertEquals(fromTheBlogText, "FROM THE BLOG");

    }

Код перейдет на домашнюю страницу веб-сайта LambdaTest eCommerce Playground. Затем будет вызван метод executeAsyncScript() объекта JavaScriptExecutor, где будет выполнено действие по прокрутке окна.

В методе executeAsyncScript() выполненные скрипты должны явно сигнализировать о завершении, вызывая предоставленный метод callback().

JavascriptExecutor js = (JavascriptExecutor) driver;

 js.executeAsyncScript("var callback = arguments[arguments.length - 1];" 

+ "window.scrollBy(0,document.body.scrollHeight); + callback()");

После прокрутки вниз до конца окна будет найден текст “FROM THE BLOG”, и будет выполнена проверка на него.

String fromTheBlogText = driver.findElement(By.cssSelector("#entry_217991 > h3")).getText();

 assertEquals(fromTheBlogText, "FROM THE BLOG");

Выполнение теста

На следующем снимке экрана показано, что тест выполнен успешно.

Команды для использования JavaScriptExecutor в Selenium

Давайте рассмотрим несколько сценариев, которые мы могли бы обработать с помощью интерфейса JavaScriptExecutor для автоматизации тестов Selenium.

Чтобы нажать на кнопку:

js.executeScript("document.getElementById('enter element id').click();");

//or

js.executeScript("arguments[0].click();", okButton);

Чтобы ввести текст в текстовое поле без использования метода sendKeys() :

js.executeScript("document.getElementById(id').value='someValue';");

js.executeScript("document.getElementById('Email').value='SeleniumTesting.com';");

Для обработки флажка, передавая значение true или false:

js.executeScript("document.getElementById('enter element id').checked=false;");

Для создания всплывающего окна предупреждения в Selenium WebDriver:

js.executeScript("alert('Welcome To Selenium Testing');");

Для обновления окна браузера с помощью JavaScript:

js.executeScript("history.go(0)");

Для получения внутреннего текста всей веб-страницы в Selenium:

String innerText = js.executeScript(" return document.documentElement.innerText;").toString();

System.out.println(innerText);

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

String titleText =  js.executeScript("return document.title;").toString();

System.out.println(titleText);

Для получения доменного имени:

String domainName=  js.executeScript("return document.domain;").toString();

System.out.println(domainName);

​

Для получения URL веб-страницы:

String url=  js.executeScript("return document.URL;").toString();

System.out.println(url);

Для получения высоты и ширины веб-страницы:

js.executeScript(“return window.innerHeight;”).toString();

js.executeScript(“return window.innerWidth;”).toString();

Для перехода на другую страницу с помощью JavaScript:

js.executeScript("window.location = 'https://www.google.com");

Для выполнения прокрутки в приложении с помощью Selenium:

• Чтобы прокрутить страницу вертикально на 500 пикселей:
  Java

   

   js.executeScript(“window.scrollBy(0,500)”);

• Для прокрутки страницы вертикально до конца:
  Java

   

  js.executeScript(“window.scrollBy(0,document.body.scrollHeight)”);

Добавление элемента в модель объекта документа (DOM):

js.executeScript("var btn=document.createElement('newButton');"

+ "document.body.appendChild(btn);");

​

Для получения теневого корня в DOM:

WebElement element = driver.findElement(By.id("shadowroot"));

js.executeScript("return arguments[0].shadowRoot", element);

Заключение

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

В этом блоге мы рассмотрели, как использовать JavaScriptExecutor в Selenium и его различные методы. Кроме того, мы рассмотрели различные сценарии для достижения эффективного решения с использованием различных методов, а также практические примеры.