.png){kind=logo}
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 :
A l'intérieur de ce dossier, créer le fichier step-page.ts :
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 :
Voici le fichier my-test.ts complet :
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 :
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 :
Voici le fichier step-page.ts complet :
Exécuter le cas de test
Pour exécuter le cas de test, aller à la racine du projet Playwright :
Taper dans le terminal :
npx playwright test --uiLa 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