Share
Bien tester le site Web que vous avez créé est tout aussi important que le développer.
Supposons que votre entreprise a créé un site Web de commerce électronique. Si vous venez de tester le bouton "Acheter maintenant" pour la catégorie électronique et que cela a fonctionné, vous pourriez penser que cela fonctionne également pour toutes les autres catégories. Que se passe-t-il si vous découvrez par la suite qu'un problème empêche les utilisateurs de cliquer sur le bouton "Acheter maintenant" pour tous les produits de la catégorie remise en forme? Quelque chose comme cela va définitivement nuire aux revenus de la société de commerce électronique. Ce n’est pas seulement une question de revenus; cela affecte également la réputation de l'entreprise. Les utilisateurs peuvent éviter complètement de visiter votre site Web au profit de la concurrence.
Les développeurs et les entreprises évitent parfois de tester en profondeur leur site Web en raison de deux contraintes principales: le temps et l'argent. Même si vous avez exécuté tous les tests possibles pour votre site Web sur un seul appareil, rien ne garantit qu'il fonctionnera également sur tous les autres appareils. De nombreux facteurs, tels que le navigateur, le système d'exploitation et la taille de l'écran, doivent être pris en compte. De plus, de nouveaux appareils dotés de capacités et de tailles d'écran différentes continuent à apparaître. Les tests sur plus de mille combinaisons de navigateurs, de systèmes d'exploitation et de tailles d'écran vont également prendre beaucoup de temps. En conséquence, de nombreuses entreprises ne testent pas leurs sites Web aussi minutieusement qu'elles le devraient..
CrossBrowserTesting peut résoudre ces deux problèmes de manière très élégante. Ce service vous permet d'exécuter des tests automatisés sur plus de 1 500 appareils de bureau et mobiles réels sans jamais quitter le confort de votre navigateur de développement principal. Le débogage s'effectue à distance, mais vous pouvez interagir avec les sites Web exactement comme le ferait un utilisateur réel. Le processus ne sera plus aussi long, car vous pourrez exécuter tous ces tests en parallèle..
Ce didacticiel vous aidera à démarrer avec CrossBrowserTesting et vous montrera comment exécuter des tests automatisés sur des milliers de périphériques en parallèle. Vous devriez vous inscrire pour un essai gratuit pour suivre le reste du tutoriel..
Mocha est riche en fonctionnalités et est l’un des frameworks de test JavaScript asynchrone les plus populaires pour Node.js. Il vous permet d'exécuter plusieurs tests en série, ce qui permet de générer des rapports précis et de mapper les exceptions non capturées afin de corriger les cas de test. Le cadre nous fournit avant, après, avant chaque, et après chaque crochets. Vous pouvez utiliser ces points d'ancrage pour définir certaines conditions préalables pour les tests et nettoyer l'environnement après l'exécution d'un test..
Bien que Mocha puisse vous aider à rédiger des tests, vous aurez besoin de l'aide d'une bibliothèque d'assertions pour vérifier si les résultats d'un test sont conformes à vos attentes. Nous allons utiliser Chai dans ce tutoriel. La bibliothèque d'assertions est très flexible et vous permet de choisir une interface de votre choix pour tester les résultats. C'est à vous d'utiliser devrait(), attendre(), ou affirmer() affirmations de style.
Mocha et Chai peuvent être utilisés pour exécuter toutes sortes de tests et vérifier les valeurs obtenues. Si vous devez effectuer des tests tels que vérifier si un tableau contient un élément spécifique, ces deux outils seront suffisants. Cependant, nous sommes intéressés à effectuer des tests plus sophistiqués, tels que vérifier si une tentative de connexion a réussi ou si les utilisateurs peuvent mettre à jour leurs noms d'utilisateur, etc. Cela nous oblige à installer Selenium WebDriver. Avec Selenium WebDriver, nous pourrons automatiser beaucoup de choses, allant de cliquer sur les liens et les boutons à remplir un formulaire..
Une fois que vous avez compris les bases de ces outils, le plus dur est fini. Écrire des tests automatisés pour CrossBrowserTesting est facile. Je suppose que vous avez déjà installé Node.js.
Accédez au répertoire de votre projet et exécutez les commandes suivantes:
npm installer mocha --save-dev npm installer chai --save-dev npm installer sélénium-webdriver --save-dev
Une fois tous les packages installés, créez un dossier nommé tester dans votre dossier de projet. Ce dossier contiendra tous nos fichiers de test. Pour l'instant, créez un fichier nommé github.js dans le dossier de test. Écrivez le code suivant à l'intérieur github.js.
Accentsconagua
var webdriver = require ('sélénium-webdriver'); var assert = require ('chai'). assert; var remoteHub = 'http://hub.crossbrowsertesting.com:80/wd/hub'; var nom d'utilisateur = '[email protected]'; var authkey = 'yourAuthKey'; var caps = name: 'GitHub Search', build: '1.0.0', browserName: 'MicrosoftEdge', version: '15', plate-forme: Windows 10 ', résolution de l'écran:' 1366x768 ', record_video:' true ', record_network: 'true', nom d'utilisateur: nom d'utilisateur, mot de passe: clé d'authentification; describe ("Recherche de Mocha dans GitHub", function () this.timeout (5 * 1000 * 60); var driver = nouveau webdriver.Builder () .usingServer (remoteHub) .withCapabilities (caps) .build (); before ( fonction setupWebdriver (done) driver.get ("https://github.com/search/advanced") .then (done)); it ("Les Mochajs devraient être le premier résultat", function (done) var inputField = driver.findElement (webdriver.By.css (". fluide de recherche de formulaire .search-page-input")); inputField.click () .then (function () inputField.sendKeys ("Mocha"); ); driver.findElement (webdriver.By.css ("# search_form button")). click () .then (function () return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". repo". -list h3 a ")), 10000)) .then (fonction (élément) return élément.getText ();) .then (fonction (texte) assert.deepEqual (texte," mochajs / mocha "); ) .then (done);); it ("Devrait afficher une invite d'inscription après le chargement de la page du référentiel", function (done) driver.findElement (webdriver.By.css (". repo-list h3 a" )). click () .then (fonction ( ) return driver.wait (webdriver.until.elementLocated (webdriver.By.css (". signup-invite h3.pt-2"), 10000)) .then (function (element) return element.getText ( ) ) .then (function (text) assert.deepEqual (text, "Rejoignez GitHub aujourd'hui");); driver.findElement (webdriver.By.css ("bouton de formulaire d'invite de signature")). click () .then (done); ); after (fonction quitWebdriver (done) driver.quit () .then (done);); );Dans le code ci-dessus, vous devez remplacer [email protected] avec l'adresse e-mail avec laquelle vous vous êtes inscrit pour votre essai gratuit. De même, vous devrez obtenir votre propre clé d'autorisation à partir de la page du compte. Copiez cette clé et collez-la à la place de votreAuthKey.
le casquettes objet est utilisé pour spécifier différentes options de configuration pour exécuter le test. Vous pouvez donner à votre test un prénom et un construire numéro afin de l'identifier. le Nom du navigateur Cette propriété est utilisée pour spécifier le nom du navigateur dans lequel vous voulez exécuter les tests. Vous pouvez également spécifier un version pour le navigateur, mais c'est optionnel. Lorsque rien n'est spécifié, la dernière version du navigateur est utilisée.
Vous trouverez des informations sur toutes les propriétés et leurs valeurs valides dans l'article intitulé Capacités d'automatisation de Selenium. Vous devez lire attentivement cette page afin de tirer pleinement parti de toutes les fonctions de test automatisé de Selenium. Pour votre facilité d'utilisation, CrossBrowserTesting fournit également un configurateur de fonctionnalités sur la page d'accueil de l'automatisation..
Après avoir défini les valeurs appropriées pour nos paramètres de test, nous pouvons écrire les tests que nous voulons exécuter. Chaque ensemble de tests que vous souhaitez exécuter est enfermé dans un décrire bloc. À l'intérieur de décrire bloc, nous avons défini un délai d'expiration pour différents tests et créé un objet webdriver auquel chaque test du bloc aura accès..
Dans la prochaine étape, nous avons utilisé le avant crochet pour accéder à la page de recherche GitHub avant d'exécuter les tests à l'intérieur du il des blocs. Le code à l'intérieur avant ne fonctionnera qu'une fois, ce que je veux faire dans mon cas. Toutefois, si vous souhaitez rechercher un nouveau terme après chaque test réussi, vous devrez revenir à la page de recherche encore et encore. Dans de telles situations, en utilisant un avant chaque le crochet a plus de sens. Vous pouvez utiliser ce hook pour réinitialiser des données telles que les cookies que vous ne souhaitez pas conserver entre les sessions..
Le test réel va à l'intérieur du il des blocs. Lors du premier test, nous identifions le champ de saisie à l'aide d'un sélecteur CSS, puis définissons sa valeur sur "Mocha". Après cela, nous cliquons sur le bouton de recherche et attendons que le pilote puisse localiser un lien identifié par le sélecteur. .repo-list h3 a. Nous vérifions le texte à l'intérieur de cet élément pour voir s'il correspond moka / moka. Le test à l'intérieur de la seconde il le bloc continue à partir du premier test et clique sur le lien pour visiter le référentiel GitHub.
Le code à l'intérieur du après le bloc est exécuté après l'exécution des tests à l'intérieur de tous il des blocs. Assurez-vous que vous appelez driver.quit () à l'intérieur du bloc after, sinon la session restera ouverte pendant 10 minutes par défaut.
Vous voudrez peut-être prendre des instantanés à différentes étapes au cours de vos tests pour partager les résultats avec d'autres. Cela peut être fait en appelant l'API. Vous trouverez plus d'informations sur ce sujet dans l'article de CrossBrowserTesting sur l'exécution de tests de navigateur automatisés avec Selenium et JavaScript..
Après avoir créé le fichier de test ci-dessus, vous pouvez exécuter les tests sur le périphérique et le navigateur de votre choix en entrant la commande suivante dans la console à partir du répertoire du projet:
moka test / github.js
Si tout a fonctionné comme prévu, vous pourrez voir les résultats du test dans votre compte CrossBrowserTesting ici. J'ai téléchargé la vidéo créée après avoir exécuté ce test avec mon compte. Vous devriez voir quelque chose de similaire aussi.
L’avantage de CrossBrowserTesting est que vous pouvez l’intégrer facilement à vos outils favoris pour vous aider à écrire des tests rapidement et à utiliser des frameworks que votre équipe connaît déjà bien..
Dans cette section, nous allons écrire quelques tests en utilisant WebdriverIO. Fondamentalement, il envoie simplement des demandes à un serveur Selenium et gère la réponse. La structure vous permet d’écrire des commandes asynchrones de manière synchrone afin que vous n’ayez pas à vous soucier des promesses et des conditions de course. Vous pouvez lire la documentation de l'API pour obtenir plus d'informations sur la structure..
Commençons à écrire nos tests maintenant. Cette fois, nous allons essayer de vous connecter à un compte que j'ai créé sur Pixabay. Nous fournirons sciemment de fausses informations d'identification la première fois pour vérifier si le site Web nous le permet. La prochaine fois, nous utiliserons les informations d'identification correctes et vérifierons que nous sommes connectés..
Avant de continuer, vous devrez installer WebdriverIO en lançant la commande suivante:
npm installer webdriverio --save-dev
Maintenant, créez un fichier dans le tester dossier et nommez-le pixabay.js. Le fichier doit contenir le code suivant:
var webdriverio = require ('webdriverio'); var assert = require ('chai'). assert; var nom d'utilisateur = '[email protected]'; var authkey = 'yourAuthKey'; var devices = [nom du navigateur: 'Chrome', plateforme: 'Windows 10',, nom du navigateur: 'Firefox', plateforme: 'Windows 7',, nom du navigateur: 'Internet Explorer', plateforme: 'Windows 7 64 -Bit ',, browserName:' Safari ', plate-forme:' Mac OSX 10.9 ',]; devices.forEach (fonction (device) var options = capacités souhaitées: nom: 'Test de connexion Pixabay (plusieurs périphériques)', construction: '1.0', plate-forme: device.platform, browserName: device.browserName, screen_resolution: ' 1366x768 ', record_video:' true ', record_network:' true ', hôte: "hub.crossbrowsertesting.com", port: 80, utilisateur: nom d'utilisateur, clé: authkey decrire ("Connexion à Pixabay", fonction () this.timeout (5 * 60 * 1000); var client; before (function () client = webdriverio.remote (options); renvoyer client.init ();); it ('Des informations d'identification erronées doivent empêcher la connexion », function () retour client .url ('https://pixabay.com/fr/accounts/login/') .setValue ('# id_username', 'pixa_username') .setValue ('# id_password', 'faux_pixa_password') .click ('# sign_in_out input.pure-button') .getText ('ul.errorlist li') .then (fonction (résultat) assert.equal (résultat, 'Entrez un nom d'utilisateur et un mot de passe corrects. Notez que les deux champs peut être sensible à la casse. '););); il (' devrait pouvoir se connecter avec le bon C redentials ', function () return client .url (' https://pixabay.com/fr/accounts/login/ ') .setValue (' # id_username ',' pixa_username ') .setValue (' # id_password ',' mot_passe_pixa ') .click (' # sign_in_out input.pure-button ') .getText (' # my_images a.pure-button ') .then (fonction (résultat) assert.equal (résultat,' Importer des images '); ); ); after (function () return client.end ();); ); );Après avoir exécuté le code dans la section précédente, cela devrait sembler très familier. Comme dans l'exemple précédent, remplacez [email protected] et votreAuthKey avec votre adresse e-mail et votre clé d'authentification CrossBrowserTesting.
Pour tester la page de connexion, vous pouvez créer votre propre compte Pixabay ou essayer de vous connecter à d'autres sites Web. N'oubliez pas que vous devez pouvoir sélectionner les bons champs et boutons de saisie à l'aide de différents sélecteurs..
Une différence importante cette fois-ci est que nous avons créé un tableau d'objets de configuration et que nous pouvons effectuer une boucle sur chacun d'eux pour exécuter les mêmes tests sur plusieurs périphériques. Cela peut vous faire gagner beaucoup de temps, ainsi qu'à votre équipe. Tout ce que vous avez à faire est d'écrire les tests une fois, puis de les exécuter sur autant de périphériques que vous le souhaitez. CrossBrowserTesting vous permet de visualiser des enregistrements vidéo de tous vos tests automatisés. De cette façon, vous pouvez facilement voir ce qui ne va pas avec un appareil et un navigateur particuliers.
La possibilité de tester votre site Web sur plus de 1 500 appareils différents à distance est incroyable. Vous n'avez plus à craindre de perdre des clients car votre site Web ne fonctionnait pas comme prévu sur un appareil que vous avez oublié ou que vous n'avez pas pu tester. Le grand nombre de périphériques fournis par CrossBrowserTesting couvre presque toutes les combinaisons de périphériques et de navigateurs que vos clients peuvent utiliser. Non seulement cela, mais vous éliminez également le coût énorme de la maintenance de nombreux périphériques.
J'ai créé ici quelques tests d'automatisation de base pour vous aider à démarrer avec CrossBrowserTesting. Une fois que vous maîtriserez les principes de base, vous pourrez exécuter toutes sortes de tests, du remplissage de gros formulaires à la visite d'une page de produit après l'autre. Comme les tests sont automatisés et que vous pouvez les exécuter en parallèle, vous gagnez également beaucoup de temps, qui peut être consacré à l'amélioration de votre produit principal..
Vous pouvez vous inscrire gratuitement au service. Essayez-le et découvrez les différentes fonctionnalités qui en font une option meilleure et plus économique que la concurrence. Si tout se passe bien, vous ou votre entreprise économiserez des milliers de dollars et des centaines d’heures précieuses avec l’aide de CrossBrowserTesting.
