Playwright avec TypeScript

Introduction à Playwright

Playwright est un framework open-source permettant d'automatiser les tests d'applications web modernes sur plusieurs navigateurs (Chromium, Firefox, WebKit) et plateformes. Il prend en charge divers langages de programmation, notamment TypeScript, JavaScript, Python, Java, et C#.

Avantages de Playwright

Support multi-navigateurs : Chrome, Edge, Firefox, et Safari.
Tests robustes grâce à des fonctionnalités comme les auto-waits.
Support natif pour les tests de mobiles et de navigateurs sans tête.
Fonctionnalités intégrées pour générer du code automatiquement avec Playwright Codegen.
Facilité d'intégration avec des frameworks comme Jest et Mocha.

Installation et Configuration

Prérequis

Node.js installé (télécharger ici).
Un éditeur comme Visual Studio Code.

Étapes d'installation


        // Initialiser un projet Node.js
        npm init -y

        // Installer Playwright
        npm install playwright

        // Installer TypeScript et les types nécessaires
        npm install typescript ts-node @types/node --save-dev

        // Initialiser TypeScript
        npx tsc --init

Configuration de base

Voici un exemple de fichier tsconfig.json :


        {
        "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "outDir": "./dist"
        },
        "include": ["tests/**/*.ts"],
        "exclude": ["node_modules"]
        }

Création d'un Test Basique

Exemple de test

Créons un test simple pour vérifier le titre de la page Google :


        import { chromium } from 'playwright';

        (async () => {
        const browser = await chromium.launch(); // Lancer le navigateur
        const context = await browser.newContext(); // Créer un contexte
        const page = await context.newPage(); // Ouvrir une nouvelle page

        await page.goto('https://www.google.com'); // Naviguer vers Google
        const title = await page.title(); // Récupérer le titre
        console.log('Titre de la page:', title);

        await browser.close(); // Fermer le navigateur
        })();

Page Object Model (POM)

Le Page Object Model (POM) est un design pattern utilisé pour structurer les tests en séparant la logique des tests des éléments de l'interface utilisateur. Chaque page est représentée par une classe contenant les localisateurs et les actions spécifiques à la page.

Exemple de POM


        // Classe représentant une page de connexion
        import { Page } from 'playwright';

        export class LoginPage {
        constructor(private page: Page) {}

        async navigateTo() {
        await this.page.goto('https://example.com/login');
        }

        async enterUsername(username: string) {
        await this.page.fill('#username', username);
        }

        async enterPassword(password: string) {
        await this.page.fill('#password', password);
        }

        async clickLogin() {
        await this.page.click('#loginButton');
        }
        }

Classe de test utilisant le POM


        import { chromium } from 'playwright';
        import { LoginPage } from './pages/LoginPage';

        (async () => {
        const browser = await chromium.launch();
        const context = await browser.newContext();
        const page = await context.newPage();

        const loginPage = new LoginPage(page);

        await loginPage.navigateTo();
        await loginPage.enterUsername('admin');
        await loginPage.enterPassword('password123');
        await loginPage.clickLogin();

        await browser.close();
        })();

Tests Avancés

Gestion des données avec Fixtures


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

        test('Test avec données', async ({ page }) => {
        await page.goto('https://example.com/login');
        await page.fill('#username', 'admin');
        await page.fill('#password', 'password123');
        await page.click('#loginButton');
        const welcomeMessage = await page.textContent('#welcome');
        expect(welcomeMessage).toContain('Bienvenue');
        });

Tests parallèles

Playwright permet d'exécuter les tests en parallèle grâce à son support natif pour les test runners.


        npx playwright test --workers=4