API тестирование вместе с UI тестами

Интеграция API и UI тестирования

Protractor — инструмент для автоматизированного тестирования веб-приложений на базе Angular и других фронтенд-фреймворков. Традиционно Protractor используется для проверки взаимодействия пользователя с интерфейсом, однако в реальных проектах часто возникает необходимость совмещать UI тесты с проверкой API, чтобы гарантировать корректность данных, отображаемых на странице.

Объединение UI и API тестирования позволяет:

  • Сократить время тестирования, выполняя проверку данных напрямую через API без необходимости полностью прогонять UI.
  • Повысить надёжность тестов, отделяя баги интерфейса от проблем на уровне сервера.
  • Обеспечить контроль состояния тестируемого приложения, устанавливая тестовые данные через API перед запуском UI сценариев.

Подключение HTTP-клиента

Для работы с API в тестах на Protractor удобно использовать axios или node-fetch. Пример установки:

npm install axios --save-dev

Импорт в тесте:

const axios = require('axios');

Создание базового клиента API:

const apiClient = axios.create({
    baseURL: 'https://example.com/api',
    timeout: 5000,
    headers: { 'Content-Type': 'application/json' }
});

Выполнение API-запросов

Запрос на получение списка пользователей:

async function getUsers() {
    try {
        const response = await apiClient.get('/users');
        return response.data;
    } catch (error) {
        console.error('Ошибка при получении пользователей:', error);
        throw error;
    }
}

Создание нового пользователя через API перед UI тестом:

async function createUser(userData) {
    const response = await apiClient.post('/users', userData);
    return response.data;
}

Удаление данных после теста:

async function deleteUser(userId) {
    await apiClient.delete(`/users/${userId}`);
}

Связка API и UI в Protractor

Обычно последовательность действий выглядит следующим образом:

  1. Создание данных через API: формируются тестовые объекты для UI тестов.
  2. Выполнение UI сценариев: проверки отображения данных на странице, интеракции с элементами.
  3. Верификация через API: проверка корректности изменений в базе данных или через API после взаимодействия с UI.
  4. Очистка данных: удаление или восстановление состояния приложения.

Пример интегрированного теста:

describe('UI + API тестирование пользователей', () => {

    let testUser;

    beforeAll(async () => {
        testUser = await createUser({ name: 'Test User', email: 'test@example.com' });
    });

    it('должен отображать нового пользователя на странице', async () => {
        await browser.get('/users');

        const userElement = element(by.cssContainingText('.user-name', testUser.name));
        expect(await userElement.isPresent()).toBe(true);
    });

    it('должен обновлять данные через UI и проверять через API', async () => {
        const updatedName = 'Updated User';

        const editButton = element(by.css(`.edit-user[data-id="${testUser.id}"]`));
        await editButton.click();

        const nameInput = element(by.css('input[name="name"]'));
        await nameInput.clear();
        await nameInput.sendKeys(updatedName);

        const saveButton = element(by.css('.save-user'));
        await saveButton.click();

        const updatedUser = await apiClient.get(`/users/${testUser.id}`);
        expect(updatedUser.data.name).toEqual(updatedName);
    });

    afterAll(async () => {
        await deleteUser(testUser.id);
    });

});

Особенности тестирования Angular-приложений

Protractor отслеживает Angular-зоны, что позволяет автоматически ожидать завершения асинхронных операций на клиенте. Однако при интеграции API тестов важно помнить:

  • Асинхронные API-запросы выполняются независимо от Angular, поэтому необходимо использовать async/await или промисы для синхронизации.
  • Тестовые данные через API должны быть уникальными, чтобы исключить конфликты между параллельными тестами.
  • Очистка данных обязательна, иначе последующие UI тесты могут давать ложноположительные результаты.

Преимущества подхода

  1. Повышение скорости тестирования: создание и проверка данных напрямую через API ускоряет подготовку тестов.
  2. Снижение хрупкости UI тестов: UI тест проверяет только отображение данных, API гарантирует их корректность.
  3. Упрощение отладки: баги можно локализовать на уровне фронтенда или API.

Лучшие практики

  • Использовать отдельный тестовый API сервер или sandbox для UI тестов.
  • Разделять подготовку данных и UI проверки на отдельные функции.
  • Логировать результаты API запросов для возможности анализа сбоев.
  • Применять параллельное выполнение UI тестов, но с изоляцией данных каждого теста.

Интеграция API и UI тестирования в Protractor позволяет создавать комплексные сценарии, обеспечивая высокое качество проверок и стабильность автоматизированного тестового процесса.

Оглавление