Манипуляция API с помощью Playwright

TypeScript

Автоматизированные тесты веб-приложений часто требуют взаимодействия с внешними API. Однако использование их реальных ответов может привести к внешним факторам, которые вы не можете контролировать, таким как проблемы с сетью или недоступность сервера. В этом месте наступает зона действия мокинга API. Мокинг позволяет вам симулировать ответы API, что делает ваши тесты более надежными и быстрыми. В этой статье мы посмотрим, как мокировать API с использованием Playwright с TypeScript.

Мокирование API в Playwright

Playwright обеспечивает способ прерывания сетевых запросов и мокирования ответов с использованием метода route. Пройдем пример, где мы мокируем ответ API.

Пошаговое руководство

1. Импортировать необходимые модули + Создать базовый тест

TypeScript

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

test('Mock User Profile API', async ({ page }) => {
    await page.goto('https://example.com/profile');
    // Мокинг будет выполнен здесь
});

2. Настроить прерванние запросов и мокирование

TypeScript

test('Mock User Profile API', async ({ page }) => {
    // Сценарий 1: Успешное извлечение данных
    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. Добавить дополнительные сценарии

TypeScript

test('Mock User Profile API - Empty Profile', async ({ page }) => {
    // Сценарий 2:пустой профиль пользователя
    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 }) => {
    // Сценарий 3: Ошибка сервера
    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');
});

Запуск ваших тестов

npx playwright test

Продвинутые техники мокирования

Playwright позволяет использовать более продвинутые техники мокирования, такие как условные ответы или задержки. Вот пример условного мокирования:

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');
    
    // Дополнительное логическое тестирование здесь
});

Вы также можете добавить задержки для симуляции ожидания в сети:

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');
    
    // Дополнительное логическое тестирование здесь
});

Заключение

Макинга APIs в Playwright с TypeScript является мощным способом, который улучшает надежность и скорость ваших тестов. intercepting network requests и обеспечивая customs responses, вы можете имитировать различные сценарии и убедиться, что ваша приложение ведет себя как ожидалось при различных условиях.

Я надеюсь, что этот指南 поможет вам начать работу с макингом API в ваших тестах Playwright. Счастливые тесты!

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