TP Qualité de dev.
S. Salva

TP Playwright

1. Quelques éléments pour travailler

A

Documentation Playwright : https://playwright.dev/docs/intro

Préparer un projet :
Créer un répertoire puis exécuter :
npm init playwright@latest

B

Exécuter des tests Playwright :
npx playwright test --headed

Générer un rapport HTML :
npx playwright show-report

2. Premier projet de test Playwright en TypeScript

A

Créer un fichier de test qui :

Ouvre http://londres.uca.local/~sesalva/Pblog/
Clique sur Inscription
Vérifie que "Inscription" & "Email" sont présents sur la page

Exemple de test (pour un autre site :-)):

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

test('ouvre opencart et vérifie Monitors', async ({ browser }) => {
  const context = await browser.newContext({ ignoreHTTPSErrors: true });
  const page = await context.newPage();
  test.slow();

  await page.goto('https://localhost/opencart');
  await page.getByRole('link', { name: 'Components' }).click();
  await page.getByRole('link', { name: 'Monitors' }).click();
  console.log("testing", await page.innerText("h1"));
  await expect((await page.innerText("h1")).startsWith('Monitors')).toBe(true);
  await context.close();
});

Ajoutez si nécessaire : test.use({ ignoreHTTPSErrors: true }); Executez le test et générez un rapport.
B

Faire un second test basé sur le scénario :

Open the website 'http://londres.uca.local/~sesalva/Pblog'
Click on 'Inscription'
Type in ***yourname*** in the field 'Pseudo'
Type in ***yourpass*** in the field 'Mot De Passe'
Type in ***youremail*** in the field 'Email'
Assert that 'Bonjour ***yourname***' is displayed

3. Utiliser le générateur de code

A

Lancez en ligne de commande : npx playwright codegen

Utiliser ce scénario :

Open the website 'http://londres.uca.local/~sesalva/Pblog'
Click on 'Inscription'
Type in ***yourname*** in the field 'Pseudo'
Type in ***yourpass*** in the field 'Mot De Passe'
Click on 'Connexion'
Click on ***thefirstnew***
Click on 'Ajouter un commentaire'
Type in 'blabla' in the field 'Commentaire'
Assert that 'blabla' is displayed

B

Vérifiez que le code généré fonctionne. Ajoutez si nécessaire : test.use({ ignoreHTTPSErrors: true });

4. Utilisation d'agents

Utilisation d'agents pour explorer une application, créer un plan de test, générer des tests et réparer des tests qui ne fonctionnement pas Ce ne sont pas des processus déterministes, lisez les retours des agents et sélectionnez la suite à faire si les agents vous proposent des choix. A

Installation :

npm install @playwright/test
npx playwright install
npx playwright init-agents --loop=vscode

B Création d'un premier plan de test

VS code agents

Dans VS Code, choisir l’agent (planner, generator, healer) suivant le contexte.

Utilisez ce Prompt :
"Explore the Pblog interface at 'http://londres.uca.local/~sesalva/Pblog' and generate a basic plan"

Lire et interpréter le plan généré.

C Edition du plan de test

Modifier test_plan_device_availability.md en ajoutant par exemple :

4. TC — Connexion
- Étapes : Entrer le pseudo ***yourname*** et le Mot de passe ***yourpass***, Cliquer sur Connexion depuis la homepage, vérifier la présence de “***yourname***”.
- Vérifications : locator existe et est visible.

Lancer les tests avec la commande donnée par l'agent. Exemple:

npx playwright test seed.spec.ts

D Génération de test

Générez un test avec le prompt :
"generate tests for TC — Connexion"

Ligne à ajouter dans le code si l'agent ne le fait pas test.use({ ignoreHTTPSErrors: true }); Lancez avec la commande donnée, exemple :

npx playwright test connexion.spec.ts --headed --reporter=list

E Utilisation de l’agent healer

Le test ne doit pas fonctionner (?). Changer d'agent. Avant de demander une modification, pensez à utiliser votre contexte comme il faut : donner le fichier de test et le fichier de rapport.
Utiliser le prompt :
"Le test ne fonctionne pas. Répare le test suivant les erreurs données dans le rapport."

5. Bilan

Faire votre bilan : comparer agents vs codegen.