Apprenez des tests de bout en bout avec des marionnetsteer

Ce tutoriel explore le monde des tests de logiciels et montre comment utiliser Puppeteer, une bibliothèque de nœuds, pour des tests efficaces de bout en bout des applications Web. Nous couvrirons différents types de tests, puis créerons un exemple pratique en utilisant une application de compteur simple.

Concepts clés:

• marionnetteer: Une bibliothèque Node.js puissante contrôlant le chrome ou le chrome via le protocole Devtools. Idéal pour les tests de bout en bout et l'automatisation du navigateur. Il est par défaut en mode sans tête mais peut fonctionner avec une fenêtre de navigateur visible.
• Types de tests: Nous examinerons quatre méthodologies de test clés: tests statiques (en utilisant des liners et des systèmes de type), des tests unitaires (tests de code individuels), des tests d'intégration (test de l'interaction de plusieurs unités) et les tests de bout en bout (simulant les interactions réelles de l'utilisateur dans toute l'application).
• Tests de bout en bout avec Puppeteer: Le tutoriel fournit un guide étape par étape pour configurer et exécuter des tests de bout en bout à l'aide de marionnettiste. Cela comprend la navigation de pages, l'attente d'éléments spécifiques, l'extraction de données et la vérification du comportement de l'application.

Qu'est-ce que le marionnettiste?

marionnettiste propose une API de haut niveau pour interagir avec le chrome ou le chrome. Bien que principalement sans tête, il peut être configuré pour une expérience de navigateur complète.

Prérequis:

Ce tutoriel assume la familiarité avec JavaScript (ES6), Node.js et Yarn (un gestionnaire de packages). Les connaissances de base des marionnettistes sont utiles mais pas strictement requises. Le tutoriel utilise:

• Node 13.3.0
• NPM 6.13.2
• yarn 1.21.1
• marionnettiste 2.0.0
• create-react-app 3.3.0

Introduction aux tests:

Le test valide la fonctionnalité de l'application et aide à identifier les bogues tôt. Les quatre types de test mentionnés ci-dessus forment une stratégie de test complète. Le «trophée de test» (illustré ci-dessous) représente visuellement la nature hiérarchique de ces tests.

Tests de bout en bout avec marionnettiste: un exemple pratique

Nous allons créer une application de compteur simple en utilisant create-react-app puis la tester avec Puppeteer.

1. Configuration du projet: Créer un nouveau projet React: npx create-react-app e2e-puppeteer
2. Exécutez l'application: cd e2e-puppeteer && yarn start
3. Installez les marionnets: yarn add -D puppeteer
4. Implémentation de l'application du compteur: Modifier App.js et App.css pour créer un compteur avec des boutons incrément et décrément.
5. Tests de marionnet-marins: Écrivez des tests de marionnet-marin dans App.test.js pour vérifier la fonctionnalité du compteur (état initial, incrément, décrément). Ces tests utilisent page.waitForSelector, page.$eval, page.click, et les affirmations pour vérifier le comportement de l'application.
6. Exécutez les tests: yarn test

Conclusion:

Ce tutoriel a fourni une introduction pratique aux tests de bout en bout à l'aide de marionnettiste. Les capacités de Puppeteer s'étendent au-delà des tests, ce qui en fait un outil précieux pour diverses tâches d'automatisation du navigateur. Le code complet est disponible sur GitHub (lien non fourni dans le texte d'origine, doit être ajouté si disponible). D'autres ressources sur les tests sont disponibles via SitePoint Premium (liens non fournis dans le texte d'origine, doit être ajouté si disponible).

FAQS:

Cette section répond aux questions courantes sur les marionnettistes, y compris son objectif, les différences par rapport aux autres outils, son utilisation dans l'automatisation et le grattage, le concept de navigateurs sans tête et sa compatibilité entre les navigateurs. (Les FAQ d'origine sont incluses dans la sortie.)

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!