Charles Proxy для тестировщика: установка, настройка и подмена запросов

Что такое Charles и зачем он тестировщику

Прокси-сервер – промежуточный сервер между клиентом и сервером: запрос сначала приходит на прокси, и уже тот передаёт его дальше. Обычно прокси нужен, чтобы открыть ресурс, недоступный из своей страны, или чтобы не обращаться к серверу напрямую. Charles использует ту же схему для другой цели. Весь трафик идёт через него, и тестировщик видит каждый запрос и ответ.

Такие программы называют снифферами, а перехват и разбор пакетов, которые идут по сети, – сниффингом. На собеседовании могут спросить, что такое сниффинг и какие снифферы вы знаете. Для начала достаточно ответить, что это инструменты для перехвата запросов и ответов сервера, например Charles и Fiddler, и что тестировщик с их помощью изучает и меняет трафик.

С Charles видно, как клиент и сервер общаются под капотом. Он показывает те же данные, что вкладка Network в DevTools, но ловит трафик любой программы, которая к нему подключена, в том числе мобильного приложения. Если документации по API нет, запрос из Charles можно перенести в Postman и тестировать уже там. А подменив ответ сервера, легко проверить, покажет ли приложение ошибку, которую сервер на самом деле не возвращал.

Charles платный. Пробная версия работает 30 дней, после этого программа продолжает запускаться, но сеанс ограничен 30 минутами и время от времени появляется окно с напоминанием о покупке. Бесплатный аналог для Windows – Fiddler Classic.

Установка и сертификат для HTTPS

Charles скачивают с официального сайта charlesproxy.com в версии для своей системы: Windows, macOS или Linux. Установка обычная, путь и настройки можно оставить по умолчанию. При первом запуске система может спросить, разрешить ли программе доступ к сети, и его нужно разрешить.

Без сертификата Charles видит, что браузер обратился к сайту по HTTPS, но содержимого не покажет. Трафик зашифрован, и вместо запросов в списке стоит <unknown>. Чтобы Charles мог его расшифровать, ставят его корневой сертификат и включают для сайта SSL Proxying.

• 1. Установить сертификат

  Help → SSL Proxying → Install Charles Root Certificate. В мастере Windows выбрать текущего пользователя, отметить "Поместить все сертификаты в следующее хранилище", указать "Доверенные корневые центры сертификации" и согласиться с предупреждением безопасности. На macOS сертификат попадает в Связку ключей, и там ему вручную ставят "Всегда доверять".

• 2. Включить SSL Proxying

  Щёлкнуть по сайту в списке правой кнопкой, выбрать Enable SSL Proxying и обновить страницу. Чтобы не включать его для каждого сайта отдельно, в Proxy → SSL Proxying Settings добавляют правило со звёздочкой в поле Host, и оно действует на все адреса.

• 3. Оставить на виду один сайт

  Команда Focus в том же меню выделяет выбранный хост, а остальные сворачиваются в группу Other Hosts. В режиме Sequence галочка Focused оставляет в списке только его запросы.

Как подключить Android, iPhone и эмулятор

Телефон или эмулятор отправляет трафик на компьютер, где запущен Charles, поэтому оба устройства должны быть в одной сети Wi-Fi. Понадобятся IP-адрес компьютера и порт. Адрес показывает сам Charles в меню Help → Local IP Address, а в Windows ещё и команда ipconfig: нужна строка IPv4 у адаптера, через который компьютер подключён к сети. Порт Charles по умолчанию – 8888.

• Эмулятор Android Studio

  В настройках эмулятора (Extended controls, раздел Settings, вкладка Proxy) снять галочку Use Android Studio HTTP proxy settings, выбрать ручную настройку, вписать IP компьютера и порт 8888 и нажать Apply. Charles спросит, пускать ли новое подключение, и ему отвечают Allow.

• Телефон на Android

  В настройках Wi-Fi долго нажать на свою сеть, выбрать "Изменить сеть", открыть дополнительные параметры и в пункте "Прокси-сервер" выбрать "Вручную". В поле имени хоста вписать IP компьютера, в поле порта 8888. Названия пунктов зависят от прошивки. После сохранения Charles так же спросит разрешение.

• Сертификат на телефоне

  Без него HTTPS-запросы с телефона останутся нечитаемыми. Я сохраняю сертификат через Help → SSL Proxying → Save Charles Root Certificate, меняю расширение файла на .cer, присылаю его себе на почту и ставлю на телефоне с пометкой "VPN и приложения". Скачать файл можно и прямо на телефоне с адреса chls.pro/ssl, пока прокси включён. В новых версиях Android его устанавливают из настроек безопасности.

• Приложения на Android 7 и новее

  Браузер Chrome доверяет установленному сертификату, а приложения, собранные под Android 7.0 и новее, по умолчанию доверяют только системным. Чтобы тестировщик видел трафик приложения, разработчики разрешают пользовательские сертификаты в отладочной сборке через network security config.

• iPhone

  Прокси задают так же, в настройках сети Wi-Fi. После установки сертификата его включают в разделе Основные → Об этом устройстве → Доверие сертификатам. Я показываю Android, а для iOS отсылаю к документации Charles: там по шагам расписаны macOS, iOS, симуляторы и Android.

Что искать в перехваченных запросах

Запросы удобнее разбирать в режиме Sequence. Это список, похожий на вкладку Network в DevTools: код ответа, метод, хост, путь, время начала, длительность и размер. У выбранного запроса во вкладке Overview видна сводка, а рядом открываются сами запрос и ответ с заголовками и телом. В список можно добавлять колонки, в том числе свои, и всё нужное для проверки собирается в одном окне.

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

• Адрес

  Запрос уходит на тот URL, который указан в требованиях или в документации к API.

• Метод

  Используется метод из документации: если там POST, запрос не должен уходить через GET.

• Время ответа

  Если в требованиях есть предел на обработку запроса, а запрос идёт дольше, это дефект.

• Дубли

  Один и тот же запрос не должен уходить дважды. Лишние запросы увеличивают время ответа, пользователь ждёт дольше, и о них сообщают разработчикам.

• Пример: двойной заказ

  В приложении магазина пользователь на медленной сети дважды нажимает "Оформить заказ", и в Charles видно два запроса POST на создание заказа. Если сервер принял оба, у клиента два заказа и, возможно, два списания. Кнопку после первого нажатия должны блокировать, а сервер не должен создавать заказ из повторного запроса, поэтому к баг-репорту прикладывают оба запроса.

Подмена запросов и ответов

Ответ сервера в Charles можно изменить до того, как его получит приложение. Так проверяют реакцию клиента на ошибки, которые трудно вызвать по-настоящему. Перед подменой стоит узнать в документации или у разработчиков, что приложение должно показывать при ошибках 403, 404, 500 и 503, потому что на каждом проекте это устроено по-своему.

В уроке я открываю учебную систему Users Bugred, с которой работаю в уроках про API. В Tools → Rewrite создаю для её адреса правило с типом Response Status: в поле Match стоит 200, в поле Replace стоит 500. После обновления страницы Charles показывает у запроса код 500, а на экране ничего не меняется, хотя обычно при ошибке сервера клиент сообщает о ней и страница не загружается. Если документация ждёт сообщения об ошибке, это баг. Оговорюсь, что у чужой системы правильная реакция может быть описана иначе, поэтому последнее слово за документацией.

Почти все инструменты подмены собраны в меню Tools, а замедление сети и точки останова – в меню Proxy. Правило, которое больше не нужно, выключают сразу, иначе оно продолжит менять трафик на следующих проверках.

• Map Remote

  Перенаправляет запросы с одного адреса на другой: в уроке запросы к google.com уходят на yandex.ru. В работе так подставляют, например, тестовый сервер вместо боевого. Адрес вставляют в поле Host и нажимают Tab, и Charles сам разбирает его на протокол, хост и путь.

• Rewrite

  Правила подмены для выбранного адреса: можно поменять заголовки, хост, путь, URL, параметры запроса, код ответа или тело. В поле Match пишут, что заменить, в поле Replace – на что.

• Map Local

  Подменяет тело ответа локальным файлом: картинкой, JSON или XML. Пригодится, чтобы воспроизвести баг с конкретным файлом, который прислал заказчик.

• Block List и Allow List

  Block List не пускает к указанному хосту: рвёт соединение или возвращает ошибку 403. Allow List работает наоборот и отвечает 403 на все хосты, кроме перечисленных.

• Throttling

  Замедляет сеть для одного хоста или для всех, чтобы посмотреть, как приложение ведёт себя на медленном интернете. Включается в Proxy → Throttle Settings или кнопкой на панели. Например, в приложении бронирования отелей выбирают профиль 3G и смотрят, что во время долгой загрузки списка номеров виден индикатор, а если уйти с экрана и вернуться, список не задваивается и приложение не падает.

• Breakpoints

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

Видеоуроки, шпаргалки и задания

Charles я разбираю в двух видео на YouTube. В первом ставлю программу и сертификат и подключаю эмулятор и телефон, во втором показываю анализ запросов, подмену ответов, замедление сети и точки останова. В бесплатном базовом курсе по тестированию есть урок на эту тему, и после теории в нём идут задания.

Шпаргалка по кодам ответов HTTP помогает понять, что именно подменяется в правиле Rewrite, а шпаргалка о HTTPS и TLS объясняет шифрование, которое Charles расшифровывает своим сертификатом. В тренажёре API-запросов нужно разобраться с методами и кодами ответов.

• Урок курсаЭтот урок с заданиями – бесплатно
• Мой видеоурокCharles Proxy, установка и настройка
• Мой видеоурокпрактика в Charles Proxy
• Шпаргалкакоды ответов HTTP
• ШпаргалкаHTTPS, TLS и версии HTTP
• ТренажёрAPI-запросы
• СтатьяDevTools для тестировщика
• СтатьяТестирование мобильных приложений

Курсы по теме

• бесплатный

  Тестирование ПО с нуля. Теория + Практика. Базовый уровень

  Первое рабочее место тестировщика

  89 уроков113 441

Вопросы и ответы