Aller au contenu principal

Écrire un premier test

Créer un fichier pour un groupe de tests​

Vous pouvez regrouper les tests appartenant à la même ressource dans un seul fichier, sous une fonction describe. La fonction describe permet en effet de définir un groupe de tests. Par exemple, pour contenir les tests des serveurs dans Houdini:

  1. Sous le dossier tests créé par Playwright, ajouter un fichier projets.spec.ts
  2. Ensuite, définir le groupe de tests
    tests/projets.spec.ts
    import { test } from '@playwright/test';

    test.describe('Tests des projets', () => {

    });

Écrire un test​

Pour écrire un test, on utilise la fonction test. La fonction reçoit deux arguments:

  • Le nom du test
  • Une fonction anonyme à exécuter qui reçoit la page à tester

Par exemple,

test.describe('Tests des projets', () => {
  test('la page projets est affichée', async ({ page }) => {
    await page.goto('http://localhost:4200/projets');

    await expect(page.locator('h1')).toContainText('Projets');
  });
});
attention

Il est important que expect provienne de Playwright:

import { test, expect } from '@playwright/test';

Anatomie du test​

Un test comprend au minimum deux actions: page.goto pour spécifier quelle page charger et ensuite un assert (expect) pour effectuer une vérification.

  • await page.goto() charge la page de liste des projets
  • expect reçoit une valeur et permets ensuite de faire une vérification. expect(success).toBeTruthy(); par exemple.
    • Dans l'exemple plus haut
      1. On récupère la balise h1 à l'aide de page.locator qui agit un peut un sélecteur CSS.
      2. À l'aide de toContainText, on vérifie que le texte de la balise est bien Projets

Exécuter un test​

attention

Pour exécuter vos tests avec Playwright, votre projet Angular doit être démarré!

Pour exécuter les tests, il existe plusieurs façons.

danger

Le test que nous venons de créer ne fonctionnera pas! Des ajustements seront nécessaires.

En ligne de commande:

npx playwright test

Via WebStorm directement, à partir de la flèche verte à gauche du groupe de tests ou du test directement:

img

Ou encore, via l'interface de tests de Playwright:

  1. Exécuter la commande pour rouler les tests, mais avec l'option --ui 
    npx playwright test --ui
  2. Cela lancera l'interface visuelle de Playwright img
  3. Il est ensuite possible d'exécuter un test individuellement, un groupe de tests ou tous les tests. img
  4. Exécutez le test pour la page de projets et vous obtiendrez un rendu visuel du test! Vous pourrez d'ailleurs constater pourquoi le test ne fonctionne pas: la page de connexion est affichée plutôt que la liste des projets! En effet, l'utilisateur n'est pas authentifié. img