Comment tester des sites Web : utilisation de SIRV et Playwright pour le développement piloté par les tests (TDD)

J'ai travaillé sur quelques sites Web, pour notre mariage et pour un site de traduction culinaire permettant de traduire des plats en voyage. L'une des choses amusantes que j'ai découvertes est de savoir comment tester ces sites Web et m'assurer que tout fonctionne.

Qu'est-ce que le développement piloté par les tests (TDD) ?

Deux outils que j'ai trouvés – ou plutôt dont on m'a parlé – appelés SIRV et Playwright, peuvent vous aider à gérer votre site Web et à tester certaines parties du site. Une fois que vous avez effectué quelques tests et compris comment améliorer les choses, vous pouvez effectuer des mises à jour et des modifications en fonction de ces tests. C'est ce qu'on appelle le développement piloté par les tests, où les tests révèlent des lacunes dans votre application et vous apportez des modifications en fonction de vos tests.

Habituellement, ces lacunes se présentent sous la forme d’un échec à un test. Par exemple, si vous avez un formulaire sur votre site Web et qu'il échoue lors de la saisie de la ponctuation sous les exigences alimentaires, vous pouvez modifier la saisie du formulaire pour autoriser les signes de ponctuation. Cela rend votre application meilleure pour vos utilisateurs et vous disposez désormais de nouvelles fonctionnalités basées sur les tests originaux que vous avez exécutés.

Alors, comment rédiger des tests pour vos applications ?

Qu'est-ce que SIRV et Dramaturge ?

SIRV est un serveur de site statique. Il s'agit d'un middleware optimisé pour répondre aux demandes d'actifs statiques. Ainsi, SIRV fonctionne mieux si vous avez un site statique.

Playwright, quant à lui, est une méthode de test pour les applications Web. En les utilisant ensemble, cela signifie que Playwright est l'outil que nous utiliserons pour écrire et exécuter des tests. SIRV est l'interface où nous pouvons voir notre application en cours d'exécution et voir quels tests réussissent ou échouent.

Écrire des tests

Pour tester votre code, vous devrez écrire des tests. Dans cet exemple, j'écris un test pour voir si j'ai un certain mot ou un certain titre sur une page Web. J'ai utilisé GitHub Copilot pour m'aider à écrire un test pour ce faire. La documentation Playwright m'a donné le bon point de départ pour rédiger le test.

Pour utiliser Playwright pour la rédaction de tests, vous devrez l'importer. Voici le point de départ pour rédiger votre test :

importer { test, expect } depuis '@playwright/test';

J'ai construit un site internet pour notre mariage, et je voulais tester si la rubrique "Mish et Max" était détectée sur la page. Voici donc le code que j'ai utilisé pour tester ceci :

test('Contact Mish and Max', async ({ page }) => {
    // Navigate to the page
    await page.goto('http://localhost:8080/contact.html');

    // Assert that the title says "Contact Mish and Max"
    await expect(page).toHaveTitle("Contact Mish and Max")
});

Vous devrez ajouter un nouveau fichier à votre projet avec l'extension .spec.test. Assurez-vous de le sauvegarder et enregistrez-le chaque fois que vous apportez des modifications. Maintenant que le test est écrit, exécutons-le.

Utiliser SIRV et Playwright pour les tests

Tout d'abord, vous aurez besoin de Node pour que cela fonctionne. Suivez le guide dans la documentation Node.js pour installer Node pour Windows, MacOs ou Linux.

Lorsque vous êtes prêt à tester votre code, ouvrez un terminal dans VS Code ou dans l'éditeur de votre choix. J'utilise VS Code, donc les démos ici utilisent VS Code. Ouvrez le terminal en sélectionnant Affichage > Terminal depuis la barre de menu, ou en appuyant sur le raccourci clavier Ctrl + `.

Une fois que vous avez le terminal, vous devez exécuter quelques commandes :

npm install @playwright/test - ceci configure les tests Playwright en installant la bibliothèque de tests.

Installation de npx playwright – cela télécharge une version de test de Chrome, FireFox, Safari et autres.

npx sirv-cli . - cela exécute la version locale de SIRV pour les tests.

Maintenant que SIRV et Playwright sont configurés et prêts, nous pouvons exécuter les tests. Ouvrez un nouveau terminal dans VS Code (ou l'éditeur de votre choix) et exécutez la commande suivante :

npx playwright test --ui Ceci exécute le test et ouvre une nouvelle fenêtre où nous pourrons exécuter et voir les tests en cours.

Voici toutes les commandes ci-dessus en cours d'exécution :

Fenêtre de test du terminal Dramaturge :

Lire et corriger le test

Nous pouvons voir dans le test ci-dessus qu'il échoue à l'exécution. Lorsque nous examinons pourquoi cela se produit, nous pouvons déterminer comment y remédier. En regardant l'onglet "Erreurs", nous pouvons voir quelle erreur s'est produite :

Dans ce cas, il est écrit :

Chaîne attendue : "Contactez Mish et Max"
Chaîne reçue : "Contact"

En d'autres termes, il s'attendait à recevoir "Contact Mish et Max", mais à la place, il dit "Contact". Si je regarde mon fichier *.html, nous pouvons voir que j'ai deux fichiers . Nous pouvons maintenant refaire le test :

Cette fois, on voit le ✔️ et le test passe ?.

Rédaction de tests et rédaction de code

Maintenant que vous savez comment écrire et exécuter des tests avec SIRV et Playwright, vous pouvez continuer et écrire des tests plus complexes. Par exemple, sur le même formulaire de contact ci-dessus, j'ai écrit un test (en utilisant l'aide de GitHub Copilot) pour vérifier si le formulaire de contact peut être rempli et soumis :

Je peux exécuter ce test et parcourir chaque partie du test, en voyant dans l'interface utilisateur où les modifications sont apportées sur le site Web :

Essayez-le vous-même et dites-moi quels tests vous écrivez et si ce guide vous a été utile.

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!