Eine komplette Anleitung zur Selenium Seitenladestrategie

Webseitenautomatisierung hat sich stark verbreitet, und die meisten von uns haben daran gearbeitet. Es ist etwas, an dem wir fast regelmäßig arbeiten, verschiedene Szenarien zu automatisieren und durch viele Webseiten zu navigieren.

Haben Sie sich jemals gefragt, was im Hintergrund passiert, wenn eine Webseite in Selenium WebDriver geladen wird? Wir kennen einige WebDriver-Funktionen, die zum Navigieren zu einer Webseite verwendet werden, wie z.B. get() und navigate(), aber definieren sie, wie eine Seite geladen wird, oder spielt im Hintergrund eine andere Funktionalität eine Rolle?

Die Antwort darauf ist JA! Es wird von etwas definiert, das als Seitenladestrategie in Selenium WebDriver bezeichnet wird. WebDriver verwendet die Seitenladestrategie, um festzulegen, wie die Webseite geladen wird, bevor Sie mit weiteren Interaktionen fortfahren; um die nächsten Aktionen auszuführen.

In diesem Blogbeitrag über die Seitenladestrategie von Selenium werden wir einen tieferen Blick darauf werfen und versuchen, die verschiedenen Typen zu verstehen und zu erkennen, wie sie in automatisierter Codeimplementierung verwendet werden können.

Also lasst uns anfangen!

Was ist die Seitenladestrategie?

Die Seitenladestrategie definiert, wann die Seite für die aktuelle Sitzung als geladen betrachtet wird, wenn das automatisierte Code den Browser startet und die Methoden get() oder navigate().to() verwendet. Standardmäßig verwendet Selenium WebDriver die normale Seitenladestrategie, die NORMAL ist. Das bedeutet, dass gewartet wird, bis die gesamte Webseite und ihre Komponenten wie CSS, Bilder, Frames usw. geladen sind.

Wenn die Seite aufgrund der oben genannten Komponenten (oder verlangsamter Netzwerkbedingungen) länger zum Laden braucht und dies für Ihr Skript nicht wichtig ist, können Sie es auf EAGER oder NONE ändern, um die Ausführung zu beschleunigen. Dieser Wert gilt für die gesamte Sitzung, wählen Sie ihn daher für Ihr Projekt mit Bedacht, da es sonst zu Testunzuverlässigkeit führen könnte.

Die Verwendung der Page Load Strategy wurde als Teil der Selenium 4 Funktionen eingeführt. Im Gegensatz zu früheren Versionen entfernt es die Abhängigkeit von standardmäßigen Seitenladezeitüberwachungen.

Wie funktioniert die Page Load Strategy?

Um zu bestimmen, ob die Seitenladevorgang abgeschlossen ist oder nicht, nutzt Selenium die document.readyState Eigenschaft. Die document.readyState beschreibt den Ladezustand des Dokuments. Ein Dokument bezieht sich hier auf jede Webseite, die im Browser geladen wird.

Die Ready State Methode des Dokuments wird von allen Browsern unterstützt, was es zu einer zuverlässigen Option für die Verwendung mit Selenium’s PageLoadStrategy macht.

Genau wie wir eine Standard-PageLoadStrategy haben, ist für die Selenium WebDriver wartet der Standard-document.readyState abgeschlossen.

Die readyState Eigenschaft des Dokuments eines Browsers repräsentiert den aktuellen Zustand des Seitenladevorgangs. Die Eigenschaft kann einen der folgenden Werte haben:

• loading – Die Seite lädt noch.
• interactive – Die Seite ist fertig geladen, aber Subressourcen wie Bilder, Stylesheets und Frames können noch geladen werden.
• complete – Die Seite und alle Subressourcen sind fertig geladen.

Sie können die readyState-Eigenschaft verwenden, um festzustellen, wann eine Seite vollständig geladen ist und bereit ist, von JavaScript oder anderen Mitteln manipuliert zu werden. Zum Beispiel können Sie in Selenium die readyState-Eigenschaft verwenden, um zu bestimmen, wann eine Seite geladen ist und die Elemente auf der Seite mit Selenium-Befehlen interagiert werden können.

Bevor wir fortfahren, lassen Sie uns ein wenig mehr über den readyState des Dokuments mit einer kurzen Übung verstehen.

1. Navigieren Sie zu der Seite. 
2. Sobald die Seite geladen ist, Rechtsklick -> Klick auf Inspektieren -> öffnen Sie die Konsole und führen Sie den Befehl document.readyState aus.

3. Als Ergebnis dieses Befehls würden Sie den Ausdruck „complete“ sehen, der der aktuelle Zustand des Dokuments ist. Dies bedeutet, dass die gesamte Seite mit den notwendigen Ressourcen (d. h. Bildern, CSS usw.) geladen wurde.

4. Als nächstes aktualisieren Sie die Seite und drücken Sie erneut die Eingabetaste für den obigen Befehl. Sie werden den geladenen Zustand des Dokuments zu diesem Zeitpunkt sehen können, wie unten.

Wenn Sie den geladenen Zustand nach 4-5 Aktualisierungen nicht sehen können, versuchen Sie, die Internetbedingungen durch Einstellung der Netzwerkgeschwindigkeit auf langsamere Optionen zu drosseln. Sie können mehr darüber erfahren, indem Sie diesen Blog über das Testen von Websites in verschiedenen Netzwerkbedingungen lesen. Wir werden die gleiche Vorgehensweise auch in der Demonstration verwenden.

Das zeigt, wie document.readyState in der Praxis funktioniert. Sie können auch die Leistung der Website unter unterschiedlichen Netzwerkbedingungen mit LT Browser, einem mobilfreundlichen Testwerkzeug, überprüfen. LT Browser ist ein ergänzendes Tool von LambdaTest, das Ihnen ermöglicht, die Responsivität Ihrer Website auf über 50 verschiedenen Geräten, einschließlich Smartphones, Tablets und Laptops, zu testen. Es bietet auch die Möglichkeit, benutzerdefinierte Auflösungen zu erstellen, verschiedene Netzwerkbedingungen zu simulieren und Leistungsberichte mit Google Lighthouse zu erstellen. 

Lassen Sie uns fortfahren, um diese Werte zu verstehen und wie sie mit den PageLoadStrategy-Werten zusammenhängen.

PageLoadStrategy <> document.readyState Mapping

Der readyState des Dokuments kann einer der folgenden sein:

• Laden: Das Dokument wird geladen.
• Interaktiv: Das Dokument wurde geladen und analysiert, aber Subressourcen wie Skripts, Bilder, CSS und Frames werden noch geladen. An diesem Punkt wird das DOMContentLoaded-Ereignis ausgelöst.
• Komplett: Das Dokument und alle Subressourcen wurden fertig geladen. Dies zeigt die Auslösung des load-Ereignisses an.

Jede PageLoadStrategy ist auf einen bestimmten document.readyState-Wert abgestimmt, basierend auf dem der WebDriver die Navigationsmethode abschließt und die nächsten Schritte ausführt.

Arten von Seitenladestrategien in Selenium

Es gibt typischerweise drei Arten von Selenium Page Load Strategies, die in der Webautomatisierung verwendet werden können.

NORMAL (Standard, Wenn Nicht Angegeben)

Diese Selenium Page Load Strategie bewirkt, dass der WebDriver wartet, bis die Seitenladevorgang abgeschlossen ist, d.h., wenn das Ladereignis ausgelöst wird.

Das Ladereignis wird ausgelöst, wenn die Seite geladen wurde, einschließlich der abhängigen Ressourcen wie CSS, JavaScript, iFrames und Bilder.

Es wartet darauf, dass der HTML-Inhalt heruntergeladen und mit allen Unterressourcen verarbeitet wird.

EAGER

Mit dieser Selenium Page Load Strategie wartet der WebDriver nur, bis die Startseite geladen ist und das DOMContentLoaded-Ereignis ausgelöst wird.

Im Gegensatz zum Ladereignis wird das DOMContentLoaded-Ereignis sofort ausgelöst, sobald der DOM geladen wurde, ohne auf zusätzliche Ressourcen wie CSS, JavaScript, iFrames und Bilder zu warten.

Es wartet nur darauf, dass der HTML-Inhalt heruntergeladen und verarbeitet wird.

NONE

Bei dieser Selenium Page Load Strategie wird der WebDriver nicht blockiert und setzt die Testausführung fort.

Es wartet nur darauf, dass der HTML-Inhalt heruntergeladen wird.

Demonstration: WebDriver-Setup mit verschiedenen Selenium Page Load Strategien

Nachdem wir nun ein grundlegendes Verständnis der verschiedenen Selenium Page Load Strategien entwickelt haben, schauen wir uns Codebeispiele an, um zu verstehen, wie sie implementiert werden.

Um dies zu tun, werden wir einen Automatisierungstest für das folgende Szenario schreiben.

1. Erstellen Sie eine Instanz von RemoteWebDriver unter Verwendung des cloudbasierten Selenium Grid. Dazu werden wir die LambdaTest-Plattform verwenden.
2. Setzen Sie die WebDriver-Fähigkeiten auf eine spezifische PageLoadStrategy.
3. Als Nächstes starten wir den Browser mit dem Treiber und navigieren hier.
4. Dazu notieren wir die Zeitdauer, in der die Seitenladung abgeschlossen ist, um zu sehen, wie sie sich für verschiedene Selenium Page Load Strategies unter den gleichen Bedingungen unterscheidet. Unterschiede in der Seitenladungszeit helfen, mehr Klarheit über alle Strategien zu erhalten.

Projektaufbau

Für diesen Blog über die Selenium Page Load Strategy verwenden wir ein Maven-Projekt mit Java im Eclipse-IDE. Wenn Sie kein Fan von Eclipse sind, verwenden Sie Ihre bevorzugte IDE und führen Sie die gleichen Schritte aus. Es verwendet Selenium WebDriver und TestNG-Abhängigkeiten, um die Automatisierung der Interaktion mit den Seitenelementen und der Testfallausführung durchzuführen. Es wird dringend empfohlen, die neuesten stabilen Versionen für bessere Ergebnisse zu verwenden.

Fangen wir jetzt an.

1. Starten Sie Eclipse oder die von Ihnen bevorzugte IDE.
2. Erstellen Sie ein neues Maven-Projekt und nennen Sie es PageLoadStrategy.
3. Fügen Sie im src-Ordner ein Testpaket hinzu und darin eine Testklasse und nennen Sie sie TestPageLoadStrategy. Diese Klasse enthält den gesamten Code für diese Demonstration.

4. Aktualisieren Sie die pom.xml-Datei, um die neuesten Abhängigkeiten für die Verwendung von TestNG in Selenium wie unten gezeigt zu haben, bevor Sie den eigentlichen Testfall schreiben.

<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() {
       // Um PageLoadStrategy = Normal zu setzen
       setup("Page Load Strategy - Normal");


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


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


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

Die Verwendung der cloudbasierten Selenium Grid bietet erhöhte Skalierbarkeit und Geschwindigkeit für Java-Automatisierungstests und ermöglicht es Benutzern, umfangreiche parallele und cross-browser Tests über verschiedene Betriebssysteme und Browserkombinationen hinweg durchzuführen.

Schritt 2. Wie im vorherigen Schritt erwähnt, da wir die LambdaTest-Plattform verwenden, müssen wir den Benutzernamen und den Zugriffsschlüssel für unseren Benutzer zur Verbindung mit dem cloudbasierten Hub bereitstellen. Sie können diese Details im LambdaTest-Profilbereich nach der Erstellung Ihres Kontos finden.

Schritt 3. Erstellen Sie ein Objekt der ChromeOptions-Klasse. Diese Klasse wird verwendet, um verschiedene Eigenschaften des Chrome-Drivers zu manipulieren, den wir für die Ausführung verwenden werden. Dieses chromeOptions-Objekt wird in jedem Testfall verwendet, um die PageLoadStrategy festzulegen und dann an WebDriver weitergegeben.

Schritt 4. Erstellen Sie eine HashMap-Variable und nennen Sie sie ltOptions. Diese wird verschiedene Eigenschaften für die Ausführung im LambdaTest-Cloud-Grid festlegen.

Schritt 5. Als Nächstes kommt die setup()-Methode, die verwendet wird, um einige grundlegende Eigenschaften in chromeOptions und ltOptions festzulegen. Dies sind die gemeinsamen Eigenschaften aller drei PageLoadStrategy-Fälle.

Beachten Sie auch, dass wir die networkThrottling-Eigenschaft von LambdaTest verwenden, um das Netzwerk auf Regular 2G mit einer Downloadgeschwindigkeit von 250 Kbps und einer Uploadgeschwindigkeit von 50 Kbps einzustellen. Dies hilft, die Ladezeit in allen Szenarien besser zu demonstrieren, wie im vorherigen Abschnitt diskutiert.

Die Verwendung der LambdaTest-Plattform bietet diesen Vorteil, bei dem Sie die Browser- und Versionseinstellungen direkt auswählen können und Ihre Fähigkeiten automatisch mithilfe des LambdaTest Capabilities Generators generiert werden. Sie müssen sie nur dem Code hinzufügen.

Diese Methode nimmt einen Parameter, buildName, entgegen. Dieser Parameter wird verwendet, um den Build-Namen anzuzeigen.

Schritt 6. Fügen Sie eine neue Funktion, checkPageLoad(), hinzu. Im try-Block schreiben wir den Code, um mit RemoteWebDriver auf der LambdaTest-Plattform zu verbinden, indem wir die in chromeOptions definierten Eigenschaften verwenden.

Nachdem die Verbindung hergestellt wurde, wird ein Objekt der Instant-Klasse aus dem Java.time-Paket erstellt, um die Startzeit zu speichern und zu protokollieren, wenn wir beginnen, den Browser zu starten und zu navigieren. Anschließend wird ein Fahrer zum Browser gerufen und die Testwebsite gestartet.

Sobald die Website je nach eingestellter PageLoadStrategy als geladen betrachtet wird, übergibt der Fahrer die Kontrolle an den nächsten Befehl, der wiederum ein Objekt der Instant-Klasse ist, um erneut die aktuelle Zeit, die Endzeit, zu erhalten.

Inzwischen ist die Seite entsprechend unserer angeforderten Strategie geladen und wir haben die Start- und Endzeiten. Die Zeit, die zum Laden einer Webseite in Millisekunden benötigt wird, kann ermittelt werden, indem die Differenz zwischen zwei Punkten berechnet wird. Die Duration-Klasse, die Teil desselben Pakets ist, wird verwendet, um dies zu erreichen.

Sie werden feststellen, dass diese Ladezeit in all unseren Testfällen für verschiedene Strategien variiert.

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

Dies ist der Testfall zur Demonstration der Normalstrategie.

Zunächst definiert die setup()-Methode grundlegende Eigenschaften für den Browser und die LambdaTest-Plattform. Anschließend wird der Wert für PageLoadStrategy hier in den chromeOptions auf NORMAL gesetzt, gefolgt von der Einstellung anderer Fähigkeiten.

Schließlich wird die checkPageLoad()-Methode aufgerufen, um die Webseite zu laden und die Ladezeit zu protokollieren, die wir für jede Strategie in der Ausführungssektion vergleichen werden.

testEagerStrategy()

Dies ist der Testfall zur Demonstration der Eager-Strategie.

Alle Schritte sind in diesem Fall ähnlich wie beim vorherigen. Der einzige Unterschied besteht darin, dass der Wert für PageLoadStrategy hier in den chromeOptions als EAGER festgelegt ist, gefolgt vom Aufruf der checkPageLoad() Methode.

testNoneStrategy()

Dies ist der Testfall zur Demonstration der None-Strategie.

Der Wert für PageLoadStrategy ist hier in den chromeOptions als NONE festgelegt, und der Rest der Schritte ist ähnlich wie bei den zuvor diskutierten Testfällen.

Testdurchführung

Nachdem wir das Verständnis und die Implementierung aller PageLoadStrategy verstanden haben, führen wir nun den Code aus und betrachten die Ergebnisse der Ausführung lokal und auf dem LambdaTest-Dashboard.

Der Testfall wird mithilfe von TestNG ausgeführt. Um dies zu tun, folgen Sie den unten genannten Schritten:

1. Klicken Sie mit der rechten Maustaste auf den Testfallnamen in der Eclipse-IDE.
2. Gehen Sie zu Run Test und wählen Sie TestNG Test, um die Ausführung zu beginnen.

Führen wir die Fälle nacheinander aus und sehen, ob sich die Ladezeit für jede Strategie unterscheidet.

NORMAL Strategy

Sie können die Gesamtseitenladezeit in diesem Fall, 70852 Millisekunden, feststellen, da wir ein Netzwerk mit regulärer 2G-Geschwindigkeit verwenden. Es wurde festgestellt, dass der höchste Wert unter den drei Fällen sein sollte. Wie bisher festgestellt, sollte es der höchste unter allen drei sein. Wir können dies überprüfen, indem wir die Fälle für Eager und None ausführen und sie vergleichen.

EAGER Strategy

Wie erwartet ist die Seitenladezeit, also 70231 Millisekunden, für die Eager-Strategie in derselben Situation im Vergleich zu Normal geringer.

NONE Strategy

Sie können hier feststellen, dass die PageLoadTime für die None-Strategie erheblich geringer ist als bei den anderen beiden, da sie nicht auf die Herunterladen von Ressourcen wartet.

Hier ist eine kurze Zusammenfassung der Seitenladezeiten in verschiedenen Strategien

Sie können auch die Ausführungsergebnisse durch Navigieren zum LambdaTest-Dashboard wie unten für jede PageLoadStrategy einsehen:

Sie können zur Builds-Sektion unter Automation navigieren, um Details Ihres Automatisierungsbuilds anzuzeigen.

Build-Details für PageLoadStrategy.NORMAL:

Build-Details für PageLoadStrategy.EAGER:

Build-Details für PageLoadStrategy.NONE:

Schlussfolgerung

Damit haben wir das Ende dieses Selenium TestNG Tutorials zu verschiedenen Seitenlade-Strategien in Selenium WebDriver erreicht. In diesem haben wir gelernt, wie wir diese Selenium Seitenlade-Strategien weiter verwenden und arbeiten können und wie wir sie in ein automatisches Skript integrieren und auf dem Selenium Cloud Grid ausführen können.

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

Happy Loading!!