Guide complet sur la stratégie de chargement de page Selenium

L’automatisation des pages Web a connu une croissance importante, et la plupart d’entre nous y ont déjà travaillé. C’est quelque chose sur lequel nous travaillons presque régulièrement, automatisant plusieurs scénarios et naviguant à travers de nombreuses pages Web.

Mais vous êtes-vous déjà demandé ce qui se passe derrière les scènes lorsque la page Web est chargée dans Selenium WebDriver? Nous connaissons quelques fonctions WebDriver utilisées pour accéder à une page Web, comme get() et navigate(), mais définissent-elles comment une page est chargée, ou existe-t-il d’autres fonctionnalités en jeu dans le backend des choses?

La réponse à cette question est OUI ! Cela est défini par ce qu’on appelle la Stratégie de Chargement de Page (Page Load Strategy) dans Selenium WebDriver. Le WebDriver utilise cette stratégie pour déterminer comment la page Web sera chargée avant de procéder aux interactions suivantes ; pour exécuter les actions suivantes.

Dans ce blog sur la Stratégie de Chargement de Page Selenium, nous allons approfondir cette stratégie et essayer de comprendre ses différents types et comment ils peuvent être implémentés dans le code d’automatisation.

Alors, commençons !

Qu’est-ce que la Stratégie de Chargement de Page?

La Stratégie de Chargement de Page définit quand la page serait considérée comme chargée pour la session en cours chaque fois que le code d’automatisation lance un navigateur et utilise la méthode get() ou navigate().to(). Par défaut, Selenium WebDriver utilise la Stratégie de Chargement de Page standard, qui est NORMAL. Cela signifie attendre jusqu’à ce que l’ensemble de la page Web et de ses composants, tels que CSS, images, cadres, etc., soient chargés.

Si la page met plus de temps à charger en raison des composants mentionnés ci-dessus (ou des conditions de réseau limitantes) et n’est pas importante pour votre script, vous pouvez la changer en EAGER ou NONE pour accélérer l’exécution. Cette valeur s’applique à toute la session, choisissez-la donc avec sagesse pour votre projet, sinon cela pourrait entraîner une instabilité des tests.

L’utilisation de la Stratégie de Chargement de Page a été introduite dans le cadre des fonctionnalités de Selenium 4. Contrairement aux versions précédentes, elle supprime la dépendance à l’utilisation des délais de timeout par défaut pour le chargement de la page.

Comment fonctionne la Stratégie de Chargement de Page?

Pour déterminer si le chargement de la page est terminé ou non, Selenium utilise la propriété document.readyState. La propriété document.readyState décrit l’état de chargement du document. Un document ici fait référence à toute page web chargée dans le navigateur.

La méthode Ready State du Document est prise en charge par tous les navigateurs, ce qui en fait une option fiable pour l’utilisation avec la PageLoadStrategy de Selenium.

Tout comme nous avons une PageLoadStrategy par défaut, le document.readyState par défaut pour lequel Selenium WebDriver attend est Complete.

La propriété readyState de l’objet document du navigateur représente l’état actuel du processus de chargement de la page. La propriété peut avoir l’une des valeurs suivantes:

• loading – La page est en cours de chargement.
• interactive – La page a terminé de charger, mais les ressources secondaires telles que les images, les feuilles de style et les cadres peuvent encore se charger.
• complete – La page et toutes les ressources secondaires ont terminé de charger.

Vous pouvez utiliser la propriété readyState pour déterminer quand une page est entièrement chargée et prête à être manipulée par JavaScript ou autrement. Par exemple, dans Selenium, vous pouvez utiliser la propriété readyState pour déterminer quand une page est chargée et que les éléments de la page peuvent être interagis à l’aide des commandes Selenium.

Avant de continuer, comprenons un peu plus le readyState du document avec un court exercice.

1. Accédez à le site. 
2. Une fois le site chargé, faites un clic droit -> cliquez sur Inspecter -> ouvrez la console et exécutez la commande document.readyState.

3. En résultat de cette commande, vous verrez la sortie comme étant complète, qui est l’état actuel du document. Cela signifie que la page entière est chargée avec les ressources nécessaires (c’est-à-dire, images, CSS, etc.).

4. Ensuite, rafraîchissez la page et appuyez à nouveau sur Entrée sur la commande ci-dessus. Vous serez en mesure de voir l’état de chargement du document à cet instant, comme ci-dessous.

Si vous ne pouvez pas voir l’état de chargement après 4-5 rafraîchissements, essayez de limiter les conditions Internet en réglant le Réseau sur des options plus lentes. Vous pouvez en savoir plus à ce sujet grâce à ce blog sur le test de sites Web sur différentes conditions de réseau. Nous utiliserons la même approche dans la démonstration également.

Donc, cela montre comment document.readyState fonctionne en pratique. Vous pouvez également vérifier les performances du site web dans des conditions de réseau variables en utilisant LT BROWSER, un outil de test amical pour mobile. LT BROWSER est un outil complémentaire proposé par LambdaTest, qui vous permet de tester la réactivité de votre site web sur plus de 50 appareils différents, y compris des smartphones, des tablettes et des ordinateurs portables. Il offre également la possibilité de créer des résolutions personnalisées, de simuler différentes conditions de réseau et de générer des rapports de performance à l’aide de Google Lighthouse. 

Passons maintenant à la compréhension de ces valeurs et de la manière dont elles sont associées aux valeurs PageLoadStrategy.

Mappage PageLoadStrategy <> document.readyState

Le readyState du document peut être l’un des suivants:

• Chargement: Le chargement du document est en cours.
• Interactif: Le document a été chargé et analysé, mais les ressources secondaires comme les scripts, les images, les CSS et les cadres sont toujours en cours de chargement. À ce stade, l’événement DOMContentLoaded est déclenché.
• Terminé: Le document et toutes les ressources secondaires ont terminé leur chargement. Cela indique le déclenchement de l’événement load.

Chaque PageLoadStrategy est associé à une valeur particulière document.readyState en fonction de laquelle WebDriver terminera la méthode de navigation et continuera à exécuter les étapes suivantes.

Types de Stratégies de Chargement de Page dans Selenium

Il existe généralement trois types de stratégies de chargement de page Selenium qui peuvent être utilisés dans l’automatisation Web.

NORMAL (Par défaut, si non spécifié)

Cette stratégie de chargement de page Selenium fait en sorte que WebDriver attende que le chargement de la page soit complet, c’est-à-dire que l’événement de chargement soit déclenché.

L’événement de chargement est déclenché lorsque la page est chargée, y compris les ressources dépendantes telles que CSS, JavaScript, iFrames et images.

Il attend que le contenu HTML soit téléchargé et analysé avec toutes les ressources secondaires.

EAGER

Avec cette stratégie de chargement de page Selenium, WebDriver n’attend que le chargement initial de la page et que l’événement DOMContentLoaded soit déclenché.

Contrairement à l’événement de chargement, l’événement DOMContentLoaded est déclenché dès que le DOM a été chargé sans attendre que des ressources supplémentaires comme CSS, JavaScript, iFrames et images soient chargées.

Il n’attend que le contenu HTML soit téléchargé et analysé.

NONE

Dans cette stratégie de chargement de page Selenium, WebDriver n’est pas bloqué et continue avec l’exécution des tests.

Il n’attend que le contenu HTML soit téléchargé.

Démonstration : Configuration de WebDriver avec différentes stratégies de chargement de page Selenium

Maintenant que nous avons une compréhension de base des différentes stratégies de chargement de page Selenium, regardons des exemples de code pour comprendre comment cela est mis en œuvre.

Pour ce faire, nous allons écrire un script de test d’automatisation pour le scénario suivant.

1. Créez une instance de RemoteWebDriver en utilisant le Grid Selenium basé sur le cloud. Pour cela, nous utiliserons la plateforme LambdaTest.
2. Définissez les capacités de WebDriver pour une stratégie de PageLoadStrategy spécifique.
3. Ensuite, utilisez le pilote pour lancer le navigateur et naviguer ici.
4. Pour cela, nous noterons la durée pendant laquelle la page se charge pour voir comment elle varie pour différentes stratégies de chargement de page Selenium dans les mêmes conditions. Les différences dans le temps de chargement de la page aideront à mieux comprendre toutes les stratégies.

Configuration du projet

Pour ce blog sur la stratégie de chargement de page Selenium, le projet Maven utilisant Java dans l’IDE Eclipse sera utilisé. Si vous n’êtes pas fan d’Eclipse, utilisez n’importe quel IDE de votre choix et effectuez les mêmes étapes. Il utilisera Selenium WebDriver et les dépendances TestNG pour automatiser l’interaction avec les éléments de la page et l’exécution des cas de test. Il est fortement recommandé d’utiliser les dernières versions stables pour de meilleurs résultats.

Commençons maintenant.

1. Lancez Eclipse ou l’IDE de votre choix.
2. Créez un nouveau projet Maven et nommez-le PageLoadStrategy.
3. Dans le dossier src, ajoutez un package de test et à l’intérieur un classe de test que vous nommerez TestPageLoadStrategy. Cette classe contiendra tout le code pour cette démonstration.

4. Mettez à jour le fichier pom.xml pour inclure les dépendances les plus récentes pour l’utilisation de TestNG dans Selenium, comme indiqué ci-dessous, avant d’écrire le cas de test réel.

<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() {
       // Pour définir PageLoadStrategy = Normal
       setup("Page Load Strategy - Normal");


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


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


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

L’utilisation du cloud Selenium Grid offre une scalabilité et une vitesse accrues pour les tests d’automatisation Java et permet aux utilisateurs de réaliser des tests parallèles et multi-navigateurs étendus sur plusieurs combinaisons de systèmes d’exploitation et de navigateurs. 

Étape 2. Comme mentionné à l’étape précédente, puisque nous utilisons la plateforme LambdaTest, nous devons fournir le nom d’utilisateur et la clé d’accès pour notre utilisateur afin de se connecter au hub cloud. Vous pouvez trouver ces détails dans la section Profil LambdaTest après la création de votre compte.

Étape 3. Créez un objet de la classe ChromeOptions. Cette classe est utilisée pour manipuler diverses propriétés du pilote Chrome, que nous utiliserons pour l’exécution. Cet objet chromeOptions sera utilisé dans chaque cas de test pour définir la PageLoadStrategy, puis passé à WebDriver.

Étape 4. Créez une variable HashMap et nommez-la ltOptions. Cela définira diverses propriétés pour l’exécution de la grille cloud LambdaTest.

Étape 5. Suivant est la méthode setup(), utilisée pour définir quelques propriétés de base dans chromeOptions et ltOptions. Ce sont les propriétés communes de tous les trois cas de PageLoadStrategy.

Notez également que nous utilisons la propriété networkThrottling de LambdaTest pour définir le réseau sur Regular 2G avec une vitesse de téléchargement de 250 Kbps et une vitesse de téléversement de 50 Kbps. Cela aidera à mieux démontrer le temps de chargement dans tous les scénarios, comme discuté dans la section précédente.

L’utilisation de la plateforme LambdaTest offre cet avantage où vous pouvez directement sélectionner les détails du navigateur et de la version, et vos capacités sont automatiquement générées en utilisant le Générateur de capacités LambdaTest. Vous avez juste besoin de les ajouter au code.

Cette méthode prend un paramètre, buildName. Ce paramètre est utilisé pour afficher le nom de la build.

Étape 6. Ajoutez une nouvelle fonction, checkPageLoad(). Dans le bloc try, nous écrivons le code pour se connecter avec RemoteWebDriver sur la plateforme LambdaTest en utilisant les propriétés définies dans chromeOptions.

Après la connexion établie, un objet de la classe Instant du package java.time est créé pour stocker et enregistrer l’heure de début lorsque nous sommes sur le point de lancer le navigateur et commencer à naviguer. Cela est suivi d’un driver appelé au navigateur et du lancement du site de test.

Dès que le site est considéré comme chargé en fonction de la stratégie PageLoadStrategy définie, le driver passe le contrôle à la commande suivante, qui est à nouveau un objet de la classe Instant, pour obtenir l’heure actuelle à nouveau, l’heure de fin.

À présent, la page est chargée selon notre stratégie demandée, et nous avons les heures de début et de fin. Le temps pris pour charger une page web en millisecondes peut être déterminé en trouvant la différence entre deux points. La classe Duration, qui fait partie du même package, est utilisée pour accomplir cela.

Vous remarquerez que ce temps de chargement diffère dans tous nos cas de test pour différentes stratégies.

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

Ceci est le cas de test pour démontrer la stratégie Normale.

Premièrement, la méthode setup() définit les propriétés de base pour le navigateur et la plateforme LambdaTest. Ensuite, la valeur pour PageLoadStrategy est définie comme NORMAL ici dans les chromeOptions, suivie de la définition d’autres capacités.

Enfin, la méthode checkPageLoad() est appelée pour charger la page web et enregistrer le temps de chargement, que nous comparerons pour chaque stratégie dans la section d’exécution.

testEagerStrategy()

Ceci est le cas de test pour démontrer la stratégie Eager.

Tous les étapes, dans ce cas, sont similaires à la précédente. La seule différence étant que la valeur pour PageLoadStrategy est définie comme EAGER ici dans les chromeOptions, suivie de l’appel de la méthode checkPageLoad().

testNoneStrategy()

Ceci est le cas de test pour démontrer la stratégie None.

La valeur pour PageLoadStrategy est définie comme NONE ici dans les chromeOptions, et le reste des étapes est similaire aux cas de test précédemment discutés.

Exécution des Tests

Ayant compris le fonctionnement et la mise en œuvre de toutes les stratégies PageLoadStrategy, exécutons maintenant le code et voyons les résultats de l’exécution localement et sur le tableau de bord LambdaTest.

Le cas de test sera exécuté en utilisant TestNG. Pour exécuter, suivez les étapes mentionnées ci-dessous:

1. Faites un clic droit sur le nom du cas de test dans l’IDE Eclipse.
2. Allez dans Exécuter les Tests, et sélectionnez TestNG Test pour commencer l’exécution.

Exécutons les cas un par un et voyons si le temps de chargement varie pour chaque stratégie.

Stratégie NORMALE

Vous pouvez remarquer que le temps TotalPageLoad, dans ce cas, est de 70852 millisecondes car nous utilisons un réseau avec une vitesse de 2G régulière. Il a été établi que la valeur la plus élevée devrait être parmi les trois cas. Comme établi jusqu’à présent, elle devrait être la plus élevée parmi les trois. Nous pouvons vérifier cela en exécutant les cas pour Eager et None et en les comparant.

Stratégie EAGER

Comme prévu, le PageLoadTime, soit 70231 millisecondes, pour la stratégie Eager dans le même scénario est comparativement moins élevé que Normal.

Stratégie NONE

Vous pouvez noter ici que le PageLoadTime pour la stratégie None est nettement inférieur aux deux autres car elle n’attend pas que des ressources soient téléchargées.

Voici un résumé rapide des temps de chargement de page pour différentes stratégies

Vous pouvez également consulter les résultats de l’exécution en vous rendant sur le tableau de bord LambdaTest comme indiqué ci-dessous pour chaque PageLoadStrategy:

Vous pouvez accéder à la section Builds sous Automation pour voir les détails de votre build automatisé.

Détails de la build pour PageLoadStrategy.NORMAL:

Détails de la build pour PageLoadStrategy.EAGER:

Détails de la build pour PageLoadStrategy.NONE:

Conclusion

Avec cela, nous avons atteint la fin de ce tutoriel Selenium TestNG sur les différentes stratégies de chargement de page dans Selenium WebDriver. Dans ce tutoriel, nous avons appris à utiliser davantage et à comprendre le fonctionnement de ces stratégies de chargement de page Selenium et comment nous pouvons les intégrer dans un script d’automatisation et les exécuter sur le Cloud Grid Selenium.

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

Happy Loading!!