TestCafe: test d'applications Web de bout en bout plus facile avec Node.js

TestCafe: Node.js Framework pour simplifier les tests automatisés des applications Web

Points de base:

• TestCafe est un framework de test d'applications Web basé sur Node.js, qui simplifie le processus de configuration et d'exécution des tests automatisés. Il couvre toutes les phases des tests, y compris le démarrage d'un navigateur, l'exécution d'un test, la collecte de résultats et la génération de rapports.
• TestCafe ne nécessite pas de plugins de navigateur ou d'autres dépendances et prend en charge les tests dans tout bureau ou navigateur moderne moderne populaire. Il est également compatible avec les services de test cloud et les navigateurs non conventionnels via l'écosystème du plugin.
• TestCafe propose une variété d'opérations de test, de la surtension au téléchargement de fichiers, et possède un mécanisme d'attente automatique intégré sans ajouter manuellement en attente ou en hibernation. Il prend également en charge le modèle d'objet page, qui introduit les représentations d'objets de la page testées et l'utilise dans le code de test.
• TestCafe peut être intégré aux coureurs de tâches populaires et aux systèmes d'intégration continue, ce qui en fait un outil courant pour les tâches de routine et la configuration des tests de projet dans les flux de travail de développement automatisés. Il peut également exécuter des tests simultanément sur plusieurs navigateurs, accélérant le processus de test.

Cet article s'explique par Vasily Strelyaev, un membre de l'équipe TestCafe, pour expliquer les avantages de ce nouveau cadre de test d'applications basé sur Node.js.

Les développeurs Web frontaux savent à quel point il est difficile de configurer des tests automatisés pour les applications Web. Même l'installation d'un cadre de test peut être difficile. De nombreuses solutions existantes nécessitent du sélénium, qui est livré avec des plugins de navigateur et JDK.

Vous devez également configurer un environnement de test avant de démarrer le test, ce qui signifie traitement du fichier de configuration. Plus tard, vous pouvez constater que certaines parties de l'environnement de test (telles que les rapports) sont manquantes et que vous devez les trouver et les installer séparément.

TestCafe est un nouveau framework de test de bout en bout basé sur Node.js pour les applications Web.

Il est responsable de toutes les phases de test: démarrer le navigateur, exécuter le test, collecter les résultats des tests et générer des rapports. Il ne nécessite ni plugins de navigateur ni autres dépendances: il fonctionne hors de la boîte.

Dans cet article, je montrerai comment:

• Rédaction de votre premier test
• Exécutez-le dans les services de tests de machines et de cloud locaux
• Créer une tâche de test pour le coureur de tâche

Installation de TestCafe

Tout d'abord, vous devez installer Node.js sur votre machine. Si vous n'en avez pas, visitez leur site Web et téléchargez-le ou envisagez d'utiliser un gestionnaire de version (par exemple NVM).

Après avoir terminé Node.js, l'installation de TestCafe ne nécessite qu'une seule commande:

npm install -g testcafe

Si vous utilisez Linux / Mac et que vous avez besoin d'ajouter Sudo, vous devriez envisager de réparer les autorisations NPM.

Tests d'écriture

Nous rédigerons un test pour la page de démonstration TestCafe.

Ouvrez l'éditeur de code de votre choix et créez un nouveau fichier test.js.

Tout d'abord, ajoutez une déclaration de luminaire pointant vers http://devexpress.github.io/testcafe/example/demo webpage:

npm install -g testcafe

Ensuite, ajoutez un test:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

Laissez maintenant notre test saisir le texte dans le champ de saisie "Nom du développeur" et cliquez sur le bouton "Soumettre":

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});

Ici, nous avons utilisé TypeText et cliquer sur les opérations de test. TestCafe fournit de nombreuses opérations de ce type, de la survol du téléchargement de fichiers.

Revenons à notre test. Le bouton Soumettre vous redirigera vers une page qui dit "Merci,% nom d'utilisateur%!".

Nous vérifierons si le texte de cette page contient le nom correct:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Pour ce faire, nous créons un sélecteur pour identifier le titre de l'article. Après l'opération de test, nous ajoutons une affirmation pour vérifier si le texte dit "Merci, Peter Parker!"

Objet page

L'équipe TestCafe encourage l'utilisation des modèles d'objets de page dans les tests. Avec ce modèle, vous pouvez introduire une représentation d'objet de la page testée et l'utiliser dans votre code de test. Voyons comment nous faisons cela.

Créez un nouveau fichier page-object.js et déclarez une classe de page:

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Jusqu'à présent, nos tests interagissent avec les éléments de trois pages: entrée du nom du développeur, bouton de soumission et titre "Merci". Nous ajoutons donc trois sélecteurs à la classe de page:

export default class Page {
    constructor () {
    }
}

Dans le fichier de test, reportez-vous à page-object.js, créez une instance de la classe de page et utilisez ses champs dans l'opération de test:

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

Utilisez le mode objet page, vous pouvez enregistrer tous les sélecteurs à un seul endroit. Lorsque la page Web sous test modifie, vous n'avez qu'à mettre à jour un seul fichier - page-object.js.

Exécuter des tests localement

Pour exécuter ce test sur la machine locale, vous n'avez besoin que d'une seule commande:

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

TestCafe trouvera et lancera automatiquement Google Chrome et exécutera des tests.

De même, vous pouvez exécuter ce test dans Safari ou Firefox en spécifiant simplement son nom.

Vous pouvez utiliser la commande TestCafe --List-Browsers pour afficher la liste des navigateurs détectés par testCafe sur votre machine:

Rapport d'opération de test

Une fois le test terminé, TestCafe publie le rapport à la console:

Si le test échoue, TestCafe fournira un site d'appel avec une pile d'appels montrant où l'erreur s'est produite:

Vous pouvez choisir parmi cinq formats de rapport intégrés ou rechercher des modules complémentaires qui prennent en charge différents formats.

Démarrez le test à partir de l'IDE

Vous pouvez exécuter des tests TestCafe à partir d'ides populaires tels que le code vs ou sublimeText à l'aide d'un plugin dédié:

Exécutez des tests dans le service de test cloud

Bien que TestCafe puisse exécuter des tests hors de la boîte dans tout bureau ou navigateur mobile moderne ou mobile, il possède également un écosystème de plug-ins compatibles avec les services de test cloud, les navigateurs sans tête et d'autres navigateurs non conventionnels.

Dans cette section, nous exécuterons des tests sur Saucelabs, un cloud de test automatisé populaire. Il héberge des centaines de machines virtuelles avec différents systèmes d'exploitation et navigateurs.

Pour exécuter des tests sur Saucelabs, vous avez besoin d'un compte Saucelabs. Si vous n'en avez pas, visitez https://saucelabs.com/ et créez un nouveau compte. Vous obtiendrez les informations d'identification nécessaires: nom d'utilisateur et clé d'accès.

Maintenant, vous devez installer le plugin TestCafe compatible avec SauceLabs:

npm install -g testcafe

Étant donné que ce plugin est installé dans le répertoire local, vous devez également installer TestCafe localement:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

Avant d'utiliser le plugin SauceLabs, veuillez suivre les instructions de la documentation SauceLabs pour enregistrer le nom d'utilisateur et l'accès à la clé de l'environnement Sauce_Username et Sauce_Access_key.

Vous pouvez maintenant exécuter vos tests sur la machine virtuelle Saucelabs dans le cloud:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});

Vous pouvez afficher une liste complète des navigateurs et machines virtuels disponibles sur Saucelabs en exécutant la commande suivante:

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

Ajouter des tâches au coureur de tâche

Les coureurs de tâches sont utiles lorsque vous devez automatiser les tâches de routine dans votre flux de travail de développement.

L'intégration avec le coureur de tâche est une bonne solution pour exécuter des tests de testcafe au moment du développement. C'est pourquoi la communauté TestCafe a développé des plugins qui l'intégrent avec les coureurs de tâches Node.js les plus populaires.

Dans ce tutoriel, nous utiliserons gulp.js.

Si vous n'avez pas installé Gulp.js sur votre machine, installez-le globalement et localement dans votre projet en utilisant la commande suivante:

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Installez le plugin Gulp qui intègre TestCafe à Gulp.js:

export default class Page {
    constructor () {
    }
}

Si vous avez un fichier gulpfile.js dans votre projet, ajoutez-y les tâches suivantes. Sinon, utilisez cette tâche pour créer un nouveau gulpfile.js:

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

Cette tâche exécute des tests dans le fichier test.js dans Chrome et Firefox. Pour en savoir plus sur l'API du plugin Gulp, consultez sa page GitHub.

Vous pouvez maintenant exécuter cette tâche à partir de la ligne de commande comme suit:

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

Tester sur la plate-forme d'intégration continue

TestCafe fournit une ligne de commande et une interface de programmation puissantes, ce qui facilite l'utilisation avec la plupart des systèmes CI modernes.

Les rapports d'exécution de test peuvent être rendus dans des formats JSON, Xunit et Nunit compris par les systèmes CI les plus populaires.

La documentation TestCafe contient une recette qui explique comment configurer des tests pour les projets GitHub sur Travis CI.

Résumé

Dans cet article, je montre comment commencer par votre premier test TestCafe et éventuellement intégrer les tests E2E dans le processus de votre projet. Vous pouvez découvrir par vous-même à quel point il est facile de tester une application Web avec TestCafe.

Si vous avez des questions sur TestCafe, veuillez commenter ci-dessous, posez une question sur le forum ou visitez la page GitHub.

FAQ TESTCAFE

En quoi TestCafe est-il différent des autres outils de test de bout en bout?

TestCafe est un outil de test de bout en bout unique car il ne nécessite pas WebDriver ni aucun autre logiciel de test. Il s'exécute sur Node.js et utilise un proxy pour injecter des scripts dans le navigateur. Cela lui permet d'automatiser les actions des utilisateurs et affirmer que les éléments de la page s'exécutent comme prévu. Il prend en charge les tests sur plusieurs navigateurs et plateformes, y compris les appareils mobiles. Il fournit également des fonctionnalités telles que l'attente automatique, le diagnostic en temps réel et l'exécution des tests simultanés.

Puis-je utiliser TestCafe pour les tests mobiles?

Oui, TestCafe prend en charge les tests mobiles. Il peut exécuter des tests sur les appareils iOS et Android ainsi que sur les émulateurs et les émulateurs mobiles. Vous pouvez également simuler des appareils mobiles dans votre navigateur de bureau. Cela en fait un outil universel pour tester les applications Web réactives.

Comment TestCaFE gère-t-il les opérations asynchrones?

TestCafe a un mécanisme d'attente automatique intégré. Cela signifie que vous n'avez pas besoin d'ajouter manuellement l'attente ou l'hibernation à vos tests. TestCafe attend automatiquement le chargement des pages et XHR avant et après chaque opération. Il attend également que l'élément soit visible avant d'interagir avec lui.

Puis-je exécuter des tests TestCafe dans plusieurs navigateurs en même temps?

Oui, TestCafe vous permet d'exécuter des tests dans plusieurs navigateurs en même temps. Cela peut considérablement accélérer votre processus de test. Vous pouvez spécifier le nombre d'exécutions de test simultanées lors du démarrage du test.

Comment déboguer les tests dans TestCafe?

TestCafe fournit plusieurs méthodes de débogage et de test. Il comprend un mode de débogage qui fait une pause du test et vous permet de visualiser l'état de la page testée pour le moment. Il fournit également des rapports d'état de test en temps réel, des captures d'écran et de l'enregistrement vidéo des sessions de test.

Puis-je utiliser TestCafe pour les tests de croisement?

Oui, TestCafe prend en charge les tests de croisement. Il peut exécuter des tests simultanément dans plusieurs navigateurs, que ce soit sur des machines locales ou sur des appareils distants. Il prend en charge tous les navigateurs populaires, notamment Chrome, Firefox, Safari et Internet Explorer.

Comment TestCafe gère la navigation sur la page?

TestCafe gère automatiquement la navigation de page. Il attend que la page se charge avant le début du test et après chaque action qui provoque une nouvelle page. Cela signifie que vous n'avez pas besoin d'ajouter de code spécial pour gérer la navigation de page.

Puis-je utiliser TestCafe avec un système d'intégration continue?

Oui, TestCafe peut être intégré à des systèmes d'intégration continue populaires tels que Jenkins, TeamCity, Travis, etc. Il peut générer des rapports dans une variété de formats, y compris Xunit, qui peut être utilisé par ces systèmes.

Comment gérer les téléchargements de fichiers dans TestCafe?

TestCafe fournit une opération spéciale pour le téléchargement de fichiers. Vous pouvez utiliser l'opération T.SetFileStoupload pour télécharger des fichiers. Cette opération prend un sélecteur qui identifie l'entrée de fichier et une chaîne qui spécifie le chemin d'accès pour télécharger le fichier.

Puis-je utiliser TestCafe pour les tests de performances?

Bien que TestCafe soit principalement utilisé pour les tests fonctionnels, il peut également être utilisé pour les tests de performances. Vous pouvez l'utiliser pour mesurer le temps nécessaire à l'opération pour terminer, le chargement des pages et les demandes AJAX à compléter. Cependant, pour des tests de performances plus détaillés, vous devrez peut-être utiliser un outil de test de performances dédié.

Cette sortie révisée maintient les emplacements et formats d'image d'origine tout en paraphrasant le contenu de l'originalité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!