Fazendo a simulação da API sem esforço com o Playwright

Tutoriais

TypeScript

Os testes automatizados de aplicações Web requerem frequentemente a interação com APIs externas. No entanto, confiar nas respostas reais da API pode introduzir variáveis fora do seu controlo, como problemas de rede ou tempo de inatividade do servidor. É aqui que entra a simulação de API. A simulação permite simular respostas de API, tornando seus testes mais confiáveis e rápidos. Neste artigo, exploraremos como simular APIs usando o Playwright com TypeScript.

Fazendo mock de APIs no Playwright

O Playwright fornece uma maneira de intercetar solicitações de rede e simular respostas usando o método route. Vamos percorrer um exemplo em que simulamos uma resposta de API.

Guia passo a passo

1. Importe os módulos necessários + crie um teste básico

TypeScript

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

test('Mock User Profile API', async ({ page }) => {
    await page.goto('https://example.com/profile');
    // A simulação será feita aqui
});

2. Configure a intercetação de solicitação e a simulação

TypeScript

test('Mock User Profile API', async ({ page }) => {
    // Cenário 1: recuperação de dados bem-sucedida
    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. Adicionar mais cenários

TypeScript

test('Mock User Profile API - Empty Profile', async ({ page }) => {
    // Cenário 2: Perfil de usuário vazio
    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 }) => {
    // Cenário 3: Erro do 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');
});

Executando seus testes

npx playwright test

Técnicas avançadas de simulação

O Playwright permite técnicas mais avançadas de simulação, como respostas condicionais ou atrasos. Aqui está um exemplo de uma simulação 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 teste adicional aqui
});

Também é possível introduzir atrasos para simular a latência da rede:

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 teste adicional aqui
});

Conclusão

A simulação de APIs no Playwright com TypeScript é uma técnica poderosa que aumenta a confiabilidade e a velocidade dos seus testes. Ao intercetar solicitações de rede e fornecer respostas personalizadas, você pode simular vários cenários e garantir que seu aplicativo se comporte conforme o esperado em diferentes condições.

Espero que este guia ajude você a começar a usar a simulação de API em seus testes do Playwright. Feliz teste!

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