Tutoriel Web Driver IO utilisant un site Web en direct et des exemples de travail : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Tutoriel Web Driver IO à l'aide d'un site Web en direct et d'exemples de travail

Dernière mise à jour: 2015-07-26

(Revenez souvent pendant que je mets à jour ces instructables avec plus de détails et d'exemples)

Fond

J'ai récemment eu un défi intéressant qui m'a été présenté. J'avais besoin d'introduire les tests automatisés dans un service Q/A avec très peu d'expérience technique et aucune expérience en programmation.

Il s'agissait en réalité de deux (2) défis distincts. La première consistait à identifier les technologies permettant d'effectuer les tests automatisés. La seconde était de former le département Q/A.

L'article ne traitera que des technologies utilisées et de ce que j'ai appris au cours du processus.

Les technologies fonctionnaient bien, mais j'ai vraiment dû chercher des informations et j'ai passé de nombreuses heures à résoudre les problèmes.

J'ai eu du mal à trouver sur Internet des informations sur ces technologies fonctionnant toutes ensemble.

Je voulais partager ces informations, j'ai donc écrit cet article avec des exemples de scripts de test fonctionnels et un site Web de test sur lequel exécuter les scripts.

Tous les scripts de test peuvent être trouvés sur github et le site de test fonctionnel est situé sur le site de test du didacticiel Web Driver IO

J'espère que tu trouves cela utile. Si vous le faites, s'il vous plaît laissez-moi savoir.

ObjectifsUtiliser les technologies pour:

• Tester la fonctionnalité du site Web
• Tester la fonctionnalité JavaScript
• Peut être exécuté manuellement
• Peut être exécuté automatiquement

• Langage facile à apprendre pour les non-programmeurs

  Personnel Q/A avec des connaissances de base en HTML et JavaScript

• Utiliser uniquement des logiciels open source

Les technologies

Liste des technologies que je choisis:

• mocha - test runner - exécute les scripts de test
• shouldjs – bibliothèque d'assertions
• webdriverio – liaisons de contrôle du navigateur (liaisons de langue)
• sélénium - abstraction du navigateur et usine en cours d'exécution

• Navigateur/pilotes mobiles + navigateurs

  • Firefox (navigateur uniquement)
  • Chrome (navigateur et pilote)
  • IE (navigateur et pilote)
  • Safari (Navigateur et plug-in de pilote)

Étape 1: Installation du logiciel

Pour commencer, vous devez avoir installé le serveur autonome Node JS, Web Driver IO, Mocha, Should et Selenium.

Voici les instructions d'installation pour Windows 7.

(Je suis un utilisateur Mac/Linux mais j'ai dû tout installer sur des machines Windows 7, c'est pourquoi je l'ai inclus pour votre référence. La procédure d'installation sur un Mac/Linux est similaire. Veuillez consulter les références en ligne pour plus d'informations informations.)

Depuis un navigateur:

• Installer un nœud qui inclut NPM (Node Package Manager)

• allez sur

  • Cliquez sur installer
  • Enregistrer et exécuter le fichier
  • Définir le chemin et la variable (NODE_PATH)

  • Allez dans Panneau de configuration->Système et sécurité->Système

    • Réglages avancés du système

    • Paramètre d'environnement (variables utilisateur)

      • Ajouter au CHEMIN

        C:\Users\{USERNAME}\AppData\Roaming\npm;

      • Ajouter le NODE_PATH (variables système)

        C:\Users\{USERNAME}\AppData\Roaming\npm\node_modules

Remarque: j'ai installé tous les logiciels ci-dessous à l'aide de l'option globale npm (-g). Ce n'est normalement pas recommandé, mais pour cette installation, je devais l'installer globalement car il serait utilisé dans plusieurs projets.

Ouvrir l'invite de commande (cmd):

(administrateur utilisateur local)

• Installer sélénium "web driver IO"

  • npm installer webdriverio -g

    Cela installera le pilote Web IO globalement sur votre machine

• Installez le logiciel de testeur "moka"

  • npm installer moka -g

    Cela installera moka globalement sur votre machine

• Installer la bibliothèque d'assertions « devrait »

  • npm install devrait -g

    Cela installera « devrait » globalement sur votre machine

• Installer le serveur autonome Selenium

  • Allez sur
  • Téléchargez le fichier jar et déplacez-vous dans le répertoire « selenium ».

• Installez les navigateurs et les pilotes de navigateur pour tester avec

  • À partir de l'invite cmd:

    • Créer un répertoire « sélénium »
    • C:\Utilisateurs\{NOM D'UTILISATEUR}\selenium

    • Commandes:

      • cd C:\Utilisateurs\{NOM D'UTILISATEUR}
      • mkdir sélénium

    • Firefox

      • Installez le navigateur Firefox, s'il n'est pas déjà installé.
      • Le chemin doit être défini pour démarrer Firefox à partir de l'invite de commande (cmd).

      • Panneau de configuration->Système et sécurité->Système

        • Réglages avancés du système
        • Paramètres d'environnement
        • Ajouter (ajouter utiliser un point-virgule) à la variable de chemin
        • C:\Program Files (x86)\Mozilla Firefox
      • Aucun pilote Web spécial requis pour Firefox.

    • Chrome

      • Installez le navigateur Chrome, s'il n'est pas déjà installé.
      • Le chemin PEUT être défini pour démarrer Chrome à partir de l'invite de commande (cmd).
      • Testez d'abord: chrome.exe à partir de l'invite de commande (cmd)
      • Si Chrome ne démarre pas, alors:

      • Panneau de configuration->Système et sécurité->Système

        • Réglages avancés du système
        • Paramètres d'environnement
        • Ajouter (ajouter utiliser un point-virgule) à la variable de chemin
        • C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

      • Un pilote Web spécial est nécessaire pour Chrome.

        Allez sur chromium.org et décompressez le pilote 32 bits dans le répertoire "selenium"

    • Internet Explorer (pour Windows uniquement - ne fonctionnera pas sur d'autres plates-formes)

      • Un pilote Web spécial est nécessaire pour IE.

        • Allez sur
        • Téléchargez et décompressez le pilote 64 bits dans le répertoire « selenium ».

Étape 2: Script de test de base

Commençons par quelques bases.

Voici un simple script moka qui ouvrira un site Web et vérifiera le titre.

// tutoriel1.js

// // Ceci est un script de test simple pour ouvrir un site Web et // valider le titre. // bibliothèques requises var webdriverio = require('webdriverio'), should = require('should'); // un bloc de script de test ou une suite describe('Title Test for Web Driver IO - Tutorial Test Page Website', function() { // définir le délai d'attente à 10 secondes this.timeout (10000); var driver = {}; // hook à exécuter avant les tests before(function (done) { // charge le pilote pour le navigateur driver = webdriverio.remote({ desireCapabilities: {browserName: 'firefox'} }); driver.init(done); }); // une spécification de test - "spécification" it('devrait charger la page et le titre corrects', function () { // charger la page, puis appeler function() return driver.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html') // obtenir le titre, puis passer le titre à function().getTitle().then(function (title) { // vérifier le titre (title).should.be.equal("Web Driver IO - Tutorial Test Page "); // décommenter pour le débogage de la console // console.log('Current Page Title: ' + title); }); }); // un "hook" à exécuter après tous les tests de ce bloc après (function (done) { driver.end(done); }); });

Remarques:

• Vous devriez d'abord remarquer que le script de test est écrit en JAVASCRIPT (se termine par l'extension.js).

• La structure de base est presque identique pour tous les scripts de test.

  • Commentaires d'en-tête (//)
  • Bibliothèques requises
  • Définir les options (facultatif)
  • Crochet: Charger le pilote du navigateur
  • Suite de tests (décrire)
  • Spécifications de test (peut être plusieurs spécifications dans une suite)
  • Crochet: nettoyer

• La suite de tests commence par une fonction de description qui prend deux paramètres:

  • Chaîne - Description de la suite de tests

    • « Vérifiez la page pour le verbiage approprié »
    • « Vérifier les opérations des boutons radio »

  • fonction - bloc de code à exécuter

    describe('Description de la suite de tests', function() { });

• La suite de tests contiendra 1 ou plusieurs spécifications de test (spécification)

• Les spécifications commencent par sa fonction qui prend deux paramètres:

  • Chaîne - Description de la spécification de test

    • "Le texte du lien et l'URL du lien doivent être corrects"
    • « Devrait contenir un verbiage correct (pont de copie)
  • fonction - bloc de code à exécuter
  • it('Description de la spécification de test', function() { });
• Une spécification contient une ou plusieurs attentes qui testent l'état du code

• C'est ce qu'on appelle des affirmations

  La bibliothèque « should » fournit les assertions

• Dans presque tous les cas, vous devrez localiser un ou plusieurs éléments à l'aide d'un sélecteur puis effectuer une opération sur le ou les éléments

  • Exemples:

    • Rechercher du texte sur une page et vérifier le texte
    • Remplir un formulaire et soumettre
    • Vérifier le CSS d'un élément

Regardons de plus près l'exemple avec des commentaires

Chargez les bibliothèques requises: pilote Web IO et devrait.

// bibliothèques requises

var webdriverio = require('webdriverio'), should = require('should');

Définir la suite de tests. Cette suite s'appelle: "Test de titre pour Web Driver IO - Tutorial Test Page Website"

// un bloc ou une suite de script de test

describe('Test de titre pour Web Driver IO - Site Web de la page de test du didacticiel', function() { … });

Définissez le délai d'expiration sur 10 secondes afin que le script n'expire pas lors du chargement de la page.

// fixe le délai d'attente à 10 secondes

this.timeout(10000);

Hook pour charger le pilote du navigateur avant d'exécuter les spécifications "specs". Le pilote Firefox est chargé dans cet exemple.

// hook à exécuter avant les tests

before(function (done) { // charge le pilote pour le navigateur driver = webdriverio.remote({ desireCapabilities: {browserName: 'firefox'} }); driver.init(done); });

Définir la spécification de test.

// une spécification de test - "spécification"

it('devrait être charger la page et le titre corrects', function () { … });

Charger la page du site

.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Obtenez le titre, puis passez le titre à function()

.getTitle().then(fonction (titre) {

… });

Vérifiez le titre à l'aide de la bibliothèque d'assertions should.

(title).should.be.equal("Web Driver IO - Tutorial Test Page");

Crochet pour quitter et nettoyer le pilote une fois terminé.

// un "hook" à exécuter après tous les tests de ce bloc

after(function(done) { driver.end(done); });

Étape 3: Exécutez le script de test

Voyons maintenant ce que fait le script de test lorsqu'il est exécuté.

Commencez par démarrer le serveur autonome Selenium:

• Pour Windows, utilisez la ligne de commande (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• Pour Mac ou Linux, ouvrez le terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Voir capture d'écran ci-dessus

Exécutez ensuite le script de test:

• Pour Windows, utilisez la ligne de commande (cmd):

  • moka
  • # moka tutorial1.js

• Pour Mac ou Linux, ouvrez le terminal:

  • moka
  • $ moka tutorial.js
• Voir capture d'écran ci-dessus

Alors, qu'est-ce-qu'il s'est passé?

Mocha invoque le script "tutorial1.js". Le pilote a démarré le navigateur (Firefox), chargé la page et vérifié le titre.

Étape 4: Exemple de site Web

Tous les exemples sont exécutés sur ce site.

L'exemple de site Web se trouve à l'adresse: Page de test du didacticiel Web Driver IO

Tous les scripts de test peuvent être téléchargés depuis github.

Étape 5: Exemples spécifiques

Tout le code est disponible sur github: Web Driver IO Tutorial sur github

• Vérifiez le lien et le texte du lien dans une liste non ordonnée - "linkTextURL1.js"

  • La liste non ordonnée a un et le lien est le 4ème élément de la liste.
  • L'URL doit être "https://tlkeith.com/contact.html"

// Vérifier le texte du lien Contactez-nous

it('devrait contenir le texte du lien Contactez-nous', function () { return driver.getText("//ul[@id='mylist']/li[4]/a").then(function (link) { console.log('Lien trouvé: ' + lien); (lien).should.equal("Nous contacter"); }); }); // Vérifiez l'URL de contact it('devrait contenir l'URL de contact', function () { return driver.getAttribute("//ul[@id='mylist']/li[4]/a", "href").then(function (link) { (link).should.equal("https://tlkeith.com/contact.html"); console.log('URL found: ' + link); }); });

• Vérifier le texte du droit d'auteur - "Copyright1.js"

  • Le copyright est dans le pied de page Cet exemple montre 2 manières différentes de localiser le texte du copyright:

    • par le comme sélecteur d'élément
    • en utilisant xpath comme sélecteur d'élément

// Vérifier le texte du Copyright en utilisant l'identifiant comme sélecteur d'élément

it('devrait contenir le texte du copyright', function () { return driver.getText("#copyright").then(function (link) { console.log('Copyright found: ' + link); (link).should. equal("Tony Keith - tlkeith.com @ 2015 - Tous droits réservés."); }); }); // Vérifier le texte du copyright en utilisant xpath comme sélecteur d'élément it('devrait contenir le texte du copyright', function () { return driver.getText("//footer/center/p").then(function (link) { console.log('Copyright found: ' + link); (link).should.equal("Tony Keith - tlkeith.com @ 2015 - Tous droits réservés."); }); });

• Remplir les champs de formulaire et envoyer - "formFillSubmit1.js"

  • Remplissez le prénom, le nom et soumettez, puis attendez les résultats.

  • Cet exemple montre 3 méthodes de remplissage du champ de saisie du prénom:

    • par identifiant
    • par xpath à partir de l'entrée
    • par xpath depuis form->input
  • Montre également comment effacer un champ de saisie

// Définir le prénom à l'aide de l'identifiant: Tony

it('devrait définir le prénom sur Tony', function () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Prénom: " + e); }); }); // Efface le prénom à l'aide de l'identifiant it('devrait effacer le prénom', function () { return driver.clearElement("#fname").getValue("#fname").then(function (e) { (e).should.be.equal(""); console.log("Prénom: " + e); }); }); // Définir le prénom à l'aide de xpath depuis l'entrée sur: Tony it('devrait définir le prénom sur Tony', function () { return driver.setValue("//input[@name='fname']", "Tony").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal("Tony"); console.log("First Name: " + e); }); }); // Efface le prénom en utilisant xpath de l'entrée it('devrait effacer le prénom', fonction () { return driver.clearElement("//input[@name='fname']").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal(""); console.log("First Name: " + e); }); }); // Définissez le prénom en utilisant xpath du formulaire sur: Tony it('devrait définir le prénom sur Tony', function () { return driver.setValue("//form[@id='search-form']/input[1]", "Tony").getValue("//form[@id='search-form']/input[1]").then(function (e) { (e).should.be.equal("Tony"); console.log("Prénom: " + e); }); }); // Définissez le nom de famille à l'aide de l'identifiant: Keith it('devrait définir le nom de famille sur Keith', function () { return driver.setValue("#lname", "Keith").getValue("#lname").then (function (e) { (e).should.be.equal("Keith"); console.log("Nom: " + e); }); }); // Soumettre le formulaire et attendre les résultats de la recherche it('devrait soumettre le formulaire et attendre les résultats', function () { return driver.submitForm("#search-form").then(function(e) { console.log(' Soumettre le formulaire de recherche'); }).waitForVisible("#search-results", 10000).then(function (e) { console.log('Search Results Found'); }); });

• Cliquez sur le bouton Afficher/Masquer et vérifiez le texte - "showHideVerify1.js"

  • Le texte est dans un élément show/hide. Le bouton contrôle l'état.

  • Cet exemple montre:

    • Cliquez sur le bouton pour développer
    • Attendre que l'élément soit visible (développé)
    • Vérifier le texte (pont de copie)

// cliquez sur le bouton "Plus d'informations" et vérifiez le texte dans l'élément développé

it('devrait cliquer sur le bouton Plus d'informations et vérifier le texte', function () { return driver.click("#moreinfo").then (function () { console.log('Clicked More Info button'); }).waitForVisible ("#collapseExample", 5000).getText("//div[@id='collapseExample']/div").then (function (e) { console.log('Text: ' + e); (e).should.be.equal("Tout va bien ici!"); }); });

• Valider les erreurs de champ de formulaire - "formFieldValidation.js"

  • Utilisez des scripts de test pour vérifier que les messages d'erreur corrects sont générés.

  • Cet exemple montre:

    Vérifiez les messages texte d'erreur et vérifiez l'emplacement (position de la liste non ordonnée)

it('devrait contenir 5 erreurs: premier/dernier/adresse/ville/état', fonction () {

return driver.getText("//ul[@class='alert alert-danger']/li[1]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Veuillez entrer le prénom'); }).getText("//ul[@class='alert alert-danger']/li[2]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter last name'); }).getText("//ul[@class='alert alert-danger ']/li[3]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter address'); }). getText("//ul[@class='alert alert-danger']/li[4]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Veuillez entrer la ville'); }).getText("//ul[@class='alert alert-danger']/li[5]").then(function (e) { console.log ('Erreur trouvée: ' + e); (e).should.be.equal('Veuillez entrer l'état'); }); });

• Boucler les données pour valider le lien/texte/page URL - "LoopDataExample1.js"

  • Cet exemple montre: Utilisez un tableau de données JSON pour stocker le lien et le nom, puis itérez

    • Vérifier chaque texte et lien d'URL
    • Cliquez sur le lien et chargez la page

// Lier les données - lien et texte

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js", "name": "linkTextURL1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js", "name": "copyright1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js", "name": " formFillSubmit1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js", "name": "showHideVerify1.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js", "name": "dynamicBrowser.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js", "name": "callbackPromise.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "name": "debu gExample1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "name": "formFieldValidation.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "name": "commonLib.js"}, {"link": "https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js", "name": "dataLoopExample1.js"}]; … // boucle sur chaque linkArray linkArray.forEach(function(d) { it('should contenir text/link then goto page - ' + d.name, function() { return driver // assurez-vous que vous êtes sur la page de démarrage.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // vérifier le titre (title).should.be.equal("Web Driver IO - Tutorial Test Page"); }) // trouver l'URL.getAttribute('a=' + d.name, "href").then(function (link) { (link).should.equal(d.link); console.log('URL trouvée: ' + d.link); }) // accédez à la page URL et vérifiez qu'elle existe.click('a=' + d.name).waitForVisible("#js-repo-pjax- container", 10000).then(function () { console.log('Github Page Found'); }); }); });

• Boucle de données statiques pour remplir les champs de formulaire - "loopDataExample2.js"

  • Cet exemple montre: Utilisez un tableau de données JSON pour stocker le nom/prénom

    • Parcourez les données pour remplir les champs du formulaire, puis soumettez le formulaire
    • Attendre la page des résultats
    • Vérifiez le prénom / nom sur la page de résultats

// tableau de données - firstName et lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ": "Jane", "lastName": "Doe"}, {"firstName": "Don", "lastName": "Johnson"}]; … // boucle à travers chaque dataArray dataArray.forEach(function(d) { it('devrait remplir les champs, sumbit page', function() { return driver // assurez-vous que vous êtes sur la page de démarrage.url('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // vérifier le titre (title).should.be.equal("Web Driver IO - Tutorial Test Page"); }).setValue("#fname", d.firstName).getValue("#fname").then(function (e) { (e).should.be.equal(d.firstName); console.log("First Nom: " + e); }).setValue("#lname", d.lastName).getValue("#lname").then(function (e) { (e).should.be.equal(d.lastName); console.log("Nom: " + e); }).submitForm("#search-form").then(function() { console.log('Submit Search Form'); }).waitForVisible("#search-results", 10000).then(function () { console.log('Result Page Found'); }).getText("//h1").then(function (link) { console.log('Texte trouvé: ' + lien); (lien).should.equal("Bienvenue " + d.firstName + " " + d.lastName + "."); }); }); });

• Valider les propriétés CSS - "cssValidation1.js"

  • Cet exemple montre comment:

    • Validez les propriétés CSS suivantes:

      • Couleur
      • rembourrage (haut, bas, droite, gauche)
      • Couleur de l'arrière plan

it('devrait contenir la couleur correcte du texte d'erreur', function () { return driver.getCssProperty("//ul[@class='alert alert-danger']/li[1]", "color").then(function (result) { console.log('Color found: ' + result.parsed.hex + " ou " + result.value); (result.parsed.hex).should.be.equal('#a94442'); }); });

it('devrait contenir un remplissage correct dans la cellule du tableau', fonction () {

return driver // remplissage: en haut à droite en bas à gauche.getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-top").then(function (result) { console.log('padding-top found: ' + result.value); (result.value).should.be.equal('10px'); }).getCssProperty("//table[@id= 'filelist']/thead/tr[1]/td[1]", "padding-bottom").then(function (result) { console.log('padding-bottom found: ' + result.value); (result.value).should.be.equal('10px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding- right").then(function (result) { console.log('padding-right found: ' + result.value); (result.value).should.be.equal('5px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-left").then(function (result) { console.log('padding-left found: ' + result.value); (result.value).should.be.equal('5px'); }); });

it('devrait contenir la couleur d'arrière-plan correcte dans l'en-tête du tableau', fonction () {

return driver.getCssProperty("//table[@id='filelist']/thead", "background-color").then(function (result) { console.log('background color found: ' + result.parsed. hex); (result.parsed.hex).devrait.être.égal('#eeeeee'); }); });

Étape 6: Trucs et astuces

• Débogage:

  • Activez la journalisation au niveau du pilote pour plus de débogage et pour créer des journaux.

    • Définissez logLevel sur « verbose »
    • Définissez logOutput sur le nom du répertoire ('logs')

driver = webdriverio.remote(loglevel: 'verbose', logOutput: 'logs', {desiredCapabilities: {browserName: 'firefox'} });

• Utilisez console.log(), debug(), getText() pour déboguer.

  • console.log() - Utilisez pour afficher des informations pour déterminer l'état.
  • debug () - Utilisez le navigateur/script de pause jusqu'à ce que vous appuyiez sur Entrée sur la ligne de commande.

  • getText() - À utiliser pour vérifier que vous interagissez avec le bon élément.

    Particulièrement utile avec les expressions xpath

// Cliquez sur l'élément 3 de la liste

it('devrait cliquer sur l'élément 3 de la liste', function () { // utilisez getText () pour vérifier que le xpath est correct pour le pilote de retour d'élément.getText("//ul[@id='mylist']/li [3]/div/div/a").then(function (link) { // utiliser console.log() pour afficher les informations console.log('Link found: ' + link); (link).should.equal ("Item 3"); }) // utilisez debug() pour arrêter l'action pour voir ce qui se passe sur le navigateur.debug().click("//ul[@id='mylist']/li[3] /div/div/a").then (function () { console.log('Link clicked'); }) // attend que le formulaire de recherche google apparaisse.waitForVisible("#tsf", 20000).then(function (e) { console.log('Résultats de recherche trouvés'); }); });

• Utilisez la variable d'environnement pour modifier le navigateur de manière dynamique:

  • Utilisez la variable d'environnement SELENIUM_BROWSER pour appeler un navigateur différent sans modifier le script de test à chaque fois.
  • Nécessite un léger changement de codage pour prendre en charge.

Changements de code:

// charge le pilote du navigateur

driver = webdriverio.remote({ desireCapabilities: {browserName: process.env. SELENIUM_BROWSER || 'chrome'} });

Navigateurs pris en charge:

• Internet Explorer - IE 8+ (Windows uniquement)

  SELENIUM_BROWSER=c'est-à-dire moka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER=firefox moka

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER=chrome moka

• Opéra 12+

  SELENIUM_BROWSER=opéra moka

• Safari

  SELENIUM_BROWSER=safari moka

Essai:

• Pour Windows, utilisez le shell git bash:

  • SELENIUM_BROWSER=chrome moka
  • $ SELENIUM_BROWSER=chrome moka DynamicBrowser.js

• Pour Mac ou Linux, ouvrez le terminal:

  • SELENIUM_BROWSER=chrome moka
  • $ SELENIUM_BROWSER=chrome moka DynamicBrowser.js

• Tests réactifs:

  • Déterminez les points d'arrêt en fonction du projet ou du cadre (c.-à-d. bootstrap).

  • Définissez des variables d'environnement pour chaque point d'arrêt:

    • BUREAU - 1200 px
    • TABLETTE - 992 px
    • MOBILE - 768 pixels

  • Développez une commande réutilisable pour lire la variable d'environnement et définir la taille du navigateur.

    Voir exemple ci-dessous

  • Appelez la commande réutilisable dans votre script de test.

// code réutilisable - bibliothèque // extrait de code if(bp == "DESKTOP") { obj.width = 1200; obj.hauteur = 600; nom.obj = pb; } else if(pb == "TABLETTE") { obj.width = 992; obj.hauteur = 600; nom.obj = pb; } else if(bp == "MOBILE") { obj.width = 768; obj.hauteur = 400; nom.obj = pb; }

// Tester le script

before(function(done) { winsize = common.getWindowSizeParams(); … driver.addCommand('setWindowSize', common.setWindowSize.bind(driver)); } // définir la taille de la fenêtre it('devrait définir la taille de la fenêtre', function (done) { // seule la largeur compte driver.setWindowSize(winsize.width, winsize.height, function () {}).call(done); });

• Commandes réutilisables (commandes personnalisées):

  • Web Driver IO est facilement extensible.
  • J'aime mettre toutes les commandes réutilisables dans une bibliothèque. (peut-être que c'est de la vieille école mais ça marche !)

common/commonLib.js

// vérifierNomVérifierError()

// // Description: // Vérifie le message d'erreur de validation du formulaire de nom de famille // // Entrée: // nombre - indice d'erreur (1-5) // Sortie: // aucun // var verifyLastNameCheckError = function () { var idx = arguments[0], rappel = arguments[arguments.length - 1]; this.getText("//ul[@class='alert alert-danger']/li[" + idx + "]", function(err, e) { console.log('Error found: ' + e); (e).should.be.equal('Veuillez entrer le nom de famille'); }).call(callback); }; // exporter le module de fonction.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Voici les modifications spécifiques nécessaires pour appeler une fonction réutilisable

Voir formFieldValidation.js pour un exemple de travail complet

// nécessite la commande réutilisable - CommonLib

commun = require('./Common/CommonLib'); … // lier les commandes driver.addCommand('verifyFirstNameError', common.verifyFirstNameCheckError.bind(driver)); driver.addCommand('verifyLastNameError', common.verifyLastNameCheckError.bind(driver)); it('devrait contenir 2 erreurs: prénom/nom', fonction () { // appeler le pilote de fonction réutilisable.verifyFirstNameError(1);.verifyLastNameError(2); });

• Structure du fichier/répertoire du projet:

  • Voici la structure type d'un projet:

    • "Projet" - répertoire principal du projet

      • README.md - readme pour le projet global

      • "Common" - répertoire des fonctions globales communes à tous les projets

        • common-lib.js - bibliothèque de fonctions globale
        • README.md - readme pour les fonctions globales

      • "Produit1" - répertoire pour le produit 1

        • test-script1.js
        • test-script2.js

        • "Common" - répertoire pour les fonctions locales au projet 1

          • prod1-lib.js - bibliothèque de fonctions locales pour le projet 1
          • README.md - readme pour les fonctions locales du projet 1

      • "Product2" - répertoire pour le produit 2test-script1.jstest-script2.js

        • "Common" - répertoire pour les fonctions locales au projet 2

          • prod2-lib.js - bibliothèque de fonctions locales pour le projet 2
          • README.md - readme pour les fonctions locales du projet 2

• Divisez les scripts de test en plusieurs fichiers:

  • Voici un exemple d'utilisation de plusieurs fichiers:

    • Sanity Check - script de test de base pour vérifier que tout fonctionne
    • Validation des éléments statiques et du texte - vérifiez tous les éléments et le texte
    • Validation d'erreur de formulaire/page - validation d'erreur
    • Résultats de la recherche - tester le contenu dynamique

• Rappels VS. Promesses:

  • La version 3 de Web Driver IO prend en charge à la fois les rappels et les promesses.

    Les promesses sont la méthode préférée car elle réduit le code de gestion des erreurs. Veuillez voir ci-dessous le même exemple écrit à l'aide de rappels et de promesses.

Rappels

// Définir/vérifier le prénom/nom à l'aide du rappel

it('devrait définir/vérifier le prénom/nom en utilisant les rappels', fonction (fait) { driver.setValue("#fname", "Tony", fonction (e) { driver.getValue("#fname", fonction (err, e) { (e).should.be.equal("Tony"); console.log("Prénom: " + e); driver.setValue("#lname", "Keith", fonction (e) { driver.getValue("#lname", function (err, e) { (e).should.be.equal("Keith"); console.log("Last Name: " + e); done(); }); }); }); }); });

Promesses

// Définir/vérifier le prénom/nom à l'aide des promesses

it('devrait définir/vérifier le prénom/nom à l'aide des promesses', function () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Prénom: " + e); }).setValue("#lname", "Keith").getValue("#lname"). then(function (e) { (e).should.be.equal("Keith"); console.log("Last Name: " + e); }); });

Étape 7: Plus de ressources

Voici quelques ressources supplémentaires pour votre référence:

• Groupes de discussion (Gitter)

  • Groupe de discussion sur les E/S du pilote Web
  • Groupe de discussion moka

• D'autres projets intéressants

  • Supertest - Assertions
  • Chai - affirmations

Étape 8: Conclusion

J'ai passé du temps à rechercher les technologies à utiliser pour mon projet. J'ai commencé à l'origine avec Selenium Web Driver, mais je suis passé à l'utilisation de Web Driver IO. Web Driver IO semblait être plus facile à utiliser et beaucoup plus facile à étendre (au moins la documentation pour l'extension - les commandes réutilisables étaient meilleures).

Lorsque j'ai commencé à examiner les technologies, il était difficile de trouver de bons exemples relatifs à tout ce que j'essayais de faire. C'est la raison pour laquelle je voulais partager ces informations et connaissances avec vous.

Les technologies fonctionnaient bien mieux que ce à quoi je m'attendais, mais il y avait une courbe d'apprentissage impliquée. Une fois que j'ai compris comment tous les composants fonctionnaient ensemble, j'ai pu écrire des scripts de test complexes en très peu de temps. Les scripts les plus difficiles étaient des composants basés sur JavaScript tels qu'un sélecteur de date et des sélecteurs modaux.

Je ne me suis jamais qualifié de développeur JavaScript et je ne voulais pas être un expert en JavaScript, mais l'utilisation de ces technologies m'a définitivement motivé à affiner mes compétences en JS.

J'espère que cet article est utile et que les exemples sont clairs et informatifs.

S'il vous plaît laissez-moi savoir si vous avez des questions ou des commentaires.

Merci, Tony Keith