Effortless API Mocking With Playwright

Tutoriels

TypeScript

Les tests automatisés d’applications web nécessitent souvent une interaction avec des API externes. Cependant, le fait de s’appuyer sur les réponses réelles des API peut introduire des variables indépendantes de votre volonté, telles que des problèmes de réseau ou des temps d’arrêt du serveur. C’est là que la simulation d’API entre en jeu. Le mocking vous permet de simuler les réponses de l’API, ce qui rend vos tests plus fiables et plus rapides. Dans cet article, nous allons explorer comment simuler des API en utilisant Playwright avec TypeScript.

Mocking APIs in Playwright

Playwright fournit un moyen d’intercepter des requêtes réseau et de simuler des réponses en utilisant la méthode route. Voyons un exemple dans lequel nous simulons une réponse d’API.

Guide étape par étape

1. Importez les modules nécessaires + créez un test de base

TypeScript

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

test('Mock User Profile API', async ({ page }) => {
    await page.goto('https://example.com/profile');
    // La simulation sera faite ici
});

2. Configurez l’interception des requêtes et la simulation

TypeScript

test('Mock User Profile API', async ({ page }) => {
    // Scénario 1 : récupération réussie des données
    await page.route('https://api.example.com/user/profile', route => {
        const mockResponse = {
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                name: 'John Doe',
                email: '[email protected]',
                age: 30
            })
        };
        route.fulfill(mockResponse);
    });

    await page.goto('https://example.com/profile');
    
    const userName = await page.textContent('#name'); // Assuming the name is rendered in an element with id 'name'
    const userEmail = await page.textContent('#email'); // Assuming the email is rendered in an element with id 'email'
    const userAge = await page.textContent('#age'); // Assuming the age is rendered in an element with id 'age'
    
    expect(userName).toBe('John Doe');
    expect(userEmail).toBe('[email protected]');
    expect(userAge).toBe('30');
});

3. Ajoutez d’autres scénarios

TypeScript

test('Mock User Profile API - Empty Profile', async ({ page }) => {
    // Scénario 2 : Profil d'utilisateur vide
    await page.route('https://api.example.com/user/profile', route => {
        const mockResponse = {
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({})
        };
        route.fulfill(mockResponse);
    });

    await page.goto('https://example.com/profile');
    
    const userName = await page.textContent('#name');
    const userEmail = await page.textContent('#email');
    const userAge = await page.textContent('#age');
    
    expect(userName).toBe('');
    expect(userEmail).toBe('');
    expect(userAge).toBe('');
});

test('Mock User Profile API - Server Error', async ({ page }) => {
    // Scénario 3 : Erreur de serveur
    await page.route('https://api.example.com/user/profile', route => {
        const mockResponse = {
            status: 500,
            contentType: 'application/json',
            body: JSON.stringify({ error: 'Internal Server Error' })
        };
        route.fulfill(mockResponse);
    });

    await page.goto('https://example.com/profile');
    const errorMessage = await page.textContent('#error'); // Assuming the error message is rendered in an element with id 'error'
    expect(errorMessage).toBe('Internal Server Error');
});

Exécution de vos tests

npx playwright test

Techniques d’imitation avancées

Playwright permet des techniques d’imitation plus avancées, telles que les réponses conditionnelles ou les retards. Voici un exemple d’une simulation conditionnelle:

TypeScript

test('Conditional Mocking', async ({ page }) => {
    await page.route('https://api.example.com/user/profile', route => {
        if (route.request().method() === 'POST') {
            route.fulfill({
                status: 201,
                contentType: 'application/json',
                body: JSON.stringify({ message: 'Profile created' })
            });
        } else {
            route.fulfill({
                status: 200,
                contentType: 'application/json',
                body: JSON.stringify({
                    name: 'John Doe',
                    email: '[email protected]',
                    age: 30
                })
            });
        }
    });

    await page.goto('https://example.com/profile');
    
    // Logique de test supplémentaire ici
});

Vous pouvez également introduire des délais pour simuler la latence du réseau:

TypeScript

test('Mock with Delay', async ({ page }) => {
    await page.route('https://api.example.com/user/profile', async route => {
        await new Promise(res => setTimeout(res, 2000)); // Delay for 2 seconds
        route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                name: 'John Doe',
                email: '[email protected]',
                age: 30
            })
        });
    });

    await page.goto('https://example.com/profile');
    
    // Logique de test supplémentaire ici
});

Conclusion

Mocker des API dans Playwright avec TypeScript est une technique puissante qui améliore la fiabilité et la rapidité de vos tests. En interceptant les demandes du réseau et en fournissant des réponses personnalisées, vous pouvez simuler divers scénarios et vous assurer que votre application se comporte comme prévu dans différentes conditions.

J’espère que ce guide vous aidera à démarrer avec le mocking d’API dans vos tests Playwright. Bon test !

Source:
https://dzone.com/articles/effortless-api-mocking-with-playwright