В автоматизированном тестировании веб-приложений одним из ключевых аспектов является проверка правильности формирования и отправки HTTP-запросов. В контексте Protractor, который ориентирован на тестирование Angular-приложений, это достигается сочетанием инструментов для работы с браузером и библиотек для перехвата и анализа сетевых запросов.
Protractor изначально не предоставляет встроенных средств для прямого контроля HTTP-запросов. Для работы с ними используются сторонние библиотеки, такие как browsermob-proxy, Protractor-http-mock, ng-apimock, или network-interception через DevTools Protocol. Основные шаги включают:
Настройка прокси-сервера Прокси позволяет
перехватывать все запросы и ответы между браузером и сервером. Например,
с использованием browsermob-proxy:
const browsermob = require('browsermob-proxy');
const proxy = new browsermob.Proxy();
beforeAll(async () => {
await proxy.start();
const proxyPort = proxy.port;
browser.waitForAngularEnabled(false);
browser.getCapabilities().then(caps => {
caps.set('proxy', {
httpProxy: `localhost:${proxyPort}`,
sslProxy: `localhost:${proxyPort}`
});
});
});
afterAll(async () => {
await proxy.stop();
});
Здесь создается прокси-сервер, который будет фиксировать все HTTP-запросы для последующего анализа.
Использование HTTP-моков Для тестирования фронтенд-логики часто применяются мок-серверы, позволяющие подменять ответы от сервера и проверять правильность формируемых запросов:
const httpMock = require('protractor-http-mock');
beforeEach(() => {
httpMock([{
request: {
path: '/api/users',
method: 'GET'
},
response: {
data: [{ id: 1, name: 'John Doe' }]
}
}]);
});
afterEach(() => {
httpMock.teardown();
});
Это позволяет проверять, что фронтенд делает корректный запрос и обрабатывает ответ правильно.
Ключевой момент заключается в проверке параметров, передаваемых в запросе: query-параметры, тело POST-запроса и заголовки. В Protractor это можно сделать через перехват запросов или через мок-библиотеки.
Проверка query-параметров
Используя мок-сервер или прокси, можно перехватить URL запроса:
it('should send correct query parameters', async () => {
const requests = await proxy.har; // HAR — лог всех запросов
const userRequest = requests.log.entries.find(e => e.request.url.includes('/api/users'));
expect(userRequest.request.queryString).toContainEqual({ name: 'John', role: 'admin' });
});
Важно проверить каждый ключ и значение в массиве
queryString, чтобы убедиться, что фронтенд отправляет
правильные данные.
Проверка тела POST-запроса
Для POST-запросов тело запроса имеет формат JSON. Проверка включает парсинг тела и сопоставление с ожидаемым объектом:
const postRequest = requests.log.entries.find(e => e.request.method === 'POST' && e.request.url.includes('/api/users'));
const requestBody = JSON.parse(postRequest.request.postData.text);
expect(requestBody).toEqual({ name: 'Alice', role: 'editor' });
Такой подход позволяет убедиться, что данные формы или отправленные через Angular сервисы корректно формируются.
Проверка заголовков запроса
Заголовки могут содержать ключи авторизации, тип контента и другие важные параметры:
expect(postRequest.request.headers).toContainEqual({ name: 'Content-Type', value: 'application/json' });
expect(postRequest.request.headers).toContainEqual({ name: 'Authorization', value: 'Bearer token123' });
Проверка заголовков критична при работе с API, требующими аутентификации или передачи специальных ключей.
Protractor работает на основе WebDriverJS и поддерживает асинхронные
операции. При проверке запросов важно корректно использовать
async/await:
it('should verify request parameters asynchronously', async () => {
await element(by.id('submitButton')).click();
const requests = await proxy.har;
const req = requests.log.entries.find(e => e.request.url.includes('/api/data'));
expect(JSON.parse(req.request.postData.text)).toMatchObject({ filter: 'recent' });
});
Асинхронность гарантирует, что запрос будет отправлен, а лог запросов обновлен перед проверкой параметров.
Для сложных тестов рекомендуется сохранять HAR-файлы или выводить запросы в консоль для анализа:
console.log(JSON.stringify(requests.log.entries, null, 2));
Это упрощает выявление ошибок в параметрах запросов, особенно когда используются динамические данные или сложные query-параметры.
Такой подход обеспечивает надежное тестирование правильности формирования и отправки запросов в Angular-приложениях с использованием Protractor.