Maîtriser la simulation mobile avec le remplacement des métriques des appareils Selenium CDP / Blogs / Perficient

Introduction

Outils de développement Chrome

Dans le domaine dynamique du développement et des tests Web, rester à la pointe de la technologie est primordial. Un ensemble d’outils indispensables qui est devenu un pilier dans cet espace est les outils de développement Chrome (DevTools). DevTools offre aux développeurs et aux testeurs une gamme de fonctionnalités pour déboguer, optimiser et inspecter les applications Web directement depuis le navigateur.

CDP

Niché dans DevTools se trouve le protocole Chrome DevTools (CDP), une interface puissante qui facilite une communication transparente entre le navigateur et les outils externes. CDP ouvre la porte à une large gamme de fonctionnalités. Il offre une méthode standardisée pour interagir avec le navigateur Chrome par programmation. Il fournit des outils pour instrumenter, inspecter, déboguer et profiler Chromium, Chrome et d’autres navigateurs basés sur Blink.

Sélénium 4

Entrez Selenium, le framework largement acclamé pour l’automatisation et les tests des navigateurs. Selenium, dans son évolution continue, s’est intégré au protocole Chrome DevTools de Selenium 4. créant ainsi une alliance puissante qui va au-delà de l’automatisation conventionnelle du navigateur. Cette intégration permet aux testeurs de débloquer des fonctionnalités avancées, offrant un contrôle inégalé sur le comportement du navigateur et améliorant la profondeur des informations acquises lors des tests.

Tout au long de cette série de blogs, nous explorerons des facettes spécifiques de l’intégration de Selenium CDP. Découvrez tout le potentiel du protocole Chrome DevTools pour améliorer les tests Web. Notre voyage commence en nous concentrant sur la simulation de la navigation mobile, où nous démystifierons les subtilités du remplacement des métriques des appareils avec Selenium CDP. Rejoignez-nous alors que nous embarquons dans un voyage vers l’optimisation des tests Web avec Selenium CDP.

Méthode et événements

Méthode

Dans Selenium CDP, les méthodes font référence aux actions ou fonctions spécifiques que vous pouvez appeler pour interagir avec le navigateur Chrome via le protocole Chrome DevTools. Avec les méthodes, vous pouvez manipuler divers aspects du comportement du navigateur, tels que l’émulation de différents appareils, le contrôle des conditions du réseau et l’accès aux mesures de performances.

Par exemple, lors de l’émulation du comportement d’un navigateur pour simuler un appareil mobile, vous utiliserez des méthodes liées au remplacement des métriques de l’appareil. Ces méthodes vous permettent de définir des paramètres tels que la largeur, la hauteur, le rapport de pixels, etc. de l’appareil, incitant ainsi le navigateur à se comporter comme s’il s’exécutait sur un appareil mobile spécifique.

Événements

Les événements, quant à eux, sont des occurrences ou des déclencheurs qui se produisent dans le navigateur Chrome pendant son fonctionnement. Avec Selenium CDP, nous pouvons les écouter activement, capturer des informations cruciales ou même lancer des actions basées sur des conditions spécifiques..

Lors de l’émulation du comportement du navigateur, les événements deviennent cruciaux pour capturer les réponses et surveiller les modifications. Par exemple, vous pouvez utiliser des écouteurs d’événements pour capturer les réponses du réseau, suivre les mesures de performances ou détecter les erreurs. En tirant parti des événements, vous obtenez une compréhension en temps réel des activités du navigateur, permettant des tests et un débogage plus complets.

Émulation du comportement du navigateur en remplaçant les métriques des appareils via l’automatisation

Nous définirons les métriques des appareils dans le navigateur Chrome Devtool à l’aide de Selenium et CDP. À des fins de démonstration, nous utiliserons un exemple de site Web et définirons la vue du navigateur comme une vue mobile en remplaçant les métriques de l’appareil dans le script Selenium. Et effectuez une action de clic sur le site Web en vue mobile.

Vous trouverez ci-dessous le script et l’explication étape par étape du code du flux :

import java.util.Optional;

import org.openqa.selenium.By;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.devtools.DevTools;
import org.openqa.selenium.devtools.v120.emulation.Emulation;

import io.github.bonigarcia.wdm.WebDriverManager;

public class emul {

    public static void main(String[] args) {
        
        //Create driver -> The WebTool is applicable only for chromium based browwsers
        WebDriverManager.chromedriver().setup();
        ChromeDriver driver  = new ChromeDriver();
        
        //Create DevTool class object
        DevTools devTools = driver.getDevTools();
        
        //start session 
        devTools.createSession();
        
        //send command to CDP methods -> CDP method will invoke and get access to Chrome DevTool
        
        //CDP Method > setDeviceMetricsOverride , parameters value used width= 600, height=1000, deviceScaleFactor=50%, mobile=true and other parameters as Optional.empty()
        devTools.send(Emulation.setDeviceMetricsOverride(600, 1000, 50, true, Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty(), Optional.empty()));
        
        //perform test
        driver.get("rahulshettyacademy.com/angularAppdemo/");
        driver.findElement(By.cssSelector(".navbar-toggler")).click();
        driver.findElement(By.cssSelector("Library")).click();
        
    }
}

La méthode de classe d’émulation que nous utilisons accepte les paramètres de métriques de l’appareil tels que la largeur, la hauteur, le facteur d’échelle de l’appareil, la vue mobile, etc.

Nous avons fourni les valeurs des paramètres souhaités et pour les autres paramètres, nous utilisons « Optional.empty() » comme argument à la place de null.

Optional.empty() fait partie du java.util package et est principalement utilisé dans la programmation Java pour travailler avec le Optional classe. Le Optional La classe est conçue pour fournir un moyen plus expressif de gérer les situations dans lesquelles une valeur peut être absente, sans utiliser explicitement de références nulles.

Pour plus de détails sur les paramètres, vous pouvez vous référer à la section particulière de la documentation mentionnée ci-dessous.

Nous pouvons trouver diverses méthodes et événements CDP dans la documentation officielle Protocole Chrome DevTools.

Conclusion

La fusion de Selenium et du protocole Chrome DevTools dans Selenium 4 marque une avancée majeure dans les tests Web. En passant des informations fondamentales aux outils de développement Chrome, nous avons appliqué de manière transparente les méthodes et les événements dans Selenium CDP, révélant une synergie dynamique. Cette intégration offre aux testeurs un contrôle inégalé, illustré dans notre démonstration pratique où les métriques de l’appareil ont été remplacées pour l’émulation mobile. En conclusion, il est évident que la collaboration de Selenium avec CDP n’est pas simplement une fonctionnalité ; c’est une passerelle vers l’innovation. Le voyage ne fait que commencer, promettant une évolution continue des tests Web. Restez à l’écoute pour plus d’informations et abordez l’avenir des tests en toute confiance.