Fermer

avril 12, 2018

Automatiser vos tests de fonctionnalités avec Selenium WebDriver


Cet article s'adresse aux développeurs Web qui souhaitent passer moins de temps à tester la partie frontale de leurs applications Web tout en restant convaincus que chaque fonctionnalité fonctionne correctement. Cela vous fera gagner du temps en automatisant les tâches en ligne répétitives avec Selenium WebDriver. Vous trouverez un exemple étape par étape pour automatiser et tester la fonction de connexion de WordPress, mais vous pouvez également adapter l'exemple pour tout autre formulaire de connexion.

Selenium est un framework pour le test automatisé d'applications Web. En utilisant Selenium, vous pouvez automatiser toutes les tâches de votre navigateur comme si une personne réelle devait exécuter la tâche. L'interface utilisée pour envoyer des commandes aux différents navigateurs s'appelle Selenium WebDriver. Les implémentations de cette interface sont disponibles pour tous les principaux navigateurs, y compris Mozilla Firefox, Google Chrome et Internet Explorer.

Quel type de développeur Web êtes-vous? Êtes-vous le type discipliné qui teste toutes les fonctionnalités clés de votre application Web après chaque déploiement. Si oui, vous êtes probablement ennuyé par combien de temps ce test répétitif consomme. Ou êtes-vous le type qui ne prend pas la peine de tester les fonctionnalités clés et pense toujours, "Je devrais tester plus, mais je préfère développer de nouvelles choses." Si oui, vous ne trouverez probablement que des bugs par hasard ou Le patron s'en plaint

Je travaille depuis longtemps pour un détaillant en ligne bien connu en Allemagne, et j'ai toujours appartenu à la deuxième catégorie: c'était tellement excitant de penser à de nouvelles fonctionnalités pour la boutique en ligne, et Je n'aimais pas du tout revoir toutes les fonctionnalités précédentes après chaque nouveau déploiement de logiciel. Ainsi, la stratégie était plus ou moins d'espérer que toutes les fonctionnalités clés fonctionneraient.

Un jour, nous avons eu une baisse importante de notre taux de conversion et avons commencé à creuser dans nos outils d'analyse Web pour trouver la source de cette baisse. Il nous a fallu beaucoup de temps avant de découvrir que notre extraction ne fonctionnait pas correctement depuis le déploiement du logiciel précédent.

Ce jour-là, j'ai commencé à faire des recherches sur l'automatisation de notre processus de test d'applications web. et son WebDriver. Le sélénium est essentiellement un cadre qui vous permet d'automatiser les navigateurs Web. WebDriver est le nom de l'interface clé qui vous permet d'envoyer des commandes à tous les principaux navigateurs (mobiles et de bureau) et de travailler avec eux comme un vrai utilisateur.

Préparation du premier test avec Selenium WebDriver

un peu sceptique quant à savoir si Selenium répondrait à mes besoins car le framework est le plus couramment utilisé en Java, et je ne suis certainement pas un expert Java. Plus tard, j'ai appris qu'être un expert Java n'est pas nécessaire pour profiter de la puissance du framework Selenium.

Comme un premier test simple, j'ai testé le login d'un de mes projets WordPress. Pourquoi WordPress? Tout simplement parce que l'utilisation du formulaire de connexion WordPress est un exemple que tout le monde peut suivre plus facilement que si je devais me référer à une application web personnalisée.

De quoi avez-vous besoin pour commencer à utiliser Selenium WebDriver? Parce que j'ai décidé d'utiliser l'implémentation la plus courante de Selenium en Java, j'avais besoin de configurer mon petit environnement Java.

Si vous voulez suivre mon exemple, vous pouvez utiliser l'environnement Java de votre choix. Si vous n'en avez pas encore configuré, je vous suggère d'installer Eclipse et de vous assurer que vous pouvez exécuter un simple script "Hello world" en Java .

Parce que je voulais Pour tester la connexion dans Chrome, j'ai vérifié que le navigateur Chrome était déjà installé sur mon ordinateur. C'est tout ce que j'ai fait en préparation.

Téléchargement du pilote ChromeDriver

Tous les principaux navigateurs fournissent leur propre implémentation de l'interface WebDriver. Parce que je voulais tester la connexion WordPress dans Chrome, je devais obtenir l'implémentation WebDriver de Chrome: ChromeDriver.

J'ai extrait l'archive ZIP et stocké le fichier exécutable chromedriver.exe

Configurer notre projet sélénium dans Eclipse

Les étapes que j'ai suivies dans Eclipse sont probablement assez basiques pour quelqu'un qui travaille beaucoup avec Java et Eclipse. Mais pour ceux qui comme moi, qui ne sont pas si familiers avec cela, je vais passer en revue les différentes étapes:

  1. Open Eclipse
  2. Cliquez sur l'icône "Nouveau"
     Créer un nouveau projet dans Eclipse
    Création d'un nouveau projet dans Eclipse
  3. Choisissez l'assistant pour créer un nouveau "Projet Java" et cliquez sur "Suivant".
     Choisir l'assistant java-project
    Choisir le projet java
  4. Attribuez un nom à votre projet et cliquez sur "Terminer".
     Assistant projet Eclipse
    Assistant projet Eclipse
  5. Vous devriez maintenant voir votre nouveau projet Java sur le côté gauche de l'écran
     Projet Java créé avec succès
    Nous avons créé avec succès un projet pour exécuter le pilote Web Selenium

Ajout de la bibliothèque sélénium à notre projet

projet, mais Selenium est toujours manquant. Donc, ensuite, nous devons intégrer le framework Selenium dans notre projet Java. Voici les étapes que j'ai suivies:

  1. Télécharger la dernière version de la bibliothèque Java Selenium
     Télécharger la bibliothèque Selenium
    Télécharger la bibliothèque Selenium.
  2. Extrayez l'archive et stockez le dossier dans un endroit dont vous vous souviendrez facilement
  3. Revenez à Eclipse et allez dans "Projet" → "Propriétés".
     Propriétés Eclipse
    Accéder aux propriétés pour intégrer le Sélénium WebDriver dans votre projet
  4. Dans la boîte de dialogue, allez dans "Java Build Path" et ensuite pour enregistrer "Libraries."
  5. Cliquez sur "Add External JARs."
     Ajout du sélénium lib à votre chemin de compilation Java.
    Ajoutez la librairie Selenium à votre chemin de compilation Java.
  6. Accédez au dossier qui vient d'être téléchargé avec la bibliothèque Selenium. Mettez en surbrillance tous les fichiers .jar et cliquez sur "Ouvrir".
     Sélection des fichiers corrects de la bibliothèque sélénium
    Sélectionnez tous les fichiers de la lib à ajouter à votre projet.
  7. Répétez cela pour tous les fichiers .jar dans le sous-dossier libs
  8. Finalement, vous devriez voir tous les fichiers .jar dans les bibliothèques de votre projet:
     Intégration réussie du framework Selenium WebDriver dans votre projet
    Le framework Selenium WebDriver a été intégré avec succès dans votre projet!

C'est tout! Tout ce que nous avons fait jusqu'à maintenant est une tâche ponctuelle. Vous pouvez utiliser ce projet maintenant pour tous vos différents tests, et vous n'aurez pas besoin de refaire le processus d'installation pour chaque test.

Créer notre classe de test et la laisser ouvrir le navigateur Chrome

Maintenant, nous avons notre projet Selenium, mais après? Pour voir si cela fonctionne, je voulais essayer quelque chose de très simple, comme ouvrir mon navigateur Chrome.

Pour ce faire, j'avais besoin de créer une nouvelle classe Java à partir de laquelle je pourrais exécuter mon premier cas de test. Dans cette classe exécutable, j'ai copié quelques lignes de code Java, et croyez-le ou non, ça a marché! Magiquement, le navigateur Chrome s'ouvrit et, après quelques secondes, se ferma tout seul.

Essayez-le vous-même:

  1. Cliquez à nouveau sur le bouton "Nouveau" (lorsque vous êtes dans le dossier de votre nouveau projet). Nouvelle classe dans Eclipse « />
    Créer une nouvelle classe pour exécuter le Selenium WebDriver
  2. Choisissez l'assistant "Classe", et cliquez sur "Suivant".
     Assistant de nouvelle classe dans Eclipse
    Choisissez l'assistant de classe Java pour créer une nouvelle classe
  3. Nommez votre classe (par exemple, "RunTest") et cliquez sur "Terminer".
     Assistant Eclipse Java Class
    L'éclipse Assistant de classe Java.
  4. Remplacez tout le code de votre nouvelle classe par le code suivant. La seule chose que vous devez changer est le chemin vers chromedriver.exe sur votre ordinateur:
     import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.chrome.ChromeDriver;
    
    / **
     * @author Nils Schuette via frontendtest.org
     * /
    Classe publique RunTest {
        WebDriver WebDriver statique;
        / **
         * @param args
         * @throws InterruptedException
         * /
        static public void principal (arguments String final []) throws InterruptedException {
            // Indiquer au système où trouver le pilote chromé
            System.setProperty (
                    "webdriver.chrome.driver",
                    "C: /PATH/TO/chromedriver.exe");
    
            // Ouvre le navigateur Chrome
            webDriver = nouveau ChromeDriver ();
    
            // Attendre un peu avant de fermer
            Thread.sleep (7000);
    
            // Fermeture du navigateur et de WebDriver
            webDriver.close ();
            webDriver.quit ();
        }
    }
    
  5. Sauvegardez votre fichier et cliquez sur le bouton de lecture pour exécuter votre code
     Exécutez le projet Eclipse
    Exécutez votre premier projet Selenium WebDriver
  6. Si vous avez tout fait correctement, le code devrait ouvrir un nouveau instance du navigateur Chrome et fermez-le peu de temps après.
     Fenêtre vide Chrome Browser
    Le navigateur Chrome s'ouvre par magie. ( Grand aperçu )

Tester l'ouverture de session de WordPress Admin

Maintenant j'étais optimiste que je pourrais automatiser mon premier petit test de fonctionnalité. Je voulais que le navigateur accède à l'un de mes projets WordPress, connecte-toi à la zone d'administration et vérifie que la connexion a été réussie.

  1. Accédez au formulaire de connexion,
  2. Localisez les champs de saisie,
  3. Saisissez le nom d'utilisateur et le mot de passe dans les champs de saisie,
  4. Appuyez sur le bouton de connexion, [19659076] Comparer le titre de la page en cours pour voir si la connexion a été réussie.

Encore une fois, après avoir fait toutes les mises à jour nécessaires à mon code et cliqué sur le bouton Exécuter dans Eclipse, mon navigateur a commencé à fonctionner magiquement. s'identifier. J'ai couru avec succès mon premier test automatisé de site Web!

Si vous voulez essayer ceci vous-même, remplacez tout le code de votre classe Java par ce qui suit. Je vais passer en revue le code en détail par la suite. Avant d'exécuter le code, vous devez remplacer quatre valeurs par les vôtres:

  1. L'emplacement de votre fichier chromedriver.exe (comme ci-dessus),

  2. L'URL du compte d'administrateur WordPress vous voulez tester,

  3. Le nom d'utilisateur WordPress,

  4. Le mot de passe WordPress.

Ensuite, sauvegardez-le et laissez-le fonctionner à nouveau. Il ouvrira Chrome, naviguez vers le login de votre site WordPress, connectez-vous et vérifiez si le h1 titre de la page actuelle est "Dashboard".

 import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

/ **
 * @author Nils Schuette via frontendtest.org
 * /
Classe publique RunTest {
    WebDriver WebDriver statique;
    / **
     * @param args
     * @throws InterruptedException
     * /
    static public void principal (arguments String final []) throws InterruptedException {
        // Indiquer au système où trouver le pilote chromé
        System.setProperty (
                "webdriver.chrome.driver",
                "C: /PATH/TO/chromedriver.exe");

        // Ouvre le navigateur Chrome
        webDriver = nouveau ChromeDriver ();

        // Agrandir la fenêtre du navigateur
        webDriver.manage (). window (). maximize ();

        if (testWordpresslogin ()) {
            System.out.println ("Test WordPress Login: Réussi");
        } autre {
            System.out.println ("Test WordPress Login: Échec");

        }

        // Ferme le navigateur et WebDriver
        webDriver.close ();
        webDriver.quit ();
    }

    private static boolean testWordpresslogin () {
        essayez {
            // Ouvrir google.com
            webDriver.navigate (). à ("https://www.YOUR-SITE.org/wp-admin/");

            // Tapez le nom d'utilisateur
            webDriver.findElement (By.id ("user_login")). sendKeys ("VOTRE_USERNAME");

            // Tapez le mot de passe
            webDriver.findElement (By.id ("user_pass")). sendKeys ("VOTRE_PASSWORD");

            // Cliquez sur le bouton Soumettre
            webDriver.findElement (By.id ("wp-submit")). click ();

            // Attends un peu (7000 millisecondes)
            Thread.sleep (7000);

            // Vérifie si le h1 est égal à "Dashboard"
            if (webDriver.findElement (By.tagName ("h1")). getText ()
                    .equals ("Tableau de bord")) {
                retourner vrai;
            } autre {
                return false;
            }

        // Si quelque chose ne va pas, retourne false.
        } catch (Exception finale e) {
            System.out.println (e.getClass (). ToString ());
            return false;
        }
    }
}

Si vous avez tout fait correctement, votre sortie dans la console Eclipse doit ressembler à ceci:

 Résultat du test de la console Eclipse
La console Eclipse indique que notre premier test est passé. ( Grand aperçu )

Comprendre le code

Parce que vous êtes probablement un développeur web et avez au moins une compréhension basique des autres langages de programmation, je suis sûr que vous connaissez déjà l'idée de base du code : Nous avons créé une méthode distincte, testWordpressLogin pour le cas de test spécifique appelé par notre méthode principale.

Selon que la méthode renvoie true ou false, vous obtiendrez une sortie dans votre console vous dire si ce test spécifique a réussi ou échoué.

Cela n'est pas nécessaire, mais vous pouvez facilement ajouter beaucoup d'autres cas de test à cette classe tout en ayant un code lisible.

Maintenant, pas à pas, voici ce que arrive dans notre petit programme:

  1. Tout d'abord, nous indiquons à notre programme où il peut trouver le WebDriver spécifique pour Chrome.
     System.setProperty ("webdriver.chrome.driver", "C: / PATH / TO / chromedriver. exe ");  

        

  2. Nous ouvrons le navigateur Chrome et maximisons la fenêtre du navigateur.
     webDriver = new ChromeDriver ();
    webDriver.manage (). window (). maximize ();  
  3. C'est ici que nous sautons dans notre sous-méthode et vérifions si elle retourne vrai ou faux
     if (testWordpresslogin ()) ...  
  4. La partie suivante de notre sous-méthode peut ne pas être intuitive à comprendre:
    Les try {...} catch {...} blocs. Si tout se passe comme prévu, seul le code dans try {...} sera exécuté, mais si quelque chose ne va pas pendant l'exécution de essayez {...} puis l'exécution continue dans attraper {} . Chaque fois que vous essayez de localiser un élément avec findElement et que le navigateur ne trouve pas cet élément, il lève une exception et exécute le code dans catch {...} . Dans mon exemple, le test sera marqué comme "échoué" chaque fois que quelque chose se passe mal et que le catch {} est exécuté
  5. Dans la sous-méthode, nous commençons par naviguer vers notre zone d'administration WordPress et localiser le champs pour le nom d'utilisateur et le mot de passe en recherchant leurs identifiants. De plus, nous tapons les valeurs données dans ces champs.
     webDriver.navigate (). To ("https://www.YOUR-SITE.org/wp-admin/");
    webDriver.findElement (By.id ("user_login")). sendKeys ("VOTRE_USERNAME");
    webDriver.findElement (By.id ("user_pass")). sendKeys ("VOTRE_PASSWORD"); 

     Formulaire de connexion WordPress
    Selenium remplit notre formulaire de connexion
  6. Après avoir rempli le formulaire de connexion, nous trouvons le bouton par son identifiant et cliquez dessus
     webDriver.findElement (By.id ("wp-submit")). click ();  
  7. Afin de suivre le test visuellement, j'inclus une pause de 7 secondes ici (7000 millisecondes = 7 secondes).
     Thread.sleep (7000);  
  8. Si la connexion réussit, le titre h1 de la page en cours doit désormais être "Tableau de bord", en référence à la zone d'administration de WordPress. Comme le titre h1 ne doit exister qu'une seule fois sur chaque page, j'ai utilisé le nom de la balise ici pour localiser l'élément. Dans la plupart des autres cas, le nom de la balise n'est pas un bon localisateur car un nom de balise HTML est rarement unique sur une page Web. Après avoir localisé le h1 nous extrayons le texte de l'élément avec getText () et vérifions s'il est égal à la chaîne "Dashboard". Si le login n'est pas réussi, nous le ferions pas trouver "Dashboard" comme le courant h1 . Par conséquent, j'ai décidé d'utiliser le h1 pour vérifier si la connexion est réussie.
     if (webDriver.findElement (By.tagName ("h1")). GetText (). Tableau de bord"))
        {
            retourner vrai;
        } autre {
            return false;
        }
    

     WordPress Dashboard
    Laisser le WebDriver vérifier, si nous sommes arrivés sur le tableau de bord: Test réussi! ( Grand aperçu )
  9. Si quelque chose s'est mal passé dans la partie précédente de la sous-méthode, le programme aurait directement passé à la partie suivante. Le bloc catch affichera le type d'exception qui est arrivé à la console et retournera ensuite false à la méthode principale.
     catch (Exception finale e) {
                System.out.println (e.getClass (). ToString ());
                return false;
            } 

Adaptation du scénario de test

C'est là que ça devient intéressant si vous voulez adapter et ajouter vos propres cas de test. Vous pouvez voir que nous appelons toujours les méthodes de l'objet webDriver pour faire quelque chose avec le navigateur Chrome.

Tout d'abord, nous maximisons la fenêtre:

 webDriver.manage (). Window (). Maximize (); 

Ensuite, dans une méthode séparée, nous naviguons vers notre zone d'administration WordPress:

 webDriver.navigate (). To ("https://www.YOUR-SITE.org/wp-admin/"); 

Il existe d'autres méthodes de l'objet webDriver que nous pouvons utilisation. Outre les deux ci-dessus, vous utiliserez probablement celui-ci beaucoup:

 webDriver.findElement (By. ...) 

La méthode findElement nous aide à trouver différents éléments dans le DOM. Il existe différentes options pour trouver des éléments:

  • By.id
  • Par.cssSelector
  • Par.className
  • Par.linkText
  • Par.nom
  • Par.xpath

Si possible, je recommande d'utiliser By.id car l'ID d'un élément devrait toujours être unique (contrairement, par exemple, au className ), et il n'est généralement pas affecté si la structure de votre DOM change (contrairement, disons, au xPath ).

Note : Vous pouvez en savoir plus sur les différentes options pour localiser des éléments avec WebDriver sur ici .

Dès que vous obtenez un élément avec La méthode findElement vous pouvez appeler les différentes méthodes disponibles de l'élément. Les plus communs sont sendKeys cliquez sur et getText .

Nous utilisons sendKeys pour remplir le formulaire de connexion:

 webDriver.findElement (By.id ("user_login")). SendKeys ("VOTRE_USERNAME"); 

Nous avons utilisé cliquez pour soumettre le formulaire de connexion en cliquant sur le bouton soumettre:

 webDriver.findElement (By.id ("wp-submit")). Click (); 

Et getText a été utilisé pour vérifier quel texte est dans le h1 ] après avoir cliqué sur le bouton Soumettre:

 webDriver.findElement (By.tagName ("h1")). GetText () 

Note : N'oubliez pas de vérifier toutes les méthodes disponibles que vous pouvez utiliser avec un élément

Conclusion

Depuis que j'ai découvert la puissance de Selenium WebDriver, ma vie de développeur web a changé. Je l'aime simplement. Plus je plonge dans le cadre, plus je découvre de possibilités – en exécutant un test simultanément dans Chrome, Internet Explorer et Firefox ou même sur mon smartphone, ou en prenant automatiquement des captures d'écran de différentes pages et en les comparant. Aujourd'hui, j'utilise Selenium WebDriver non seulement à des fins de test, mais aussi pour automatiser des tâches répétitives sur le web . Chaque fois que je vois une opportunité d'automatiser mon travail sur le web, je copie simplement mon projet WebDriver initial et je l'adapte à la prochaine tâche.

Si vous pensez que Selenium WebDriver est fait pour vous, je vous recommande de consulter pour connaître toutes les possibilités de Selenium (comme exécuter des tâches simultanément sur plusieurs appareils (mobiles) avec Selenium Grid).

J'attends avec impatience de savoir si WebDriver est utile comme je le fais

 Smashing Editorial (rb, ra, al, il)




Source link