Una Guida Completa alla Strategia di Caricamento della Pagina di Selenium

L’automazione delle pagine web è cresciuta estensivamente ed è qualcosa su cui la maggior parte di noi ha lavorato. È qualcosa su cui lavoriamo quasi regolarmente, automatizzando diversi scenari e navigando attraverso molte pagine web.

Ma ti sei mai chiesto cosa succede dietro le quinte quando una pagina web viene caricata in Selenium WebDriver? Conosciamo alcune funzioni di WebDriver utilizzate per navigare verso una pagina web, come get() e navigate(), ma definiscono come viene caricata una pagina, o c’è qualche altra funzionalità in gioco nel backend delle cose?

La risposta a questa domanda è SÌ! È definito da qualcosa chiamato Page Load Strategy in Selenium WebDriver. WebDriver utilizza la strategia di caricamento delle pagine per determinare come verrà caricata la pagina web prima di procedere con ulteriori interazioni; per eseguire le successive azioni.

In questo blog su Page Load Strategy di Selenium, daremo un’occhiata più approfondita a questa strategia e cercheremo di capire i suoi diversi tipi e come possono essere implementati nel codice di automazione.

Quindi iniziamo!

Che cos’è la Page Load Strategy?

Page Load Strategy definisce quando la pagina verrà considerata caricata per la sessione corrente ogni volta che il codice di automazione avvia un browser e utilizza il metodo get() o navigate().to(). Per impostazione predefinita, Selenium WebDriver utilizza la strategia di caricamento standard delle pagine, che è NORMAL. Ciò significa attendere che l’intera pagina web e i suoi componenti, come CSS, immagini, frame, ecc., siano caricati.

Se la pagina richiede più tempo per caricarsi a causa dei componenti menzionati sopra (o condizioni di rete limitanti) e non è importante per il tuo script, puoi cambiarla in EAGER o NONE per velocizzare l’esecuzione. Questo valore si applica all’intera sessione, quindi sceglielo saggiamente per il tuo progetto altrimenti potrebbe portare a instabilità dei test.

L’uso della Strategia di Caricamento della Pagina è stato introdotto come parte delle caratteristiche di Selenium 4. A differenza delle versioni precedenti, elimina la dipendenza dall’uso di timeout predefiniti per il caricamento della pagina.

Come Funziona la Strategia di Caricamento della Pagina?

Per determinare se il caricamento della pagina è completato o meno, Selenium utilizza la proprietà document.readyState. La document.readyState descrive lo stato di caricamento del documento. Un documento qui si riferisce a qualsiasi pagina web caricata nel browser.

Il metodo Ready State del Documento è supportato da tutti i browser, rendendolo un’opzione affidabile per l’uso con la PageLoadStrategy di Selenium.

Proprio come abbiamo una PageLoadStrategy predefinita, il document.readyState predefinito per cui Selenium WebDriver attende è Complete.

La proprietà readyState dell’oggetto documento del browser rappresenta lo stato attuale del processo di caricamento della pagina. La proprietà può avere uno dei seguenti valori:

• loading – La pagina è ancora in fase di caricamento.
• interactive – La pagina ha finito di caricarsi, ma i sottoresorse come immagini, fogli di stile e frame potrebbero ancora caricarsi.
• complete – La pagina e tutte le sottoresorse hanno finito di caricarsi.

Puoi utilizzare la proprietà readyState per determinare quando una pagina è completamente caricata e pronta per essere manipolata da JavaScript o altri mezzi. Ad esempio, in Selenium, puoi utilizzare la proprietà readyState per determinare quando una pagina è caricata e gli elementi della pagina possono essere interagiti utilizzando i comandi di Selenium.

Prima di procedere, capiamo un po’ di più sul readyState del documento con un breve esercizio.

1. Naviga verso il sito. 
2. Una volta caricato il sito, fai clic con il tasto destro -> clicca su Inspect -> apri la console e esegui il comando document.readyState.

3. Come risultato di questo comando, vedresti l’output come completo, che è lo stato attuale del documento. Ciò significa che l’intera pagina è caricata con le risorse necessarie (cioè, immagini, CSS, ecc.).

4. Successivamente, aggiorna la pagina e premi invio nuovamente sul comando di cui sopra. Sarai in grado di vedere lo stato di caricamento del documento in questo momento, come di seguito.

Se non riesci a vedere lo stato di caricamento dopo 4-5 aggiornamenti, prova a limitare le condizioni di Internet impostando la rete su opzioni più lente. Puoi saperne di più attraverso questo blog sulla verifica dei siti web in diverse condizioni di rete. Faremo uso della stessa approccio anche nella dimostrazione.

Quindi questo dimostra come funziona document.readyState in pratica. Puoi anche verificare le prestazioni del sito web in varie condizioni di rete utilizzando LT Browser, uno strumento di test amichevole per dispositivi mobili. LT Browser è uno strumento complementare offerto da LambdaTest, che ti consente di testare la rispondenza del tuo sito web su oltre 50 dispositivi diversi, tra cui smartphone, tablet e laptop. Offre inoltre la possibilità di creare risoluzioni personalizzate, simulare diverse condizioni di rete e generare rapporti sulle prestazioni utilizzando Google Lighthouse.

Muoviamoci avanti per capire questi valori e come sono mappati con i valori di PageLoadStrategy.

PageLoadStrategy <> document.readyState Mapping

Il readyState del documento può essere uno dei seguenti:

• Loading: Caricamento del documento in corso.
• Interactive: Il documento è stato caricato e analizzato, ma i sottoresorse come script, immagini, CSS e frame sono ancora in fase di caricamento. A questo punto, viene attivato l’evento DOMContentLoaded.
• Complete: Documento e tutte le sottoresorse hanno terminato il caricamento. Ciò indica l’attivazione dell’evento load.

Ogni PageLoadStrategy è mappato a un particolare valore document.readyState in base al quale WebDriver completerà il metodo di navigazione e procederà con l’esecuzione dei passaggi successivi.

Tipi di Strategie di Caricamento della Pagina in Selenium

Ci sono tipicamente tre tipi di Strategie di Caricamento della Pagina di Selenium che possono essere utilizzate nell’automazione web.

NORMAL (Predefinito, Se Non Specificato)

Questa strategia di caricamento della pagina di Selenium fa in modo che WebDriver attenda fino a quando il caricamento della pagina non sia completo, cioè fino a quando non viene innescato l’evento di caricamento.

L’evento di caricamento viene innescato quando la pagina è caricata, comprese le risorse dipendenti come CSS, JavaScript, iFrames e immagini.

Attende che il contenuto HTML venga scaricato e analizzato insieme a tutte le risorse secondarie.

ANSIENTE

Con questa strategia di caricamento della pagina di Selenium, WebDriver attende solo fino a quando la pagina iniziale è caricata e viene innescato l’evento DOMContentLoaded.

A differenza dell’evento di caricamento, l’evento DOMContentLoaded viene innescato non appena il DOM è stato caricato senza attendere che vengano caricati ulteriori risorse come CSS, JavaScript, iFrames e immagini.

Attende solo che il contenuto HTML venga scaricato e analizzato.

NESSUNO

In questa strategia di caricamento della pagina di Selenium, WebDriver non è bloccato e procede con l’esecuzione dei test.

Attende solo che il contenuto HTML venga scaricato.

Dimostrazione: Configurazione di WebDriver con diverse strategie di caricamento della pagina di Selenium

Ora che abbiamo sviluppato una comprensione di base delle diverse strategie di caricamento della pagina di Selenium, diamo un’occhiata a esempi di codice per capire come viene implementata.

Per fare ciò, scriveremo uno script di test automation per il seguente scenario.

1. Creare un’istanza di RemoteWebDriver utilizzando la Grid di Selenium basata sul cloud. Per questo, utilizzeremo la piattaforma LambdaTest.
2. Imposta le capacità di WebDriver su una specifica PageLoadStrategy.
3. Successivo, utilizza il driver per avviare il browser e navigare qui.
4. Per questo, annoteremo la durata del tempo in cui il caricamento della pagina viene completato per vedere come varia per diverse Strategie di Caricamento delle Pagine Selenium in condizioni identiche. Le differenze nel tempo di caricamento della pagina aiuteranno a chiarire meglio tutte le strategie.

Configurazione del Progetto

Per questo blog sulle Strategie di Caricamento delle Pagine Selenium, verrà utilizzato un progetto Maven che utilizza Java nell’IDE Eclipse. Se non sei un fan di Eclipse, usa qualsiasi IDE a tua scelta e esegui gli stessi passaggi. Utilizzerà Selenium WebDriver e le dipendenze TestNG per automatizzare l’interazione con gli elementi della pagina e l’esecuzione dei casi di test. È altamente consigliato utilizzare le versioni più recenti stabili per ottenere risultati migliori.

Iniziamo ora.

1. Avvia Eclipse o l’IDE a tua scelta.
2. Crea un nuovo progetto Maven e chiamalo PageLoadStrategy.
3. All’interno della cartella src, aggiungi un pacchetto di test e al suo interno una classe di Test e chiamala TestPageLoadStrategy. Questa classe conterrà tutto il codice per questa dimostrazione.

4. Aggiorna il file pom.xml per includere le dipendenze più recenti per l’uso di TestNG in Selenium, come mostrato di seguito, prima di scrivere il caso di test vero e proprio.

<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() {
       // Per impostare PageLoadStrategy = Normale
       setup("Page Load Strategy - Normal");


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


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


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

L’utilizzo della cloud Selenium Grid offre una scalabilità e una velocità maggiori per i test di automazione Java e consente agli utenti di eseguire test paralleli e di cross-browser estesi su diverse combinazioni di OS e browser. 

Passo 2. Come menzionato nel passaggio precedente, poiché stiamo utilizzando la piattaforma LambdaTest, è necessario fornire il nome utente e la chiave di accesso per il nostro utente per connettersi con il cloud hub. Puoi trovare questi dettagli nella sezione Profilo di LambdaTest dopo aver creato il tuo account.

Passo 3. Creare un oggetto della classe ChromeOptions. Questa classe viene utilizzata per manipolare varie proprietà del driver Chrome, che utilizzeremo per l’esecuzione. Questo oggetto chromeOptions verrà utilizzato in ogni caso di test per impostare la PageLoadStrategy e quindi passato a WebDriver.

Passo 4. Creare una variabile HashMap e chiamarla ltOptions. Questo imposterà varie proprietà per l’esecuzione della griglia cloud LambdaTest.

Passo 5. Il prossimo è il setup() metodo, utilizzato per impostare alcune proprietà basilari in chromeOptions e ltOptions. Queste sono le proprietà comuni di tutti e tre i casi di PageLoadStrategy.

Inoltre, nota che stiamo utilizzando la proprietà networkThrottling di LambdaTest per impostare la rete su Regular 2G con velocità di download di 250 Kbps e velocità di upload di 50 Kbps. Ciò aiuterà a dimostrare meglio il tempo di caricamento in tutte le situazioni, come discusso nella sezione precedente.

L’uso della piattaforma LambdaTest offre questo vantaggio dove puoi selezionare direttamente i dettagli del browser e della versione, e le tue capacità vengono generate automaticamente utilizzando il Generatore di Capacità di LambdaTest. Hai solo bisogno di aggiungerli al codice.

Questo metodo prende un parametro, buildName. Questo parametro viene utilizzato per visualizzare il nome del build.

Passo 6. Aggiungere una nuova funzione, checkPageLoad(). Nel blocco try, scriviamo il codice per connettersi con RemoteWebDriver sulla piattaforma LambdaTest utilizzando le proprietà definite in chromeOptions.

Dopo che la connessione è stabilita, viene creato un oggetto della classe Instant del package java.time per memorizzare e registrare l’ora di inizio quando stiamo per avviare il browser e iniziare a navigare. Questo è seguito da una chiamata al driver del browser e dall’avvio del sito di prova.

Non appena il sito web è considerato caricato in base alla strategia di PageLoad impostata, il driver trasferisce il controllo al prossimo comando, che è di nuovo un oggetto della classe Instant, per ottenere nuovamente l’ora corrente, l’ora di fine.

A questo punto, la pagina è caricata secondo la nostra strategia richiesta e abbiamo l’ora di inizio e di fine. Il tempo impiegato per caricare una pagina web in millisecondi può essere determinato calcolando la differenza tra questi due punti. La classe Duration, che fa parte dello stesso package, viene utilizzata per realizzare ciò.

Noterete che questo tempo di caricamento differisce in tutti i nostri casi di test per diverse strategie.

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

Questo è il caso di test per dimostrare la strategia Normale.

In primo luogo, il metodo setup() definisce le proprietà basilari per il browser e il platform LambdaTest. Successivamente, il valore per PageLoadStrategy è impostato come NORMAL qui nelle chromeOptions, seguito dall’impostazione di altre capacità.

Infine, viene chiamato il metodo checkPageLoad() per caricare la pagina web e registrare il tempo di caricamento, che confronteremo per ogni strategia nella sezione di esecuzione.

testEagerStrategy()

Questo è il caso di test per dimostrare la strategia Eager.

Tutti i passaggi, in questo caso, sono simili a quelli precedenti. L’unica differenza è che il valore per PageLoadStrategy è impostato come EAGER qui nelle chromeOptions, seguito dalla chiamata del metodo checkPageLoad().

testNoneStrategy()

Questo è il caso di test per dimostrare la strategia None.

Il valore per PageLoadStrategy è impostato come NONE qui nelle chromeOptions, e il resto dei passaggi è simile ai casi di test discussi in precedenza.

Esecuzione del Test

Ora che abbiamo capito il funzionamento e l’implementazione di tutte le strategie PageLoadStrategy, eseguiamo il codice e vediamo i risultati dell’esecuzione in locale e sul Dashboard di LambdaTest.

Il caso di test verrà eseguito utilizzando TestNG. Per eseguire, segui i passaggi seguenti:

1. Fare clic destro sul nome del caso di test nell’IDE Eclipse.
2. Andare su Run Test e selezionare TestNG Test per iniziare l’esecuzione.

Eseguiamo i casi uno per uno e vediamo se il tempo di caricamento varia per ogni strategia.

Strategia NORMAL

Si può notare che il tempo TotalePageLoad, in questo caso, è di 70852 millisecondi poiché stiamo utilizzando una rete con velocità 2G regolare. Si è stabilito che il valore più alto debba essere tra i tre casi. Come stabilito finora, dovrebbe essere il più alto tra tutti e tre. Possiamo verificare ciò eseguendo i casi per Eager e None e confrontandoli.

Strategia EAGER

Come previsto, il PageLoadTime, cioè 70231 millisecondi, per la strategia Eager nella stessa situazione è comparativamente inferiore a quello Normale.

Strategia NONE

Puoi notare qui che il PageLoadTime per la strategia None è significativamente inferiore rispetto alle altre due in quanto non attende che vengano scaricati alcuni

Ecco un rapido riepilogo dei tempi di caricamento della pagina in diverse strategie

È inoltre possibile visualizzare i risultati dell’esecuzione navigando nel Dashboard di LambdaTest come mostrato di seguito per ciascuna strategia PageLoadStrategy:

È possibile accedere alla sezione Builds sotto Automation per visualizzare i dettagli del tuo build automation.

Dettagli del build per PageLoadStrategy.NORMAL:

Dettagli del build per PageLoadStrategy.EAGER:

Dettagli del build per PageLoadStrategy.NONE:

Conclusione

Con questo, abbiamo raggiunto la fine di questo tutorial Selenium TestNG sulle diverse strategie di caricamento delle pagine in Selenium WebDriver. In questo, abbiamo imparato ulteriormente sull’uso e il funzionamento di queste strategie di caricamento delle pagine di Selenium e su come possiamo integrarle nel script di automazione ed eseguirle sul Cloud Grid di Selenium.

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

Buon caricamento!!