Eenvoudige API mocking met Playwright

TypeScript

Automatische testen van webapplicaties vereist vaak interactie met externe APIs. Echter, het vertrouwen op actuele API-responses kan onbekende variabelen introduceren, zoals netwerkproblemen of serveruitval. Dit is waar API-mocking zijn intrede maakt. Mocking maakt het mogelijk om API-responses te simuleren, waardoor uw tests betrouwbaarder en sneller worden. In dit artikel zullen we kijken hoe u APIs kunt mogenen met Playwright en TypeScript.

API-mocking in Playwright

Playwright biedt een manier om netwerkverzoeken af te handelen en responsen te mogenen met de methode route. Laten we een voorbeeld doorlopen waarin we een API-respons simuleren.

Stap-voor-stap gids

1. Importeer de nodige modules + Maak een basisproef

TypeScript

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

test('Mock User Profile API', async ({ page }) => {
    await page.goto('https://example.com/profile');
    // Mocking zal hier uitgevoerd worden
});

2. Stel verzoeken in voor interception en mocking

TypeScript

test('Mock User Profile API', async ({ page }) => {
    // Scenario 1: succesvolle gegevensophaling
    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. Voeg meer scenario’s toe

TypeScript

test('Mock User Profile API - Empty Profile', async ({ page }) => {
    // Scenario 2: lege gebruikersprofiel
    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 }) => {
    // Scenario 3: serverfout
    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');
});

Uw testen uitvoeren

npx playwright test

Geavanceerde mocking technieken

Playwright biedt geavanceerde mocking-technieken, zoals condities voor responsen of vertragingen. Hier is een voorbeeld van een conditie voor een mock:

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');
    
    // Additional test logic here
});

U kunt ook vertragingen introduceren om netwerklatentie te simuleren:

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');
    
    // Additional test logic here
});

Conclusie

Mocking APIs in Playwright met TypeScript is een krachtige techniek die de betrouwbaarheid en snelheid van uw tests verbetert. Door intercepteren van netwerkverzoeken en aan te bieden van aangepasteresponses, kunt u verschillende scenario’s simuleren en ervoor zorgen dat uw toepassing zoals verwachted gaat reageren onder verschillende omstandigheden.

Ik hoop dat deze gids u helpt aan de slag te komen met API-mocking in uw Playwright-testen. Vrolijk testen!

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