Utilisation de Codegen

Pour des cas de tests plus compliqués, il est possible d'utiliser l'outil Codegen de Playwright. Cet outil vous permet d'écrire une partie des tests en naviguant l'application.

Démarrer Codegen

Pour démarrer Codegen, exécutez la commande suivante:

npx playwright codegen

Cela vous ouvrira eux fenêtres:

Une fenêtre de navigateur pour naviguer l'application
Une fenêtre avec le code du test généré au fur et à mesure que vous naviguez

Utiliser Codegen

info

Lorsque vous utilisez codegen, il est préférable que votre serveur d'API roule, autrement vous ne pourrez pas naviguer l'application. Les requêtes d'API pertinentes pourront être remplacées dans un deuxième temps.

Comme votre application est protégée par une page de connexion et qu'il vous faut un jeton, nous allons passer à la fenêtre de codegen un état préconfiguré du localstorage, avec un jeton.

Ajoutez un fichier storage-state.json à la racine du projet Angular

Mettez-y ce contenu, tout en vous assurant de modifier le jeton d'accès pour un jeton valide.

{
  "cookies": [],
  "origins": [
    {
      "origin": "http://localhost:4200",
      "localStorage": [
        {
          "name": "access_token",
          "value": "eeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjEsImNvdXJyaWVsIjoiYmVub2l0LnRyZW1ibGF5QGNlZ2VwZHJ1bW1vbmQuY2EiLCJub21VdGlsaXNhdGV1ciI6ImJlbnRyZW1ibGF5IiwiaWF0IjoxNzYzMDQ1MDk5LCJleHAiOjE3NjU2MzcwOTl9.trWpRUtWuYf7T1f9dfpGGw022h3jlVN3HeLl3F45740"
        }
      ]
    }
  ]
}

Utilisez la commande suivante à partir de maintenant pour ouvrir codegen
```
npx playwright codegen --load-storage=storage-state.json
```
Rendez-vous à http://localhost:4200
Au fur et à mesure que vous naviguez l'application, vous verrez que la portion de code se met à jour automatiquement en tentant de répliquer vos actions. Cela vous permettra d'avoir une base de test. Évidemment, les assertions ne sont pas écrites pour vous, mais cela vous facilitera quand même le travail.

Utiliser le code de base

On peut maintenant utiliser le code généré par Codegen comme base du test. On peut évidemment retravailler l'information qui ne fait pas notre affaire. Par exemple, lorsque j'ai utilisé Codegen, je suis parti de la page d'accueil pour me rendre à la page de création que je voulais tester. Dans ce cas, on peut enlever les page.goto précédents et simplement garder celui qui nous mène à la page d'intérêt.

Voici un exemple de test généré avec Codegen pour compléter le formulaire de création d'un projet.

tests/projets.spec.ts
  test('Il est possible de créer un projet', async ({ page }) => {
    await page.goto('http://localhost:4200/projets');
    await page.getByRole('link', { name: 'Nouveau projet' }).click();
    await page.getByRole('textbox', { name: 'Nom' }).click();
    await page.getByRole('textbox', { name: 'Nom' }).fill('Un projet');
    await page.getByRole('textbox', { name: 'Nom' }).press('Tab');
    await page.getByRole('textbox', { name: 'Description' }).fill('Une description');
    await page.getByRole('button', { name: 'Soumettre' }).click();
  });

Évidemment, ce test est incomplet, il manque une ou des vérifications (assertions).

Démarrer Codegen​

Utiliser Codegen​

Utiliser le code de base​

Démarrer Codegen

Utiliser Codegen

Utiliser le code de base