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

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

Но задумывались ли вы когда-нибудь о том, что происходит за кулисами, когда веб-страница загружается в Selenium WebDriver? Мы знаем о некоторых функциях WebDriver, используемых для перехода на веб-страницу, например, get() и navigate(), но определяют ли они, как загружается страница, или в фоне работают другие механизмы?

Ответ на этот вопрос – ДА! Это определяется чем-то, что называется Стратегия Загрузки Страницы (Page Load Strategy) в Selenium WebDriver. WebDriver использует Стратегию Загрузки Страницы для определения того, как будет загружаться веб-страница перед тем, как вы начнете выполнять дальнейшие взаимодействия; для выполнения следующих действий.

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

Так что приступим!

Что такое Стратегия Загрузки Страницы?

Стратегия Загрузки Страницы определяет, когда страница будет считаться загруженной для текущей сессии, когда автоматизированный код запускает браузер и использует методы get() или navigate().to(). По умолчанию Selenium WebDriver использует стандартную Стратегию Загрузки Страницы, которая является НОРМАЛЬНОЙ. Это означает ожидание, пока вся веб-страница и ее компоненты, такие как CSS, изображения, фреймы и т.д., будут загружены.

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

Использование Стратегии загрузки страницы было введено в качестве одной из функций Selenium 4. В отличие от предыдущих версий, она устраняет зависимость от использования стандартных тайм-аутов загрузки страницы.

Как работает Стратегия загрузки страницы?

Для определения, загружена ли страница или нет, Selenium использует свойство document.readyState. document.readyState описывает состояние загрузки документа. Здесь документ относится к любой веб-странице, загруженной в браузере.

Метод Ready State документа поддерживается всеми браузерами, что делает его надежным вариантом для использования с Стратегией загрузки страницы Selenium.

Так же, как у нас есть стандартная Стратегия загрузки страницы, стандартное document.readyState, на которое ждет Selenium WebDriver, является Complete.

Свойство readyState объекта документа браузера представляет текущее состояние процесса загрузки страницы. Свойство может иметь одно из следующих значений:

• loading – Страница еще загружается.
• interactive – Страница загружена, но подресурсы, такие как изображения, таблицы стилей и фреймы, могут еще загружаться.
• complete – Страница и все подресурсы загружены.

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

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

1. Перейдите на сайт. 
2. После загрузки сайта щелкните правой кнопкой мыши -> нажмите на Inspect -> откройте консоль и выполните команду document.readyState.

3. В результате этой команды вы увидите вывод как complete, что является текущим состоянием документа. Это означает, что вся страница загружена вместе с необходимыми ресурсами (т.е. изображениями, CSS и т.д.).

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

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

Так продемонстрировано, как работает document.readyState на практике. Вы также можете проверить производительность сайта при различных условиях сети с помощью LT BROWSER, инструмента для тестирования, дружественного для мобильных устройств. LT BROWSER — это дополнительный инструмент, предлагаемый LambdaTest, который позволяет протестировать реакцию вашего сайта на более чем 50 различных устройствах, включая смартфоны, планшеты и ноутбуки. Он также предоставляет возможность создания пользовательских разрешений, имитации различных условий сети и генерации отчетов о производительности с использованием Google Lighthouse. 

Давайте перейдем к пониманию этих значений и того, как они сопоставляются со значениями PageLoadStrategy.

Сопоставление PageLoadStrategy <> document.readyState

Состояние готовности документа может быть одним из следующих:

• Загрузка: Загрузка документа в процессе.
• Интерактивный: Документ был загружен и проанализирован, но загружаются подресурсы, такие как скрипты, изображения, CSS и фреймы. На этом этапе срабатывает событие DOMContentLoaded.
• Завершено: Документ и все подресурсы загружены. Это указывает на срабатывание события load.

Каждое стратегия загрузки страницы в PageLoadStrategy сопоставляется со значением document.readyState, исходя из которого WebDriver завершит метод навигации и продолжит выполнение следующих шагов.

Типы стратегий загрузки страницы в Selenium

Обычно в автоматизации веб-тестирования используются три типа стратегий загрузки страницы Selenium.

НОРМАЛЬНЫЙ (По умолчанию, если не указано)

Эта стратегия загрузки страницы Selenium заставляет WebDriver ждать, пока загрузка страницы не будет завершена, то есть пока не будет вызван событие загрузки.

Событие загрузки срабатывает, когда страница загружена, включая зависимые ресурсы, такие как CSS, JavaScript, iFrames и изображения.

Оно ожидает загрузки и анализа HTML-контента вместе со всеми подресурсами.

ЖЕЛАТЕЛЬНО

С этой стратегией загрузки страницы Selenium WebDriver ждет только до загрузки начальной страницы и срабатывания события DOMContentLoaded.

В отличие от события загрузки, событие DOMContentLoaded срабатывает, как только загружен DOM, без ожидания дополнительных ресурсов, таких как CSS, JavaScript, iFrames и изображения.

Оно ожидает только загрузки и анализа HTML-контента.

НЕТ

В этой стратегии загрузки страницы Selenium WebDriver не блокируется и продолжает выполнение теста.

Оно ожидает только загрузки HTML-контента.

Демонстрация: Настройка WebDriver с различными стратегиями загрузки страниц Selenium

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

Для этого мы напишем скрипт автоматического тестирования для следующего сценария.

1. Создайте экземпляр RemoteWebDriver, используя облачный Selenium Grid. Для этого мы будем использовать платформу LambdaTest.
2. Установите возможности WebDriver для конкретной стратегии PageLoadStrategy.
3. Дальше запускаем браузер с помощью драйвера и переходим сюда.
4. Для этого отметим время, за которое загружается страница, чтобы увидеть, как оно меняется для разных Стратегий загрузки страниц Selenium при одних и тех же условиях. Различия во времени загрузки страницы помогут лучше понять все стратегии.

Настройка проекта

Для этого блога о Стратегии загрузки страницы Selenium будет использоваться проект Maven с Java в IDE Eclipse. Если вам не нравится Eclipse, используйте любой другой IDE по своему выбору и выполните те же шаги. В проекте будут использоваться зависимости Selenium WebDriver и TestNG для автоматизации взаимодействия с элементами страницы и выполнения тестовых сценариев. Очень рекомендуется использовать последние стабильные версии для лучших результатов.

Давайте начнем.

1. Запустите Eclipse или выбранный вами IDE.
2. Создайте новый проект Maven и назовите его PageLoadStrategy.
3. Внутри папки src добавьте тестовый пакет и в нем класс Test, который назовите TestPageLoadStrategy. Этот класс будет содержать весь код для этого демонстрационного примера.

4. Обновите файл pom.xml, чтобы он содержал последние зависимости для использования TestNG в Selenium, как показано ниже, перед написанием фактического тестового случая.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>PageLoadStrategy</groupId>
 <artifactId>PageLoadStrategy</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <build>
   <sourceDirectory>src</sourceDirectory>
   <plugins>
     <plugin>
       <artifactId>maven-compiler-plugin</artifactId>
       <version>3.8.1</version>
       <configuration>
         <release>16</release>
       </configuration>
     </plugin>
   </plugins>
 </build>
 <dependencies>
   <dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>4.6.0</version>
   </dependency>
   <dependency>
       <groupId>org.testng</groupId>
       <artifactId>testng</artifactId>
       <version>7.7.0</version>
       <scope>test</scope>
   </dependency>
 </dependencies>
</project>

package test;


import java.net.MalformedURLException;
import java.net.URL;
import java.time.*;
import java.util.HashMap;
import org.openqa.selenium.PageLoadStrategy;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.Test;


public class TestPageLoadStrategy {


   public RemoteWebDriver driver = null;
   String username = "";
   String accessKey = "";
 
  ChromeOptions chromeOptions = new ChromeOptions();
   HashMap ltOptions = new HashMap();


   private void setup(String buildName) {


       chromeOptions.setPlatformName("Windows 10");
       chromeOptions.setBrowserVersion("108.0");


       ltOptions.put("project", "Page Load Strategy");
       ltOptions.put("selenium_version", "4.0.0");
       ltOptions.put("w3c", true);
       ltOptions.put("networkThrottling", "Regular 2G");
       ltOptions.put("build", buildName);
   }


   private void checkPageLoad() {
       try {
           driver = new RemoteWebDriver(
                   new URL("https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub"), chromeOptions);


           Instant startTime = Instant.now();
           System.out.println("Page load started at : " + startTime.toString());
           
           System.out.println("Navigating to the URL");
           driver.get("https://ecommerce-playground.lambdatest.io/");
          
           Instant endTime = Instant.now();
           System.out.println("Page load ended at : " + endTime.toString());


           Duration duration = Duration.between(startTime, endTime);
           System.out.println("Total PageLoad time : " + duration.toMillis() + " milli seconds");
       } catch (MalformedURLException e) {
           System.out.println("Invalid grid URL");
       } finally {
           driver.quit();
       }
   }


   @Test
   public void testNormalStrategy() {
       // Для установки PageLoadStrategy = Normal
       setup("Page Load Strategy - Normal");


       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NORMAL);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testEagerStrategy() {
       // Для установки PageLoadStrategy = Eager
       setup("Page Load Strategy - Eager");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.EAGER);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testNoneStrategy() {
       // Для установки PageLoadStrategy = None
       setup("Page Load Strategy - None");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NONE);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }
}

Использование облака Selenium Grid обеспечивает повышенную масштабируемость и скорость для автоматического тестирования Java и позволяет пользователям выполнять обширное параллельное и кросс-браузерное тестирование на нескольких комбинациях ОС и браузеров. 

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

Шаг 3. Создайте объект класса ChromeOptions. Этот класс используется для управления различными свойствами драйвера Chrome, который мы будем использовать для выполнения. Этот объект chromeOptions будет использоваться в каждом тестовом случае для установки PageLoadStrategy и затем передаваться в WebDriver.

Шаг 4. Создайте переменную HashMap и назовите её ltOptions. Это установит различные свойства для выполнения в облачной сетке LambdaTest.

Шаг 5. Далее идет метод setup(), используемый для установки нескольких базовых свойств в chromeOptions и ltOptions. Это общие свойства для всех трех случаев PageLoadStrategy.

Также обратите внимание, что мы используем свойство networkThrottling в LambdaTest для установки сети на Regular 2G со скоростью загрузки 250 Кбит/с и скоростью загрузки 50 Кбит/с. Это поможет лучше продемонстрировать время загрузки во всех сценариях, как обсуждалось в предыдущем разделе.

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

Этот метод принимает один параметр, buildName. Этот параметр используется для отображения имени сборки.

Шаг 6. Добавьте новую функцию, checkPageLoad(). В блоке try мы пишем код для подключения с RemoteWebDriver на платформе LambdaTest, используя свойства, определенные в chromeOptions.

После установления соединения создается объект класса Instant из пакета java.time для хранения и логирования времени начала, когда мы собираемся запустить браузер и начать навигацию. Затем вызывается драйвер для браузера и запускается тестовая веб-страница.

Как только веб-сайт считается загруженным в зависимости от установленной стратегии PageLoadStrategy, драйвер передает управление следующей команде, которая опять является объектом класса Instant, для получения текущего времени снова, времени окончания.

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

Вы заметите, что это время загрузки различается во всех наших тестовых случаях для разных стратегий.

A catch block is added next for the try block to handle the exception if it occurs. MalformedURLException is to catch the exception in case our RemoteWebDriver URL has invalid syntax. Once everything is done, we finally close the driver instance. To learn more about it, you can go through this blog on the most common exceptions in Selenium.

testNormalStrategy()

Это тестовый случай, демонстрирующий нормальную стратегию.

Во-первых, метод setup() определяет базовые свойства для браузера и платформы LambdaTest. Затем значение для PageLoadStrategy устанавливается как NORMAL в chromeOptions, после чего задаются другие возможности.

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

testEagerStrategy()

Это тестовый случай для демонстрации стратегии Eager.

Все шаги в этом случае аналогичны предыдущему. Единственное отличие заключается в том, что значение для PageLoadStrategy установлено как EAGER в chromeOptions, после чего вызывается метод checkPageLoad().

testNoneStrategy()

Это тестовый случай, демонстрирующий стратегию None.

Значение для PageLoadStrategy установлено как NONE в chromeOptions, а остальные шаги аналогичны ранее обсуждавшимся тестовым случаям.

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

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

Тестовый случай будет выполнен с использованием TestNG. Для выполнения следуйте указанным ниже шагам:

1. Щелкните правой кнопкой мыши имя тестового случая в Eclipse IDE.
2. Перейдите в Run Test и выберите TestNG Test, чтобы начать выполнение.

Давайте выполним случаи по одному и посмотрим, меняется ли время загрузки для каждой стратегии.

НОРМАЛЬНАЯ Стратегия

Вы можете заметить, что общее время загрузки страницы в этом случае составляет 70852 миллисекунды, так как мы используем сеть со скоростью обычного 2G. Установлено, что наибольшее значение должно быть среди трех случаев. Как уже было установлено, оно должно быть самым высоким среди всех трех. Мы можем проверить это, запустив случаи для Eager и None и сравнив их.

EAGER Стратегия

Как и ожидалось, время загрузки страницы (PageLoadTime), то есть 70231 миллисекунда, для стратегии Eager в той же ситуации сравнительно меньше, чем для Normal.

NONE Стратегия

Вы можете отметить, что время загрузки страницы (PageLoadTime) для стратегии None значительно меньше, чем у двух других, так как она не ожидает загрузки каких-либо ресурсов.

Вот быстрый обзор времени загрузки страницы для различных стратегий

Вы также можете просмотреть результаты выполнения, перейдя на панель управления LambdaTest, как показано ниже для каждой стратегии PageLoadStrategy:

Вы можете перейти в раздел Builds под Automation, чтобы просмотреть подробности вашего автоматизированного билда.

Сведения о билде для PageLoadStrategy.NORMAL:

Сведения о билде для PageLoadStrategy.EAGER:

Сведения о билде для PageLoadStrategy.NONE:

Заключение

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

I hope now you can implement these in your use cases more efficiently.

Счастливой загрузки!!