Puppeteer est une bibliothèque de nœuds qui fournit une API de haut niveau pour contrôler Chrome ou Chrome via le protocole DevTools. Puppeteer s'exécute sans tête par défaut, mais peut être configuré pour exécuter complètement Chrome (ou sans tête).

Dans ce didacticiel, nous allons apprendre ce qu'est le test, les différents types de test, puis nous utiliserons Puppeteer pour effectuer des tests de bout en bout sur notre application. À la fin de ce didacticiel, vous devriez pouvoir tester vos applications de bout en bout facilement avec Puppeteer.

Prérequis

Pour ce didacticiel, vous avez besoin d'une connaissance de base de JavaScript, ES6 + et Node.js. [19659005] Vous devez également avoir installé la dernière version de Node.js .

Nous utiliserons le fil tout au long de ce didacticiel. Si vous n'avez pas de fil déjà installé, installez-le à partir de ici .

Vous devez également connaître les bases de Puppeteer. Pour comprendre les bases de Puppeteer, consultez ce didacticiel simple .

Pour vous assurer que nous sommes sur la même page, voici les versions utilisées dans ce didacticiel:

• Node 13.3.0 [19659010] npm 6.13.2
• fil 1.21.1
• marionnettiste 2.0.0
• create-react-app 3.3.0

Introduction to Testing

En termes simples, testing est un processus permettant d'évaluer le fonctionnement de l'application comme prévu. Il aide à détecter les bogues avant le déploiement de votre application.

Il existe quatre types de tests différents:

1. Test statique : utilise un système de type statique comme TypeScript ReasonML Flow ou un linter comme ESLint . Cela permet de capturer les erreurs de base comme les fautes de frappe et la syntaxe.
2. Test unitaire : la plus petite partie d'une application, également connue sous le nom d'unité, est testée.
3. Test d'intégration : plusieurs unités connexes sont testées ensemble pour voir si l'application fonctionne parfaitement en combinaison.
4. Test de bout en bout : l'application entière est testée du début à la fin, tout comme un utilisateur ordinaire le ferait, pour voir s'il se comporte comme prévu.

Le trophée de test de Kent C Dodds est une excellente visualisation des différents types de tests:

Le trophée d'essai doit être lu de bas en haut. Si vous effectuez ces quatre niveaux de test, vous pouvez être suffisamment confiant avec le code que vous expédiez.

Maintenant, effectuons des tests de bout en bout avec Puppeteer.

Tests de bout en bout avec Puppeteer

démarrer un nouveau projet React avec create-react-app également connu sous le nom de CRA. Allez-y et tapez ce qui suit dans le terminal:

 $ npx create-react-app e2e-puppeteer

Cela amorcera un nouveau projet React dans un dossier e2e-puppeteer . Grâce à la dernière version de create-react-app celle-ci installera également testing-library par défaut afin que nous puissions tester facilement nos applications.

Allez à l'intérieur du e2e -puppeteer et démarrez le serveur en tapant ce qui suit dans le terminal:

 $ cd e2e-puppeteer
$ début du fil

Cela devrait ressembler à ceci:

Notre App.js ressemble à ceci:

 import React de 'react';
importer le logo de './logo.svg';
import './App.css';

fonction App () {
  revenir (
    

      

        
        

           Modifiez  src / App.js  et enregistrez pour recharger.
        
        
           Learn React
        
      
    
  );
}

exporter l'application par défaut;

Nous allons tester la fonction App.js et le code sera écrit dans App.test.js . Alors allez-y et ouvrez App.test.js . Il doit avoir le contenu suivant:

 import React from 'react';
importer {render} depuis '@ testing-library / react'; // 1
importer l'application depuis './App';

test ('rend le lien apprendre réagit', () => {// 2
  const {getByText} = render (); // 3
  const linkElement = getByText (/ learn react / i); // 4
  attend (linkElement) .toBeInTheDocument (); // 5
});

Voici ce qui se passe dans le code ci-dessus:

1. Nous importons la fonction de rendu à partir du package @ testing-library / react .
2. Nous utilisons ensuite la fonction globale de test de Jest qui est notre lanceur de test installé par défaut via CRA. Le premier paramètre est une chaîne qui décrit notre test et le deuxième paramètre est une fonction où nous écrivons le code que nous voulons tester.
3. Ensuite, nous rendons le composant App et détruisons une méthode appelée getByText qui recherche tous les éléments qui ont un nœud de texte avec textContent .
4. Ensuite, nous appelons la fonction getByText avec le texte que nous voulons vérifier . Dans ce cas, nous vérifions apprendre à réagir avec l'indicateur insensible à la casse.
5. Enfin, nous faisons l'assertion avec la fonction s'attendre à pour vérifier si le texte existe dans le DOM.

Cela vient par défaut lorsque nous démarrons avec CRA. Allez-y, ouvrez un autre terminal et tapez ce qui suit:

 $ yarn test

Lorsqu'il affiche une invite, tapez a pour exécuter tous les tests. Vous devriez maintenant voir ceci:

Maintenant, testons cette application avec des tests de bout en bout.

Test de la plaque de chaudière avec le marionnettiste

Allez-y et installez marionnettiste comme dépendance de dev en tapant ce qui suit dans le terminal:

 $ yarn add -D puppeteer

Ouvrez maintenant App.test.js et collez ce qui suit:

 importez le marionnettiste de "marionnettiste"; // 1

laisser le navigateur;
laisser la page;

// 2
beforeAll (async () => {
  browser = attendre puppeteer.launch ({
    sans tête: faux
  });
  page = attendre browser.newPage ();
  attendre page.goto ("http: // localhost: 3000 /");
});

// 3
test ("rend le lien de réaction d'apprentissage", async () => {
  attendre page.waitForSelector (". App");

  const header = page d'attente. $ eval (". App-header> p", e => e.innerHTML);
  attendre (en-tête) .toBe (`Modifier  src / App.js  et enregistrer pour recharger.»);

  const link = page d'attente. $ eval (". App-header> a", e => {
    revenir {
      innerHTML: e.innerHTML,
      href: e.href
    };
  });
  attendez (link.innerHTML) .toBe (`Learn React`);
  attendre (link.href) .toBe ("https://reactjs.org/");
});

// 4
afterAll (() => {
  browser.close ();
});

Voici ce que nous faisons dans le code ci-dessus:

1. Premièrement, nous importons le package marionnettiste et déclarons quelques variables globales, navigateur et page .
2. Ensuite, nous avons la fonction avantTout fournie par Jest. Cela s'exécute avant l'exécution de tous les tests. Ici, nous lançons un nouveau navigateur Chromium en appelant puppeteer.launch () tout en définissant le mode sans tête sur faux pour voir ce qui se passe. Ensuite, nous créons une nouvelle page en appelant browser.newPage () puis en accédant à l'URL de notre application React http: // localhost: 3000 / en appelant la page . goto () .
3. Ensuite, nous attendons que le sélecteur .App se charge. Lors du chargement, nous obtenons le innerHTML de .App-header> p sélecteur en utilisant la page . $ Eval () et le comparons avec Modifiez src / App.js et enregistrez pour recharger. Nous faisons la même chose avec le .App-header> un sélecteur . Nous récupérons innerHTML et href puis nous les comparons avec Learn React et https://reactjs.org/ respectivement pour tester notre assertion avec la fonction expect () de Jest .
4. Enfin, nous appelons la fonction afterAll fournie par Jest. Cela s'exécute après l'exécution de tous les tests. Ici, nous fermons le navigateur.

Ce test devrait s'exécuter automatiquement et vous donnera le résultat suivant:

Allons-y et créons une application de compteur.

Conversion de la chaudière en application de compteur

Tout d'abord, modifiez du CSS en modifiant App.css comme suit:

 .header {
  taille de police: 56px;
  alignement du texte: centre;
}

.counter-app {
  affichage: flex;
  justifier-contenu: espace autour;
}

bouton {
  couleur de fond: navajowhite;
  taille de police: 32px;
}

.compter {
  taille de police: 48px;
}

Maintenant, changez App.js comme suit:

 importez React, {useState} de "react";
import "./App.css";

fonction App () {
  const [count, setCount] = useState (0);
  revenir (
    <>
      
 Compteur 
      

          setCount (count + 1)}>
          Incrément
        
        
 {count} 
          setCount (count - 1)}>
          Décrémenter
        
      
    
  );
}

exporter l'application par défaut;

Ici, nous faisons une application de compteur simple avec deux boutons, Increment et Decrement . En appuyant sur le bouton Increment le compteur est augmenté de 1, et en appuyant sur le bouton Decrement le compteur est diminué de 1. Il ressemble à ceci:

Test de l'application Counter avec Puppeteer

Maintenant, changez App.test.js en ce qui suit:

 importez le marionnettiste de "marionnettiste";

laisser le navigateur;
laisser la page;

beforeAll (async () => {
  browser = attendre puppeteer.launch ({
    sans tête: faux
  });
  page = attendre browser.newPage ();
  attendre page.goto ("http: // localhost: 3000 /");
});

// 1
test ("rend le compteur", async () => {
  attendre page.waitForSelector (". header");

  const header = page d'attente. $ eval (". header", e => e.innerHTML);
  expect (en-tête) .toBe ("Counter");
});

// 2
test ("met l'état initial à zéro", async () => {
  attendre page.waitForSelector (". counter-app");

  const count = page d'attente. $ eval (". count", e => e.innerHTML);
  expect (count) .toBe ("0");
});

// 3
test ("incrémente le compteur de 1", async () => {
  attendre page.waitForSelector (". counter-app");

  attendre page.click (". increment");
  const count = page d'attente. $ eval (". count", e => e.innerHTML);
  expect (count) .toBe ("1");
});

// 4
test ("décrémente le compteur de 1", async () => {
  attendre page.waitForSelector (". counter-app");

  attendre page.click (". decrement");
  const count = page d'attente. $ eval (". count", e => e.innerHTML);
  expect (count) .toBe ("0");
});

afterAll (() => {
  browser.close ();
});

Ici, nous conservons les avantTous et aprèsTous fonctionnent de la même manière qu'avant, où nous initialisons un navigateur et accédons à http: // localhost: 3000 / dans avantTous et nous fermons le navigateur dans aprèsTous . Ensuite, nous faisons ce qui suit:

1. Nous vérifions si le texte Counter est rendu. Pour cela, nous attendons le chargement du sélecteur .header . Ensuite, nous utilisons la page . $ Eval () pour obtenir le sélecteur innerHTML de .header . Et puis nous faisons enfin l'assertion pour vérifier si Counter est rendu.
2. Ensuite, nous vérifions si l'état initial est zéro. Nous attendons le chargement du sélecteur .counter-app . Ensuite, nous obtenons le innerHTML à partir du sélecteur .count . Nous comparons finalement si le nombre est 0 . Notez que nous utilisons une chaîne alors que notre état est un nombre . En effet, innerHTML renvoie toujours une chaîne .
3. Ici, nous vérifions si un clic sur le bouton incrémente l'état de 1. Tout d'abord, nous attendons le .counter- app sélecteur à charger. On clique ensuite sur le bouton .increment . Cela devrait faire passer l'État de 0 à 1 . Nous obtenons ensuite le innerHTML à partir du sélecteur .count . Ensuite, nous le comparons à 1 car notre fonction d'incrémentation devrait toujours augmenter l'état de 1 .
4. Le bouton de décrémentation devrait diminuer l'état de 1. Il fonctionne de la même manière que le bouton d'incrémentation. Tout d'abord, nous attendons le chargement du sélecteur .counter-app . On clique ensuite sur le bouton .decrement . Cela devrait réduire l'état de 1 à 0 . Notez que l'état était 1 après avoir cliqué sur le bouton d'incrémentation . Nous obtenons ensuite le innerHTML à partir du sélecteur .count . Ensuite, nous le comparons à 0 car notre fonction de décrémentation devrait toujours diminuer l'état de 1 .

Le résultat devrait maintenant ressembler à ceci:

Conclusion

Dans ce didacticiel, nous avons découvert différents types de tests: tests statiques, tests unitaires, tests d'intégration et tests de bout en bout. Nous avons ensuite effectué des tests de bout en bout sur notre passe-partout, amorcé à l'aide de create-react-app .

Plus tard, nous avons converti l'application en application de compteur. Enfin, nous avons effectué des tests de bout en bout sur l'application de compteur.

La bibliothèque Puppeteer est utile non seulement pour effectuer des tests de bout en bout, mais également pour effectuer différents types d'automatisation de navigateur. Puppeteer est soutenu par Google et est activement maintenu, alors assurez-vous de vérifier ses documents pour comprendre les nombreux cas d'utilisation qu'il offre.

Vous pouvez trouver le code de ce tutoriel sur GitHub .

Akshay est un créateur, artiste informatique et micropréneur de Mumbai.