Een Compleet Handboek voor de Selenium Pagina-Laadstrategie

Webpagina-automatisering is sterk gegroeid en de meesten van ons hebben eraan gewerkt. Het is iets waar we bijna regelmatig aan werken, waarbij we verschillende scenario’s automatiseren en door veel webpagina’s navigeren.

Maar vraagt u zich wel eens af wat er achter de schermen gebeurt wanneer een webpagina wordt geladen in Selenium WebDriver? We kennen een aantal WebDriver-functies die worden gebruikt om naar een webpagina te navigeren, zoals get() en navigate(), maar bepalen ze hoe een pagina wordt geladen, of is er achter de schermen nog een andere functionaliteit aan het werk?

Het antwoord hierop is JA! Dit wordt bepaald door iets dat de Pagina-laadstrategie in Selenium WebDriver wordt genoemd. WebDriver gebruikt de Pagina-laadstrategie om te bepalen hoe de webpagina zal worden geladen voordat u verdergaat met verdere interacties; om de volgende acties uit te voeren.

In deze blog over Selenium Pagina-laadstrategie zullen we dieper ingaan op deze strategie en proberen te begrijpen wat de verschillende typen zijn en hoe ze kunnen worden geïmplementeerd in automatiseringscode.

Dus laten we beginnen!

Wat is Pagina-laadstrategie?

Pagina-laadstrategie definieert wanneer de pagina zou moeten worden beschouwd als geladen voor de huidige sessie wanneer de automatiseringscode een browser lanceert en de methoden get() of navigate().to() gebruikt. Standaard gebruikt Selenium WebDriver de standaard Pagina-laadstrategie, die NORMAL is. Dit betekent dat er wordt gewacht tot de hele webpagina en zijn componenten, zoals CSS, afbeeldingen, frames, enzovoort, zijn geladen.

Als de pagina langer duurt om te laden vanwege de bovenstaande componenten (of door throttling netwerkomstandigheden) en is niet belangrijk voor uw script, kunt u deze wijzigen in EAGER of NONE om de uitvoering te versnellen. Deze waarde is van toepassing op de hele sessie, dus kies er verstandig voor uw project anders kan het leiden tot testonzekerheid.

Het gebruik van Page Load Strategy is geïntroduceerd als onderdeel van Selenium 4-functies. In tegenstelling tot eerdere versies, verwijdert het de afhankelijkheid van het gebruik van standaard pagina-laden time-outs.

Hoe werkt de Page Load Strategy?

Om te bepalen of de paginalading is voltooid of niet, maakt Selenium gebruik van de document.readyState-eigenschap. De document.readyState beschrijft de ladenstatus van het document. Een document verwijst hier naar elke webpagina die in de browser wordt geladen.

De Ready State-methode van Document wordt ondersteund door alle browsers, waardoor het een betrouwbare optie is voor gebruik met Selenium’s PageLoadStrategy.

Net zoals we standaard PageLoadStrategy hebben, is de standaard document.readyState waarvoor Selenium WebDriver wacht Complete.

De readyState-eigenschap van een browser’s documentobject vertegenwoordigt de huidige status van het paginaladenproces. De eigenschap kan een van de volgende waarden hebben:

• laden – De pagina is nog aan het laden.
• interactief – De pagina is geladen, maar subbronnen zoals afbeeldingen, stijlbladen en frames kunnen nog steeds aan het laden zijn.
• voltooid – De pagina en alle subbronnen zijn geladen.

Je kunt de readyState-eigenschap geban om te bepalen wanneer een pagina volledig is geladen en klaar is om te worden bewerkt door JavaScript of andere middelen. Bijvoorbeeld, in Selenium, kun je de readyState-eigenschap gebruiken om te bepalen wanneer een pagina is geladen, en de elementen op de pagina kunnen worden geïnteractieerd met behulp van Selenium-commando’s.

Voordat we verder gaan, laten we ons iets meer inzicht geven in de readyState van het document met een korte oefening.

1. Navigeer naar de site. 
2. Zodra de site is geladen, klik met de rechtermuisknop -> klik op Inspect -> open de console en voer de opdracht document.readyState uit.

3. Als resultaat van deze opdracht zul je de uitvoer “complete” zien, wat de huidige staat van het document is. Dit betekent dat de hele pagina is geladen met de benodigde resources (dat wil zeggen, afbeeldingen, CSS, enz.).

4. Vervolgens, ververs de pagina en druk weer op enter op de bovenstaande opdracht. Je zult de ladenstoestand van het document op dit moment kunnen zien, zoals hieronder.

Als je de ladenstoestand na 4-5 verversingen niet kunt zien, probeer dan de internetcondities te vertragen door Network in te stellen op tragere opties. Je kunt er meer over leren via deze blog over het testen van websites onder verschillende netwerkomstandigheden. We zullen dezelfde aanpak ook gebruiken in de demonstratie.

Dus dit toont hoe document.readyState in de praktijk werkt. U kunt ook de prestaties van de website onder verschillende netwerkomstandigheden controleren met LT Browser, een mobiel-vriendelijke testgereedschap. LT Browser is een aanvullend hulpmiddel aangeboden door LambdaTest, waarmee u de responsiviteit van uw website kunt testen op meer dan 50 verschillende apparaten, waaronder smartphones, tablets en laptops. Het biedt ook de mogelijkheid om aangepaste resoluties te maken, verschillende netwerkomstandigheden na te bootsen en prestatierapporten te genereren met behulp van Google Lighthouse. 

Laten we verder gaan om deze waarden te begrijpen en hoe ze zijn toegewezen aan PageLoadStrategy-waarden.

PageLoadStrategy <> document.readyState Mapping

De readyState van het document kan een van de volgende zijn:

• Laden: Documentlading is aan de gang.
• Interactief: Het document is geladen en geparsteerd, maar de subresource zoals scripts, afbeeldingen, CSS en frames worden nog steeds geladen. Op dit moment wordt het DOMContentLoaded-evenement geactiveerd.
• Voltooid: Document en alle subresources zijn volledig geladen. Dit geeft aan dat het laden -evenement wordt geactiveerd.

Elke PageLoadStrategy is toegewezen aan een bepaalde document.readyState-waarde, afhankelijk waarvan WebDriver de navigatiemethode zal voltooien en de volgende stappen zal uitvoeren.

Typen Pagina-Laden Strategieën in Selenium

Er zijn over het algemeen drie typen Selenium Pagina-Laden Strategieën die kunnen worden gebruikt in webautomatisering.

NORMAL (Standaard, Indien Niet Gespecificeerd)

Deze Selenium Page Load Strategy zorgt ervoor dat de WebDriver wacht tot de pagina volledig is geladen, dat wil zeggen, wanneer het load-evenement wordt geactiveerd.

Het load-evenement wordt geactiveerd wanneer de pagina is geladen, inclusief afhankelijke bronnen zoals CSS, JavaScript, iFrames en afbeeldingen.

Het wacht tot de HTML-inhoud is gedownload en geanalyseerd, samen met alle onderliggende bronnen.

EAGER

Met deze Selenium Page Load Strategy wacht de WebDriver alleen tot de oorspronkelijke pagina is geladen en het DOMContentLoaded-evenement wordt geactiveerd.

In tegenstelling tot het load-evenement, wordt het DOMContentLoaded-evenement geactiveerd zodra de DOM is geladen zonder te wachten op extra bronnen zoals CSS, JavaScript, iFrames en afbeeldingen.

Het wacht alleen tot de HTML-inhoud is gedownload en geanalyseerd.

NONE

In deze Selenium Page Load Strategy wordt de WebDriver niet geblokkeerd en gaat verder met de testuitvoering.

Het wacht alleen tot de HTML-inhoud is gedownload.

Demonstratie: WebDriver Setup met verschillende Selenium Page Load Strategies

Nu we een basiskennis hebben van verschillende Selenium Page Load Strategies, laten we kijken naar codevoorbeelden om te begrijpen hoe deze worden geïmplementeerd.

Om dit te doen, zullen we een automatiseringsscript schrijven voor het volgende scenario.

1. Maak een instantie van RemoteWebDriver aan met behulp van een cloud-gebaseerde Selenium Grid. Hiervoor gebruiken we het LambdaTest-platform.
2. Stel WebDriver-mogelijkheden in voor een specifieke PageLoadStrategy.
3. Vervolgens gebruiken we de driver om de browser te starten en naar hier.
4. Navigeren. Hiervoor noteren we de tijdsduur waarin de pagina is geladen om te zien hoe deze varieert voor verschillende Selenium Page Load Strategies onder dezelfde omstandigheden. Verschillen in paginaladerijd helpen om meer duidelijkheid te krijgen over alle strategieën.

Project Setup

Voor deze blog over Selenium Page Load Strategy gebruiken we een Maven-project met Java in Eclipse IDE. Als je geen fan bent van Eclipse, gebruik dan een IDE naar keuze en voer dezelfde stappen uit. Het zal Selenium WebDriver en TestNG-afhankelijkheden gebruiken om interactie met de pagina-elementen te automatiseren en testcase-uitvoering uit te voeren. Het wordt sterk aanbevolen om de nieuwste stabiele versies te gebruiken voor betere resultaten.

Laten we nu beginnen.

1. Start Eclipse of de IDE naar keuze.
2. Maak een nieuw Maven-project aan en noem het PageLoadStrategy.
3. Voeg binnen de src-map een testpakket toe en daarin een Testklasse met de naam TestPageLoadStrategy. Deze klasse zal de volledige code voor deze demonstratie bevatten.

4. Werk het pom.xml-bestand bij om de nieuwste afhankelijkheden te hebben voor het gebruik van TestNG in Selenium, zoals hieronder weergegeven, voordat je de eigenlijke testcase schrijft.

<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() {
       // Om PageLoadStrategy = Normal in te stellen
       setup("Page Load Strategy - Normal");


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


   @Test
   public void testEagerStrategy() {
       // Om PageLoadStrategy = Eager in te stellen
       setup("Page Load Strategy - Eager");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.EAGER);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testNoneStrategy() {
       // Om PageLoadStrategy = None in te stellen
       setup("Page Load Strategy - None");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NONE);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }
}

Het gebruik van cloud Selenium Grid biedt verhoogde schaalbaarheid en snelheid voor Java-automatiseringstesten en stelt gebruikers in staat om uitgebreide parallelle en cross-browser testen uit te voeren over verschillende OS- en browsercombinaties. 

Stap 2. Zoals vermeld in de vorige stap, aangezien we het LambdaTest-platform gebruiken, moeten we het gebruikersnaam en toegangssleutel voor on咱rs gebruiker opgeven om verbinding te maken met de cloud hub. U kunt deze gegevens onder de LambdaTest-profielsectie vinden nadat uw account is aangemaakt.

Stap 3. Maak een object van de ChromeOptions-klasse. Deze klasse wordt gebruikt om verschillende eigenschappen van de Chrome-driver te manipuleren, die we zullen gebruiken voor uitvoering. Dit chromeOptions-object wordt in elke testcase gebruikt om de PageLoadStrategy in te stellen en vervolgens doorgegeven aan WebDriver.

Stap 4. Maak een HashMap-variabele aan en noem deze ltOptions. Dit zal verschillende eigenschappen instellen voor de LambdaTest cloud grid uitvoering.

Stap 5. Volgende is de setup() methode, die wordt gebruikt om enkele basis eigenschappen in chromeOptions en ltOptions in te stellen. Dit zijn de gemeenschappelijke eigenschappen van alle drie de PageLoadStrategy gevallen.

Vergeet ook niet dat we de networkThrottling eigenschap van LambdaTest gebruiken om het netwerk in te stellen op Regular 2G met een downloadsnelheid van 250 Kbps en een uploadsnelheid van 50 Kbps. Dit zal helpen de laad tijd beter te demonstreren in alle scenario’s, zoals besproken in de vorige sectie.

Het gebruik van de LambdaTest-platform biedt deze voordelen waar je rechtstreeks de browser en versie gegevens kunt selecteren, en je capaciteiten worden automatisch gegenereerd met behulp van de LambdaTest Capabilities Generator. Je hoeft ze alleen maar toe te voegen aan de code.

Deze methode neemt één parameter, buildName. Deze parameter wordt gebruikt om de buildnaam weer te geven.

Stap 6. Voeg een nieuwe functie toe, checkPageLoad(). In de try-blok schrijven we de code om te verbinden met RemoteWebDriver op het LambdaTest-platform met behulp van de in chromeOptions gedefinieerde eigenschappen.

Nadat de verbinding tot stand is gebracht, wordt een object van de Instant klasse uit het Java.time-pakket gemaakt om de starttijd op te slaan en te loggen wanneer we de browser gaan starten en navigeren. Vervolgens wordt een driver aangeroepen voor de browser en wordt de testwebsite gelanceerd.

Zodra de website wordt beschouwd als geladen, afhankelijk van de ingestelde PageLoadStrategy, geeft de driver de controle door aan de volgende opdracht, die op zijn beurt weer een object van de Instant klasse is, om de huidige tijd opnieuw te krijgen, de eindtijd.

Op dit moment is de pagina geladen volgens ons aangevraagde strategie en hebben we de start- en eindtijden. De tijd die nodig is om een webpagina te laden in milliseconden kan worden bepaald door het verschil tussen twee punten te vinden. De Duration klasse, die deel uitmaakt van hetzelfde pakket, wordt hiervoor gebruikt.

Je zult merken dat deze laadtijd verschilt in al onze testgevallen voor verschillende strategieën.

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()

Dit is het testgeval om de Normale strategie te demonstreren.

Eerst definieert de setup() methode de basis eigenschappen voor de browser en de LambdaTest-platform. Vervolgens wordt hier in de chromeOptions de waarde voor PageLoadStrategy ingesteld als NORMAL, gevolgd door het instellen van andere capaciteiten.

Ten slotte wordt de checkPageLoad() methode aangeroepen om de webpagina te laden en de laadtijd te loggen, die we vervolgens zullen vergelijken voor elke strategie in de uitvoeringssectie.

testEagerStrategy()

Dit is het testgeval om de Eager strategie te demonstreren.

Alle stappen, in dit geval, zijn gelijk aan de vorige. Het enige verschil is dat de waarde voor PageLoadStrategy hier in de chromeOptions wordt ingesteld als EAGER, gevolgd door het aanroepen van de checkPageLoad() methode.

testNoneStrategy()

Dit is het testgeval om de None-strategie te demonstreren.

De waarde voor PageLoadStrategy is hier in de chromeOptions ingesteld als NONE, en de rest van de stappen zijn gelijk aan de eerder besproken testgevallen.

Testuitvoering

Nu we de werking en implementatie van alle PageLoadStrategy hebben begrepen, laten we de code uitvoeren en de uitvoeringsresultaten lokaal en op het LambdaTest Dashboard bekijken.

Het testgeval wordt uitgevoerd met behulp van TestNG. Om uit te voeren, volg de onderstaande stappen:

1. Klik rechts op de testgevalnaam in de Eclipse IDE.
2. Ga naar Run Test en selecteer TestNG Test om de uitvoering te beginnen.

Laten we de gevallen één voor één uitvoeren en kijken of de laadtijd varieert voor elke strategie.

NORMAL Strategy

Je kunt de TotalePageLoad-tijd in dit geval opmerken, in dit geval is het 70852 milliseconden omdat we een netwerk gebruiken met reguliere 2G-snelheid. Het is vastgesteld dat de hoogste waarde onder de drie gevallen moet zijn. Zoals tot nu toe is vastgesteld, zou het de hoogste moeten zijn van alle drie. We kunnen dit controleren door de gevallen voor Eager en None uit te voeren en ze te vergelijken.

EAGER Strategy

Zoals verwacht, is de PageLoadTime, d.w.z. 70231 milliseconden, voor de Eager-strategie in dezelfde situatie relatief minder dan Normal.

NONE Strategy

Je kunt hier opmerken dat de PageLoadTime voor de None-strategie aanzienlijk lager is dan de andere twee, omdat deze niet wacht op het downloaden van enige resources.

Hier volgt een korte samenvatting van de paginalaadtijden voor verschillende strategieën

Je kunt ook de uitvoeringsresultaten bekijken door naar het LambdaTest Dashboard te navigeren zoals hieronder weergegeven voor elke PageLoadStrategy:

Je kunt naar de Builds-sectie onder Automation navigeren om details van je automatiseringbuild te bekijken.

Buildgegevens voor PageLoadStrategy.NORMAL:

Buildgegevens voor PageLoadStrategy.EAGER:

Buildgegevens voor PageLoadStrategy.NONE:

Conclusie

Met dit hebben we het einde bereikt van deze Selenium TestNG tutorial over verschillende Pagina Laad Strategieën in Selenium WebDriver. Hierin hebben we geleerd over verdere gebruik en werking van deze Selenium Pagina Laad Strategieën en hoe we deze kunnen integreren in een automatiseringscript en uitvoeren op het Selenium Cloud Grid.

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

Happy Loading!!