Application mobile: Comment tester les applications React avec Selenium : Tutoriel

Selenium et React sont les deux outils populaires, uniques à leur manière et communs dans les cercles de développement et de test de logiciels. React est une bibliothèque JavaScript destinée à créer des interfaces utilisateur interactives. D’autre part, Selenium est utilisé pour effectuer des tests d’automatisation sur de telles interfaces utilisateur et pages Web. Ils sont souvent utilisés en tandem, comme cet article le démontrera.

Cet article explorera comment ces deux outils vont de pair et dans quels cas Selenium et React correspondent le mieux aux scénarios et environnements de test.

Commençons!

Introduction à Sélénium et React

Application mobile: Comment tester les applications React avec Selenium : Tutoriel

Application mobile: Comment tester les applications React avec Selenium : Tutoriel

  • Selenium est un outil de test fonctionnel open source souvent utilisé pour tester des applications Web sur plusieurs navigateurs et systèmes d’exploitation (plateformes).
  • React est une bibliothèque JavaScript frontale open source souvent utilisée pour créer des interfaces utilisateur ou des éléments d’interface utilisateur. Il est maintenu par Facebook et une communauté de développeurs individuels et d’organisations. React peut être utilisé comme base lors du développement d’applications monopages ou mobiles.

Tout d’abord, configurons ces deux outils.

Comment configurer Sélénium

Assurez-vous que les liaisons de langue de Selenium sont installées et prêtes en exécutant :

sudo pip install selenium
sudo pip install requests

Une fois cette installation terminée, commençons à écrire le premier scénario de test.

Comment exécuter des applications React avec Selenium

Configuration du pilote Web à l’aide de Node.js est assez simple.

const webdriver = require("selenium-webdriver");
const driver = new webdriver.Builder().forBrowser("firefox").build();
// Instantiate a web browser page
driver.navigate().to(Yahoo");

Après avoir configuré Selenium WebDriver, continuez et ajoutez des flux de contrôle au code. méthodes de WebDriver sont asynchrones. Par exemple, localiser un élément à l’aide d’un sélecteur CSS est une opération asynchrone. Toutes les opérations asynchrones renvoient (Promises) dans le Selenium WebDriver, afin que les testeurs puissent les enchaîner via le alors() méthode.

Noter: Les promesses sont des méthodes de retour qui stockent la valeur de l’élément lorsque des opérations asynchrones ont lieu pour les réclamer via then().

const By = webdriver.By; // useful Locator utility to describe a query for a WebElement
driver.navigate().to("Yahoo")
.then(() => driver.findElement(By.css("#login-username")))
.then(element => element.getAttribute("value"))
.then(value => console.log(value));

Les driver.findElement() renvoie une promesse pour un élément Web, qui est principalement l’interface pour inspecter et manipuler les éléments DOM dans Selenium.

driver.navigate().to("Yahoo")
.then(() => driver.findElement(By.css("#login-username")))
.then(element => element.getAttribute("value"))
.then(value => console.log(value));
const until = webdriver.until; // useful utility to wait command
driver.navigate().to(“Yahoo”)
.then(() => driver.findElement(By.css('#login-username')).sendKeys('xyz@yahoo.com'))
.then(() => driver.wait(until.elementLocated(By.css('#login-signin'))))
.then(() => driver.findElement(By.css('#login-signin')).click()))

Exemple de réaction au sélénium

Noter: La connexion sera réussie si une adresse e-mail valide est fournie. Si vous n’en avez pas, assurez-vous de créer une adresse e-mail pour un compte Yahoo ou vous pouvez utiliser n’importe quel autre compte.

Chaque fois que le testeur appelle une tâche WebDriver asynchrone sans la résoudre, le WebDriver pousse en fait cette tâche vers une file d’attente globale. Dès que le testeur résout une promesse (en utilisant alors()), ou après le prochain tick de la boucle d’événements JavaScript, toutes les tâches en file d’attente sont exécutées dans l’ordre dans lequel elles ont été planifiées comme si elles étaient synchrones. C’est ce qu’on appelle le flux de contrôle.

C’est ainsi que les utilisateurs de Selenium peuvent ajouter React à Selenium Webdriver et intégrer les outils pour un développement plus efficace.

Gardez à l’esprit que tous les tests Selenium doivent être exécutés sur de vrais navigateurs et appareils pour des résultats précis. Commencez à exécuter des tests sur plus de 2000 navigateurs et appareils réels sur le cloud d’appareils réels de BrowserStack. Exécutez des tests parallèles sur sa grille Cloud Selenium pour obtenir des résultats plus rapides sans compromettre la précision. Détecte les bugs et offre une UX/UI haut de gamme aux utilisateurs par des tests automatisés dans des conditions réelles d’utilisation avec BrowserStack Automate.

Exécuter des tests Selenium sur de vrais appareils

#Comment #tester #les #applications #React #avec #Selenium #Tutoriel