Mockeo de API sin esfuerzo con Playwright

Tutoriales

TypeScript

La prueba automatizada de aplicaciones web a menudo requiere la interacción con APIs externas. Sin embargo, confiar en las respuestas reales de las API puede introduce variables fuera de tu control, como problemas de red o tiempo de inactividad del servidor. Aquí es donde entra en juego la simulación de API (mocking). Simular permite simular respuestas de API, haciendo que tus pruebas sean más confiables y más rápidas. En este artículo, exploraremos cómo simular APIs usando Playwright con TypeScript.

Simulación de API en Playwright

Playwright proporciona una manera de interceptar solicitudes de red y simular respuestas usando el método route. Vamos a pasar por un ejemplo donde se simula una respuesta de API.

Guía Paso a Paso

1. Importar los Módulos Necesarios + Crear una Prueba Básica

TypeScript

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

test('Mock User Profile API', async ({ page }) => {
    await page.goto('https://example.com/profile');
    // Simulación se realizará aquí
});

2. Configurar la Intercepción de Solicitudes y la Simulación

TypeScript

test('Mock User Profile API', async ({ page }) => {
    // Escenario 1: Retiro de datos exitoso
    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. Agregar Más Escenarios

TypeScript

test('Mock User Profile API - Empty Profile', async ({ page }) => {
    // Escenario 2: Perfil de usuario vacío
    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 }) => {
    // Escenario 3: Error del servidor
    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');
});

Ejecutando Tus Pruebas

npx playwright test

Técnicas Avanzadas de Simulación

Playwright permite técnicas de simulación avanzadas, como respuestas condicionales o retrasos. Aquí hay un ejemplo de una simulación condicional:

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');
    
    // Lógica de prueba adicional aquí
});

También puedes introducir retrasos para simular la latencia de red:

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');
    
    // Lógica de prueba adicional aquí
});

Conclusión

Mimar API en Playwright con TypeScript es una técnica poderosa que mejora la confiabilidad y la velocidad de sus pruebas. Interceptando solicitudes de red y proporcionando respuestas personalizadas, puede simular varios escenarios y asegurar que su aplicación se comporta como se espera bajo diferentes condiciones.

Espero que este guía le ayude a iniciar con la imitación de API en sus pruebas de Playwright. ¡Pruebas felices!

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