Tests fonctionnels automatisés avec Playwright

Introduction

Afin de maintenir la fonctionnalité d’une application Web à tout moment et en toutes circonstances, il est essentiel de mettre en place des tests fonctionnels automatisés. Cette approche implique l’utilisation d’outils logiciels spécialisés pour tester divers aspects de l’application, comme sa capacité à répondre aux entrées de l’utilisateur ou à produire les résultats attendus après une opération spécifiée.

En automatisant ces tests, les équipes de développement identifient et résolvent rapidement les régressions ou les bogues, sans dépendre exclusivement de tests manuels longs et fastidieux.

Prérequis : Avoir installé VS Code et Node.js en version 14 ou supérieure.

Pourquoi automatiser ses tests fonctionnels ?

Réaliser un test fonctionnel signifie simuler le parcours d’un utilisateur réel : cliquer sur des boutons, interagir avec une interface et vérifier que les données affichées ou enregistrées sont correctes.

Comme une application évolue fréquemment, il devient impossible de rejouer manuellement l’intégralité des scénarios à chaque modification. Programmer un robot via Playwright permet d’exécuter ces manipulations aussi rapidement que le serveur le permet, assurant une validation constante de la qualité.

Pourquoi choisir Playwright ?

Playwright est un outil open-source créé en 2020. Il permet de transformer des scénarios de tests en code et de les exécuter sur les principaux navigateurs du marché (Chromium, Firefox, WebKit). Cet outil s’est imposé grâce à sa rapidité d’exécution, souvent supérieure à celle de solutions comme Jest, Cypress ou Nightwatch.

Le GIF ci-dessus illustre l’exécution d’un fichier de test. Playwright ouvre son propre navigateur pour effectuer les actions programmées en un temps record.

Installation et environnement

Intégration dans VS Code

L’un des grands avantages de Playwright est son excellente intégration avec VS Code. Vous pouvez installer l’extension officielle pour lancer vos tests directement depuis l’éditeur. Une fois activée, vous accédez à un onglet dédié qui répertorie tous vos fichiers de tests (par exemple example.spec.ts) et permet de visualiser en temps réel les lignes de code qui réussissent ou échouent.

Lancement du projet

Pour préparer votre environnement, ouvrez un terminal à la racine de votre projet et installez les dépendances nécessaires :

npm install

Ensuite, lancez votre serveur de développement :

npm start

L’application sera alors accessible localement, généralement sur http://localhost:3000.

Initialisation de Playwright

Pour ajouter Playwright à un projet existant, utilisez la commande suivante :

npm init playwright@latest

L’outil s’installera dans vos dépendances de développement et créera une configuration de base.

Mise en place des tests

Voici le code de l’application que nous allons tester :

<Fragment className="margin">
  <h1 data-cy="helloworld">Hello world</h1>
  <p data-cy="colortext" className="text-test">Ce texte est bleu !</p>
  <button
    data-cy="thebutton"
    onClick={() => this.setState({ buttonClicked: !this.state.buttonClicked })}
    className={this.state.buttonClicked ? "button-green" : "button-red"}
  >
    {this.state.buttonClicked ? "Activé" : "Désactivé"}
  </button>
</Fragment>

Et le style CSS correspondant :

.text-test {
  color: blue;
}

1 – Navigation vers la page

test.describe("EXEMPLE TESTS", () => {
  test("Should go to home page", async ({ page }) => {
    await page.goto("http://localhost:3000/");
    await expect(page).toHaveURL("http://localhost:3000/");
  });
});

2 – Validation du titre

test("Should see 'Hello World'", async ({ page }) => {
  await expect(page.locator("[data-cy=helloworld]")).toContainText("Hello world");
});

3 – Test de la couleur du texte

test("Should see a blue 'Ce texte est bleu'", async ({ page }) => {
  await expect(page.locator("[data-cy=colortext]")).toContainText("Ce texte est bleu !");

  const color = await page.locator("[data-cy=colortext]").evaluate((ele) => {
    return window.getComputedStyle(ele).getPropertyValue("color");
  });
  expect(color).toBe("rgb(0, 0, 255)");
});

4 – Interaction avec le bouton

test("Check button activé désactivé", async ({ page }) => {
  const button = page.locator("[data-cy=thebutton]");
  
  await expect(button).toContainText("Désactivé");
  await button.click();
  
  // Petit délai pour observer le changement si nécessaire
  await page.waitForTimeout(1000);
  
  await expect(button).toContainText("Activé");
});

Conclusion

Playwright offre une base solide pour garantir la stabilité de vos applications Web. Ce tutoriel n’explore que la surface des possibilités de l’outil. Pour approfondir des sujets comme les tests mobiles ou les tests d’API, la documentation officielle est une ressource précieuse.

Avoir une bonne couverture de tests automatisés reste la stratégie la plus efficace pour livrer du code de qualité en toute sérénité.