Что такое чарльз прокси

Charles: незаменимый тул в арсенале QA-инженера

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси
Для тестирования мобильных приложений, работающих с удаленными серверами, QA-инженеру приходится держать под рукой множество разных тестовых аккаунтов, логов, запросов и ответов. Реальность такова, что не всегда удается договориться о предоставлении нужных тестовых данных в срок. Чаще всего серверные разработчики будут незнакомыми вам людьми по ту сторону Скайпа. В таких ситуациях приходится своими руками подменять ответ сервера перед его передачей в приложение.

Чтобы редактировать выдачу сервера и воспроизводить сложные тестовые сценарии в QA Redmadrobot, мы используем Charles.

Как это работает?

Charles — инструмент для мониторинга HTTP/HTTPS трафика. Программа работает как прокси-сервер между мобильным приложением (в нашем случае) и сервером этого приложения. Charles записывает и сохраняет все запросы, которые проходят через подключенный к нему телефон и позволяет их редактировать.

1. Качаем и устанавливаем.
2. При первом запуске Charles заботливо предложит автоматически настроить параметры сети — соглашаемся.
3. Переходим в Proxy > Proxy Settings и выставляем порт 8888, если он уже не прописан.
4. На телефоне заходим в настройки Wi-Fi и прописываем в прокси сервер IP-адрес вашего Mac и порт 8888.
Телефон должен быть подключен к той же Wi-Fi сети, что и ваш Mac.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Готово. При следующем соединении клиент Charles попросить разрешение подключить ваш телефон. После этого в Charles начинают отображаться все HTTP-запросы и ответы, которые проходят через ваш телефон.

Для мониторинга HTTPS-трафика нужно пройти дополнительные шаги:
5. Переходим в браузер телефона и заходим на www.charlesproxy.com/getssl для установки сертификата SSL, который будет использоваться при подключении. Устанавливаем.
6. В списке хостов выбираем желаемый хост с HTTPS и ставим галочку Enable SSL Proxying.
Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Готово. Теперь в клиенте Charles отображается HTTPS-трафик по выбранному хосту.

Важно
Если ваше приложение использует SSL pinning, то Charles не сможет перехватывать запросы и ответы.

Мониторинг трафика


Для наглядной демонстрации работы с API используем приложение Хабрахабр для Android. На iPhone стоит защита от программ типа Charles, но на Android её нет.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Charles выстраивает все запросы в порядке их отправки на сервер. Запросы и ответы можно просматривать как в отформатированном, так и в «сыром» виде. В QA Redmadrobot во время тестирования телефон всегда подключен к Charles. Таким образом остается возможность посмотреть историю запросов и отследить хитрые баги.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Подмена данных


Как видите, у меня не так много кармы. Charles поможет сделать вид, что её чуть больше, чем есть на самом деле.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Выдача по аккаунту выглядит так (только JSON-строка, без header’ов):

В логе есть поле score:
По всей видимости, как раз то, что мне нужно.

Rewrite settings

Для подмены серверных данных открываем Tools > Rewrite.
В списке слева отображаются сеты из запросов, которые можно составлять на свой вкус. После создания сета идет выставление location. Здесь мы прописываем URL запроса с query параметрами (по желанию).

Следующий шаг — создать правило подмены. К сожалению, Charles не умеет подменять информацию по ключу. Нужно вручную прописывать ключ и значение, а затем писать то, что мы ходим увидеть.

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

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Сам экран подмены будет выглядеть приблизительно так:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Следующий ответ по запросу информации о себе будет иметь отредактированные данные, score = 5000:

При следующем переходе на экран профиля в приложении Хабра мы увидим плод своих трудов.
Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Хочу еще раз напомнить, что информация на сервере остается прежней. Данные изменяются во время путешествия к МП и эти изменения никак не затрагивают реальные данные профиля.

Таким же образом можно подменять не только ответы, но и запросы. Для этого на экране Rewrite rule нужно поставить галочку в поле Request, а не Response.

Breakpoints

При подмене запросов с помощью Rewrite settings в Charles невозможно редактировать кириллицу. При изменении любой информации на кириллицу ваши логи будут состоять из множества вопросительных знаков.

К счастью, этот недостаток можно обойти с помощью другой функции Charles — breakpoints. Идея похожая, но только ответы останавливаются прямо перед передачей в МП, и их можно редактировать своими руками в реальном времени.

Открываем Breakpoints settings и прописываем URL запроса.
Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

При следующем ответе по этому запросу Charles перехватит всю выдачу и позволит нам с ней работать. Следует держать в голове, что МП может выкинуть ошибку по тайм-ауту, и текущий запрос уйдет в никуда.
Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Заменим мой логин на что-нибудь, написанное на кириллице.
Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Вот и все. Приложение отображает нужную нам информацию и проблем с кириллицей не возникает.
Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Самое главное

Источник

Начинающему QA: полезные функции снифферов на примере Charles Proxy

В этой статье я расскажу об основных функциях снифферов, которые могут быть полезны QA. Попробую не вдаваться в теорию, а сфокусироваться на практике. Наиболее популярными представителями анализаторов трафика сейчас являются WhireShark, Fiddler и Charles Proxy. Об удобстве интерфейсов и функционале каждого из них можно рассуждать долго, учитывая все плюсы и минусы. Но здесь я отдал предпочтение Charles, поскольку сам им активно пользуюсь. Буду рассказывать на его примере.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что собой представляет Charles Proxy

Первичная настройка

При тестировании мобильного приложения

Charles Proxy необходимо запустить на компьютере, который находится в той же локальной подсети, что и мобильное устройство с тестируемым приложением.

Как правило, соединение настраивается по Wi-Fi. В настройках Wi-Fi мобильного устройства в качестве proxy-сервера надо указать IP-адрес компьютера и стандартный порт инструмента 8888 (пароль остается пустым).

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Главное отличие в настройках для этой ОС в том, что с Android 6.0 и выше в Androidmanifest надо добавить специальную конфигурацию, позволяющую просматривать защищенный трафик. На продакшене эта конфигурация убирается из соображений безопасности.

При тестировании приложения на ПК

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Сертификат устанавливается в доверенные корневые центры.

Два слова об интерфейсе

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

С помощью контекстного меню запроса можно настраивать блокировки, повторять и изменять запросы. На этом мы еще остановимся.

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

Если запросов на экране слишком много, с помощью панели инструментов их можно очистить или вообще остановить перехват. Там же есть возможность включить и выключить троттлинг (подробнее об этих функциях расскажу позже). Базовая настройка каждой из функций осуществляется через меню, а кнопки панели управления выступают своего рода тумблерами On / Off.

Фильтрация

В Charles Proxy очень много вариантов фильтрации запросов.

На вкладке Sequence есть аналогичный фильтр.

Charles Proxy умеет работать с регулярными выражениями. Для этого на вкладке Sequence выбираем Settings и отмечаем пункт Filter uses regex. И вписываем в поле поиска элементарную регулярку.

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

Там же можно включить Autoscroll списка запросов или указать максимальное количество строк.

Блокируемый запрос можно прервать двумя способами (подходящий надо выбрать в настройках):

вернуть ошибку 403.

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

Можно провести эксперимент. Включим наш тестовый стенд в Block list, выбрав простой сброс соединения. С помощью контекстного меню запроса повторим его (команда Repeat) и получим такой ответ:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Просмотр SSL-трафика

Если ранее мы успешно установили SSL-сертификат, для просмотра зашифрованного трафика остается только включить SSL proxying для нужного хоста в самом Charles Proxy. Это можно сделать через контекстное меню конкретного хоста.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Аналогично настройке фильтров на вкладках Include и Exclude можно добавить или исключить конкретные хосты. Если списки на этих вкладках не заполнять, по умолчанию мы будем читать трафик со всех хостов.

Брейкпоинты

Установить Breakpoint можно из контекстного меню запроса. После этого все аналогичные запросы будут перехвачены. Их можно будет просматривать и редактировать.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Чтобы проверить, как это работает можно использовать повтор запроса (Repeat из того же контекстного меню). Запрос перехватывается, его можно редактировать.

Map remote

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

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

Map Local

Главное отличие Map Local от предыдущей функции в том, что замена осуществляется не на ответ другого сервера, а на содержимое локального файла. Настройки выглядят точно также, но вместо второго сервера мы указываем локальный путь к файлу с ответом.

Rewrite

Функция Rewrite может быть полезна, если вам нужно переписать данные, которые отправляются в Charles Proxy. В отличие от простого редактирования Rewrite позволяет задать правила изменения и работать в автоматическом режиме. Можно изменять и добавлять заголовки, искать и заменять текст в теле запроса или ответа. Можно даже менять статус ответа.

Настроить это можно через Rewrite settings, доступные в контекстном меню. Единственный недостаток инструмента в том, что каждое правило замены прописывается отдельно.

Помимо изменения запросов и ответов мы можем запретить кэширование или cookie (функции No caching и Block cookies). Эти опции повторяют аналогичные инструменты панели разработчика в браузере. В обоих случаях настраивается список хостов, для которых действует настройка. Если же список пуст, то кэширование и cookie отключаются на всех перехваченных хостах.

Throttling

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

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

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

Repeat Advanced

Хотя полноценное нагрузочное тестирование лучше проводить в специальных инструментах, Charles Proxy имеет одну базовую настройку, которая помогает закрыть минимальные потребности. Функция Repeat Advanced (доступная через контекстное меню перехваченного запроса) позволяет нужное количество раз повторить тот же запрос. После настройки откроется отдельная сессия, где будут видны детали каждого из запросов.

Отмечу, что Charles Proxy платный. Можно использовать триальную версию. Но раз в 5-7 минут поверх него будет отображаться всплывающее окно с версией, а раз в 30 минут он будет выключаться, при этом сессии не сохраняются. Решайте сами, помешает ли это вашей работе.

Автор статьи: Артем Холевко, Максилект.

Текст подготовлен по материалам внутреннего семинара Максилект.

Источник

Погружение в удивительный мир Charles для чайников

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

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

Charles работает и на мобильных устройствах, но в этой статье мы будем рассматривать только версию для Windows. Давайте же начнем!

Установка Charles

Начать следует, конечно же, с установки. Скачиваем программу с официального сайта разработчика.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Программа платная, но есть тестовый период на 30 дней. Даже без покупки программой можно спокойно пользоваться, но время одной сессии будет ограничено 30 минутами, а также частенько на 5-10 секунд будет появляться оверлей.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Вы можете получить полную версию программы сами-знаете-какими методами, но мы их рассматривать не будем. Все же лучше поддержать разработчиков!

После скачивания следует запустить exe-файл и произвести инсталляцию. Здесь ничего сложного нет, просто оставьте стандартные настройки установки.

Настройка программы

После установки программу следует настроить. Многие пользователи Charles забывают об этом этапе, а затем кусают локти, пытаясь понять, почему у них ничего не работает. На самом деле настройка программы очень простая, сейчас все покажу!

Для начала нужно установить сертификат программы. Именно из-за него, увы, и возникает большинство проблем, связанных с неработоспособностью программы.

Инструкция по установке сертификата:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Жмем «Установить сертификат».

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Здесь выбираем «Локальный компьютер» и жмем «Далее».

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

ВАЖНО! На этом этапе выбираем «Поместить все сертификаты в следующее хранилище», жмем «Обзор», затем ОБЯЗАТЕЛЬНО выбираем «Доверенные корневые центры сертификации».

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз проксиЖмем «Далее».

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Установку сертификата мы выполнили, теперь нам необходимо включить SSL Proxying и настроить его фильтрацию, чтобы начать перехватывать запросы. Фильтрация определяет, какие именно запросы нужно ловить, но мы сделаем так, чтобы у нас перехватывались все запросы.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Ставим галочку на «Enable SSL Proxying», затем под полем «Include» жмем на кнопку «Add».

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Программа настроена. Теперь рассмотрим ее возможности и функции.

Compose

Данная функция позволяет нам отправить копию выбранного запроса с измененными параметрами.

Нам достаточно выбрать один конкретный запрос и с помощью функции Compose поменять его параметры (заголовок запроса, тело запроса, куки, код и пр.)
Для начала мы можем отделить конкретные запросы от остальных с помощью функции Focus :

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

У нас создается копия запроса, в которой мы можем менять все, что нам нужно: тело, шапку, тип запроса, версию HTTP и т.д.

Например, можно подменять некоторые значения в коде, чтобы проверить валидацию на бэкенде. Допустим, поле принимает только числовое значение. Мы используем Compose, передавая в значение поле уже буквы. Если запрос пройдет без ошибок, то это значит, что валидация отсутствует.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

После изменения нужных нам параметров жмем « Execute » и получаем копию запроса с ответом от сервера.

Breakpoint

Данная функция позволяет точнее работать с запросами, вешая на них так называемый «Breakpoint» (точку остановки).

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

Отмечу, что эта функция, по сути, делает автоматический Compose. Вы так же можете менять значения, но вам не придется каждый раз выбирать конкретный запрос.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Ставим галочку на «Enable Breakpoints», затем жмем «Add».

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Заполняем все поля в открывшемся окне (выше пример заполнения).

При повторном получении запроса с такими же данными у вас будет открываться новое окошко, в котором вы сможете работать с пойманным запросом. Удобно!

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Rewrite

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Rewrite» src=»https://timeweb.com/media/image9.png» title=»» />

Ставим галочку на «Enable Rewrite», затем в открывшемся окне под левым полем жмем «Add», а дальше жмем «Add» уже под правым верхним полем.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Заполняем все поля (они идентичны тем, что заполняются при создании Breakpoint).

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Затем жмем «Add» уже под правым нижним полем, указываем тип редактирования запроса, заменяемые значения, а также условия замены.

Давайте поймаем запрос и посмотрим на реакцию Charles!

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Charles поймал нужный запрос, а затем заменил все Header одним значением.

Repeat Advanced

Данная функция будет полезна для нагрузочного тестирования. Хоть Charles и не блещет особым потенциалом в данной области, но базовую проверку корректности флуд-контроля вы сможете выполнить.

Ниже подробно показано, как это сделать.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Здесь настраиваем все в соответствии с указаниями на приложенной выше картинке.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Должно открыться новое окно, где отправляются запросы.

Map Local

Последняя функция в сегодняшней статье. Позволяет работать с локальными файлами.

Демонстрация инструмента ниже.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

При повторном получении того же запроса Charles будет перенаправлять его на локальный файл.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Надеюсь, эта статья помогла вам разобраться в основах Charles. Это действительно мощный и довольно простой инструмент для тестирования. Спасибо за внимание!

Источник

Погружение в Charles Proxy

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Привет, Хабр! Меня зовут Настя, я работаю в команде тестирования мобильных приложений компании FunСorp.

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

Если повезло, то кандидат знает о необходимости проверки сетевого взаимодействия, но, за редким исключением, его знания ограничены Rewrite или Breakpoints.

Сегодня я расскажу, с какими задачами сталкиваются тестировщики мобильных приложений в FunСorp и как в этом помогает Charles Proxy.

Случай из жизни

Прежде чем двигаться дальше, сравните два кейса, которые подчеркнут важность проверок на сетевом уровне.

Ситуация 1: тестировщик пропускает баг вёрстки счётчика подписчиков для пользователя, у которого больше миллиона фолловеров. Неприятно, но на ценности продукта для пользователя сильно не скажется.

Ситуация 2: в приложение добавлена настройка получения push-уведомлений. Проверяя их отключение, тестировщик увидел подтверждение и посчитал сценарий пройденным. После релиза посыпались жалобы пользователей на слишком большое количество уведомлений, им приходилось отключать их на уровне ОС или удалять приложение. Для бизнеса такая ситуация критична: метрики искажаются, а пользователи утекают.

Почему так произошло? На бэкенде раскатили неудачный коммит, и на запрос отключения уведомлений возвращалась ошибка сервера. Мобильный клиент не обрабатывал получение кода 500, но тестировщик и пользователь видели попап отписки, хотя она не происходила. Если бы тестировщик обратил внимание на нестандартный код ответа API, то проблему быстро бы обнаружили и решили. Правда, в этот случай ещё вмешался сломанный мониторинг и отсутствие тестов на бэкенд, но всегда помните, что вы можете оказаться единственным тестировщиком на задаче или продукте и перепроверить будет некому.

К чему это всё? К тому, что использование сниффера может избавить вас от таких ошибок.

Что мы используем в FunCorp?

Charles Proxy в FunСorp стал стандартом де-факто. Этот инструмент предоставляет множество возможностей и в то же время прост в использовании, что снижает порог входа. Так тестировщики, разработчики и менеджеры находятся в одном информационном поле.

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

Задача 1. Слушаем, смотрим, анализируем

Подготовка

Если знаете, как установить Charles в связке с мобильным устройством, можете смело пропускать эту часть.

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

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Примечание 1: по дефолту трафик ПК будет также проходить через Charles. Чтобы в сниффере отображался только трафик подключенных устройств, снимаем галку в настройках проксирования.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Примечание 2: мы не включаем расшифровку сетевых соединений на все хосты сразу, т.к. это помешает проверке сценариев интеграции со сторонними сервисами (Twitter, Facebook, и т.д), покупки и прочего — самоподписанный сертификат Charles не вызовет доверия.

Фильтрация информации

Найти интересующую тестировщика информацию можно несколькими способами.

Structure view + Focus Mode

Представление Structure view удобно, если хотим узнать, к каким ручкам выполняется обращение. Список проксируемых ручек отображается слева. Выберем конкретный запрос и в правой части увидим информацию о нём. Во вкладке Overview будет техническая информация по статусу соединения, коду ответа, времени отправки запроса и времени получения ответа и так далее, во вкладке Contents можно выбрать формат и заглянуть в тело запроса или ответа, а также посмотреть заголовки.

Для уменьшения количества хостов в левой части на помощь придёт Focused Mode. Находим нужную ручку, вызываем контекстное меню, выбираем Focus.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Теперь ручки, для которых выбран Focus, будут закреплены в верхней части списка. Остальные сгруппированы в Other Hosts.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

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

Да, стало проще искать информацию о конкретных пакетах. Ещё хотелось бы видеть на одном экране техническую информацию о пакете и тело. Кроме того, в этом представлении не видно, насколько позже или раньше уходит один запрос относительно другого. В этом нам поможет Sequence view.

Sequence view

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

Необходимую техническую информацию о подключении выводим через колонки таблицы. Мне наиболее интересными кажутся: время начала запроса, используемый метод, код ответа, полный путь обращения, длительность соединения (или время получения ответа), размер пакета, IP-адрес отправителя, по которому выполняем сортировку, если к Charles подключено больше одного устройства.

Можно создать кастомную колонку по любому полю заголовков запроса/ответа. Например, рекламные SDK часто передают полезную информацию в заголовках ответа.
Для настройки нажимаем на заголовок таблицы ПКМ и выбираем New Custom Header Column. Указываем название заголовка.

Ставим галочку Focused и видим только те ручки, что ранее выбрали через Structure view.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Ещё одна классная фича — возможность обходиться без галочки Focused и делать фильтрацию с помощью регулярок. Для этого нужно нажать на Settings справа от строки фильтрации и поставить галочку тут:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Теперь, составив, например, такой фильтр, увидим тот же результат, как при использовании галочки Focused.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Анализируем результаты

Ещё раз зафиксируем, на что в общем случае стоит обратить внимание:

В каких случаях стоит насторожиться и бежать к бэкендерам:

Задача 2. Меняем API

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

Итак, у нас есть URL тестовой среды, на которой можно протестировать фичу — https://api-1111.ifunny.mobi, и URL продового API — https://api.ifunny.mobi.
Charles позволяет решить эту задачу следующими способами.

Map Remote

С помощью Map Remote можно без СМС и регистрации выполнить переадресацию запросов с некоторого URL (Map From) на другой (Map To). Подменяем только хост, путь целиком или только параметры (в зависимости от задачи).
Настраиваем Map Remote для решения текущей задачи. Чтобы перейти в настройки Map Remote, выбираем Tools: Map Remote или для macOS (⌘⌥M). Шорткаты ускорят работу в Charles.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси
Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Примечание: Charles автоматически распарсит части URL при копировании и вставке. Вставляем URL в строку Host, нажимаем Tab. Protocol, Port, Path, Query заполнятся сами.

Rewrite

Rewrite — самый мощный механизм Charles. В коллекциях на текущем проекте порядка 30 наборов рерайтов (Rewrite sets) с десятками вложенных правил (Rewrite rules).

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Чтобы добавить первое правило, нажимаем на (4). Появляется скромное окошко, обладающее большими возможностями.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Rewrite — это подмены: в заголовках (header rules), в пути (URL), в параметрах (query parameter rules) и в теле запроса или ответа (body rules).

Помимо подмен можно добавить или удалить новые заголовки, параметры запроса, когда это нужно. Для этого выбираем подходящее для задачи значение из выпадающего списка Тип (Type).

Для правила требуется указать область действия: запросы клиента (Request), ответы сервера (Response) или и те, и другие. Устанавливаем соответствующие чек-боксы.

Рассмотрим алгоритм применения Rewrite. Если указать маркер применения правила через блок Match, выполнится поиск этого значения в пакете, а затем замена на значение из блока Replace. Здесь и в некоторых других местах полезно использовать регулярные выражения, при необходимости — соответствующий чек-бокс. При пустом блоке Match замена применится везде, где можно. Заменится весь хост при типе Host или всё тело пакета при типе Body.
Ещё можно выбрать опцию «Подменить один раз» (Replace First), тогда Rewrite будет применён только по первому совпадению. Заполнение полей может оказаться недоступным для некоторых типов правил.

Для смены API подойдёт Type: Host. Нужное правило выглядит так:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Можно не прописывать Match, потому что указан Location, к другим хостам правило не применится, но Value пришлось бы указать целиком.

Задача 3. Проверяем нестандартные коды ответа

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

Прежде чем приступить к проверке, уточняем детали со стороны продукта и разработки:

Block Lists, Allow Lists

Block List позволяет добавить URL, запросы к которым будут заблокированы путем разрыва соединения или возврата 403 кода ответа. Включаем так:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Allow list работает по обратной логике: указываем те URL, обращения к которым разрешены. Остальные соединения сбрасываются или возвращается 403 ошибка.

Задача 4. Безопасный способ подменить тело

Представьте, вы нашли баг: приложение падает при получении рекламного креатива. Сниффер включён, сессия сохранена.

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

Map Local

Для подмены ответа сервера целиком можно использовать Map Local (⌘⌥L). Это удобный инструмент, который позволяет заменить удалённый файл на тот, что хранится локально на машине. Указываем ручки, ответы к которым надо подменить, и выбираем файлы у себя в системе, предварительно сохранив их в нужном расширении/формате (json, xml и т.п., поддерживаются медиа и другие менее популярные форматы). В контексте представленного кейса нам надо откопать приводящий к проблеме креатив из сохранённой сессии, положить себе в папку и включить на него Map Local.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Здесь можно также воспользоваться Rewrite. Выбираем Type: Body, поле Match остаётся незаполненным, если заменяем тело целиком. Вставляем простыню с телом ответа в поле Value блока Replace, применяем.

Заменить определённую часть запроса/ответа через Rewrite также не представляет сложности.
Это полезно, когда мы хотим получить на клиенте какие-то значения, которые трудно сгенерировать на тестовой или продакшен-среде. Для этого в поле Match указываем, какую пару «ключ-значение» ответа API мы ищем, а в Replace — на какую пару подменяем.

Задача 5. Таймауты и троттлинг.

Плох тот тестировщик, который тестирует свое приложение только в условиях мощного офисного WiFi, находясь в одной сети с серверами. Как можно выяснить, что потери и задержки не нарушают usability для пользователя, или обнаружить, что при получении таймаута приложение не может восстановиться?

Настройки троттлинга (⇧⌘T) в Charles выглядят так :

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Подбираем те, которые превратят любимое приложение в тыкву, а для тестирования таймаутов используем Breakpoints (⇧⌘K).
Примечание: Пользуйтесь возможностью включить троттлинг только на определённых хостах.

Брейкпоинты в Charles — это очень крутая штука. Информация о них будет в первых результатах поисковой выдачи по запросу «как подменить ХХХ в Charles». Их действительно можно использовать вместе или вместо Rewrite, но для подмен они не очень подходят.

Breakpoints работают так же, как бряки в коде. Получили совпадение по запросу или ответу — остановили выполнение, можем внести изменения в любую часть пакета. При этом подмена применится только на один пакет — нет повторяемости. Можно выйти за таймаут, пока выполняешь изменения. Другие способы подмены лишены этих ограничений.

Из неочевидного

Оптимизируем Rewrite

Что ещё здесь интересного? Активных правил в наборе может быть несколько, они применяются последовательно, сверху вниз. Значит, одно и то же место может изменяться несколько раз подряд.
Если есть какая-то структура, которая должна принимать несколько вариантов значений в зависимости от необходимости, то можно сделать следующее:

Например, приложение использует некоторое количество ID для получения рекламы. Мы хотим их все подменять то на один тестовый ID, то на другой. Здесь сначала все ID будут заменены на your_var, а your_var будет следом заменено в зависимости от простановки чек-боксов.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Если включить оба чек-бокса из примера одновременно, то вторая подмена уже не применится.

Примечание 1: никто нас не ограничивает в сложности используемых подмен, регулярных выражений, но некоторые нюансы типа того, что выше, могут затруднять отладку или привести к ненужному срабатыванию правил.

Примечание 2: «Я всё делаю правильно, но Rewrite не работает».

Проверяем, что Rewrite был применён к выбранному пакету, информация об этом в явном виде есть во вкладке Overview и Notes:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Включаем логи в Charles в окне Rewrite:

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Убедимся, что другие наборы Rewrite не переписывают поверх наше правило. Отмеченные чек-боксами наборы также применяются друг за другом, сверху вниз, как и правила внутри набора.

Убедимся, что все чек-боксы на своих местах.

Убедимся, что не произошло ошибки при копировании-вставке. Известный баг Charles на macOS: при копировании в буфер обмена при раскладке клавиатуры, отличной от английской, данные в буфере задваиваются и вставляется два значения вместо одного.

Auto save

Один из недостатков Charles — утечки памяти, возникающие при продолжительной записи сессии. Чтобы избежать утечек, необходимо регулярно очищать активную сессию. Из-за этого возникают ситуации, когда вы случайно очистили нужную сессию. Чтобы защититься, автоматизируем сохранение сессий.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

Mirror

Еще одна не самая очевидно полезная функция — Mirror (⌘⌥I). Эта фича позволяет автоматически сохранять все ответы, возвращаемые в Charles. Они раскладываются локально в такой же иерархии, как на сервере. Если внезапно случился даунтайм на бэкенде, отвалилась тестовая среда и так далее, у вас есть готовые моки для Map Local.

Что такое чарльз прокси. Смотреть фото Что такое чарльз прокси. Смотреть картинку Что такое чарльз прокси. Картинка про Что такое чарльз прокси. Фото Что такое чарльз прокси

На этом всё. Я постаралась раскрыть возможности Charles Proxy для тестировщиков мобильных (и не только) приложений в разрезе тех задач, которые мы решаем в FunСorp. Если какие-то функции, которые вы используете, остались за бортом, пожалуйста, напишите об этом в комментариях.

И помните: хороший тестировщик клиент-серверных приложений всегда прикладывает к багу сессию из любимого сниффера.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *