top of page
Rechercher
  • Photo du rédacteurgilles

playwright

Dernière mise à jour : 18 juin 2023

Ce article montre l'automatisation d'un cas de test avec playwright.


Création d'une étape


Ce chapitre montre la création d'une étape avec playwright. Playwright permet d’utiliser du JavaScript ou du Typescript. L’exemple suivant est en Typescript.


Il faut commencer par créer une fixture. Créer un dossier Fixture a la racine de votre projet :

creer une fixture dans playwright
creer une fixture dans playwright

A l'intérieur de ce dossier, créer le fichier step-page.ts :

creer une fixture dans playwright
creer une fixture dans playwright

Il faut tout d’abord importer la fixture :

import { Page } from '@playwright/test';

Ensuite créer une classe avec un constructeur :

export class StepPage{
    
    constructor(public readonly page:Page){

    }

Le fixture est créé, il faut lui ajouter une étape pour accéder au site:

 async goto(){
        await this.page.goto('https://magento.softwaretestingboard.com/');
    }

Il faut maintenant créer l'objet test utilisant cette fixture.


Dans le même dossier que step-page.ts, créer un fichier my-test.ts?


Dans ce fichier, il faut tout d’abord importer les notions nécessaires :

import { test as base } from '@playwright/test';
import { StepPage } from './step-page';

Ensuite il faut déclarer le type de la fixture :

type MyFixtures = {
    stepPage: StepPage;
};

Il faut ensuite créer un objet test utilisant la fixture.

export const test = base.extend<MyFixtures>({

Il faut maintenant instancier le fixture et indiquer à l'objet test de l’utiliser. Cela permettra à chaque nouvelle instance du test de commencer par aller sur la page web désirée et d’utiliser le fixture :

stepPage: async ({ page }, use) => {
      const stepPage = new StepPage(page);
      await stepPage.goto();
      await use(stepPage);
    },

Et pour finir, il faut exporter la notion expect qui est une notion de base de playwright

pour pouvoir utiliser l'objet test :

export { expect } from '@playwright/test';

Maintenant que le fixture et le test, l'étape peut être créee.


Dans le fichier step-page.ts, ajouter une étape :

async choixCategorieWomenTopJackets(){

Le codage de l'étape comprend une partie de localisation de l’élément par les différentes fonctions fournies par playwright (getByRole()) puis définir l’action (ex:click ou hover)


Pour faire le hover sur "women", cela donne :

await this.page.getByRole('menuitem', { name: 'Women' }).hover();

Pour faire le hover sur "top", cela donne :

await this.page.getByRole('menuitem', { name: 'Tops' }).hover();

Pour faire le click sur "Jackets", cela donne :

await this.page.getByRole('menuitem', { name: 'Jackets' }).click();

Voici l'étape commande "choix catégorie women top jacket complète :

fichier step-page.ts
fichier step-page.ts

Voici le fichier my-test.ts complet :

fichier my-test.ts
fichier my-test.ts

Création du cas de test


Ce chapitre montre la création d’un cas de test avec playwright. Il faut commencer par créer un cas de test et ensuite appeler les étapes.


Ouvrir le fichier exemple.spec.ts situé dans le dossier exempleParcours :

fichier exemple.spec.ts
fichier exemple.spec.ts

Importer l'objet test qui utilise le fixture :

import { test, expect } from '../Fixture/my-test';

Développer le cas de test :

test("Retirer article au panier" , async({ stepPage}) => {

Ensuite, ajouter l'étape choixCategorieWomenTopJackets :

await stepPage.choixCategorieWomenTopJackets();

La deuxième étape du parcours est de cliquer sur "Juno Jackets". Retourner dans le fichier step-page.ts. Pour cette étape, localiser l’image du produit par son "alt" et ensuite cliquer sur l'élément :

async cliquerSurJackets(nomArticle : string){
        await this.page.getByAltText("Juno Jackets").click();
    }

Retourner dans le fichier exemple.spec.ts et ajouter l'étape :

await stepPage.cliquerSurJackets();

Variabiliser le cas de test


Tout d’abord, il faut modifier l'étape pour qu’elle utilise un paramètre :

async cliquerSurJackets(nomArticle : string){

et ensuite modifier le code de l'étape :

await this.page.getByAltText(nomArticle).click();

Dans le dossier fixture, créer un fichier appelé variable.ts et déclarer la variable :

export let WomenJacket1 = 'Juno Jacket';

Retourner dans le fichier example.spec.ts et importer la variable :

import { WomenJacket1 } from '../Fixture/variable';

Maintenant que la variable est importée, modifier l’appel de l'étape :

await stepPage.cliquerSurJunoJackets(WomenJacket1);

Voici le fichier exemple.spec.ts complet :

fichier exemple.spec.ts
fichier exemple.spec.ts

Voici le fichier step-page.ts complet :

fichier step-page.ts
fichier step-page.ts

Exécuter le cas de test


Pour exécuter le cas de test, aller à la racine du projet Playwright :

executer un cas de test dans playwright
executer un cas de test dans playwright

Taper dans le terminal :

npx playwright test --ui

La fenêtre Playwright s’ouvre et sur le menu de gauche playwright cliquer sur le bouton run pour lancer le cas de test.


Installation et téléchargement des exemples







10 vues
bottom of page