Найти тему

Экономим время на подготовке тестовых данных для веб-форм. Рассказываю, как формировать запросы к серверу инструментами разработчика

Рабочий день тестировщика включает немало рутинных задач, к которым относятся подготовительные операции к проведению тестирования.
Они включают в себя подготовку тестовой среды и тестовых данных.

Например, если мы хотим проверить получение сервером команды для редактирования данных документа, то сначала нужно создать этот документ. Документ может включать множество заполняемых полей, чек боксов, и других интерактивных элементов. Таким образом выполняются подготовительные действия для отправки браузером запроса серверу на создание документа. Отправка и исполнение запроса сервером, как правило, занимает доли секунды, а подготовка данных намного большее время. Как мы можем сэкономить время на подготовку данных?

Изображение создано нейросетью PlaygroundAI
Изображение создано нейросетью PlaygroundAI

Можно сформировать запрос в программе или воспроизвести запрос при помощи специальных инструментов. При этом время проверки существенно сократится. Для начала воспользуемся инструментом DevTools, который мы рассматривали в этой статье. Зайдем во вкладку Сеть и попробуем заполнить форму на сайте. Мы увидим, что при каждом действии на сайте или даже чаще, появляются отклики сервера на наши действия. Установим фильтры -yandex -google чтобы уменьшить количество видимых запросов. Установим также фильтр Fetch/XHR.

XHR расшифровывается как XML Http Request, расширение языка JavaScript для написания интернет-запросов серверу по протоколу Http с передачей данных в формате XML. После установки фильтров в браузере Chrome получим список запросов серверу такого вида:

Инструмент DevTools браузера Chrome, запрос на сбор статистики
Инструмент DevTools браузера Chrome, запрос на сбор статистики

В списке остался запрос collect, т.к. кроме Яндекса и Гугла подключена еще одна статистика. Последним в списке будет запрос на обновление данных формы. При нажатии на этот запрос получим следующие данные:

Инструмент DevTools браузера Chrome, запрос на обновление формы
Инструмент DevTools браузера Chrome, запрос на обновление формы

Метод запроса POST позволяет отправить данные на сервер. Код статуса 200 означает, что операция прошла успешно. В документации проекта могут быть данные endpoint-ов. Это шлюзы данных, которые соединяют серверные процессы приложения с интерфейсом. Они содержат адреса, на которые отправляются сообщения. По данным endpoint-ов можно определить, за что отвечает запрос, какую функцию выполняет. Таким образом, тестировщик может получить данные тестируемых запросов и выделить из общего количества запросов нужные.

Если данных endpoint-ов нет, нужно попытаться выбрать нужные запросы самостоятельно. Если запросов слишком много, нужно очистить историю запросов перед поиском нужного запроса. Запросы на получение данных GET передают всю информацию в адресной строке. Выглядит это так же, как показано в примере выше с запросом collect от службы сбора статистики.

Листая данные по выбранному запросу, как показано на скриншоте, можно узнать все переданные и полученные данные от сервера. Таким образом, можно выяснить, какие данные формы были переданы на сервер и узнать, прошла ли операция успешно. Этот метод работает намного быстрее, чем если бы мы меняли данные в форме, т.к. в запросе мы меняем один или несколько параметров, а в форме нам каждый раз нужно было бы заполнять все поля, иначе данные не отправятся.

Можно конструировать свои запросы, используя метод GET в адресной строке браузера, но для этой цели лучше подойдут специальные инструменты, которые мы рассмотрим далее, в будущих публикациях.

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