Effiziente API-Mocking mit Playwright

Tutorials

TypeScript

Automatisierte Teste von Webanwendungen erfordern oft Interaktion mit externen APIs. Abhängigkeit von tatsächlichen API-Antworten kann jedoch Variablen außerhalb Ihrer Kontrolle aufweisen, wie z.B. Netzwerkprobleme oder Serverunterbrechungen. Hier kommt die API-Mocking-Technik zum Einsatz. Mocking ermöglicht es Ihnen, API-Antworten zu simulieren, was Ihre Tests verlässlicher und schneller macht. In diesem Artikel werden wir erfahren, wie Sie mit Playwright und TypeScript APIs mocken können.

API-Mocking in Playwright

Playwright bietet eine Methode, um Netzwerkanfragen abzufangen und mit dem route-Verfahren Response-Mockings durchzuführen. Lassen Sie uns ein Beispiel durchgehen, in dem wir eine API-Antwort mocken.

Schritt-für-Schritt-Anleitung

1. Importieren Sie die notwendigen Module + erstellen Sie einen grundlegenden Test

TypeScript

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

test('Mock User Profile API', async ({ page }) => {
    await page.goto('https://example.com/profile');
    // Mocking wird hier durchgeführt
});

2. Richten Sie Anfrage-Interception und Mocking ein

TypeScript

test('Mock User Profile API', async ({ page }) => {
    // Szenario 1: Erfolgreiche Datenerfassung
    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. Fügen Sie weitere Szenarien hinzu

TypeScript

test('Mock User Profile API - Empty Profile', async ({ page }) => {
    // Szenario 2: Leere Benutzerprofil
    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 }) => {
    // Szenario 3: Serverfehler
    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');
});

Ausführen Ihrer Tests

npx playwright test

Fortgeschrittene Mocking-Techniken

Playwright bietet auch fortschrittliche Mocking-Techniken, wie z.B. bedingte Antworten oder Verzögerungen. Hier ist ein Beispiel für ein bedingtes 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');
    
    // Zusätzliche Testlogik hier
});

Sie können auch Verzögerungen einfügen, um Netzwerkschwankungen zu simulieren:

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');
    
    // Zusätzliche Testlogik hier
});

Fazit

Mocking APIs in Playwright mit TypeScript ist eine kraftvolle Technik, die die Verlässlichkeit und Geschwindigkeit Ihrer Tests verbessert. Durch das Abfangen von Netzwerkanfragen und die Bereitstellung benutzerdefinierter Antworten können Sie verschiedene Szenarien simulieren und sicherstellen, dass Ihre Anwendung wie erwartet unter verschiedenen Bedingungen verhält.

Ich hoffe, dass dieser Leitfaden Ihnen beim API-Mocken in Ihren Playwright-Tests helfen wird. Viel Erfolg bei den Tests!

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