Привет, меня зовут Света и я тимлид Mobile QA в Emerging Travel Group. В этой статье я простым языком расскажу про один из самых полезных и простых в использовании инструментов тестирования мобильных приложений — мистер Charles Proxy, и покажу на примерах некоторые самые полезные его функции.
Для начала разберёмся, кто вообще такой этот Charles.
Charles Proxy — это сниффер (sniffer – перехватчик) трафика, инструмент для анализа трафика, который позволяет отслеживать, записывать и анализировать сетевые запросы между устройствами и интернетом.
Charles — не единственный инструмент для анализа трафика, у него есть аналоги, например: WhireShark, Fiddler, Proхyman, mitmproxy. Все они в той или иной степени про одно, различие лишь в интерфейсе, поддержке разных платформ, и наборе функционала.
Установка и первичные настройки
Я распишу процесс для MacOS, однако для Windows он практически идентичен :) Для использования Charles Proxy сначала нужно выполнить следующие шаги:
Скачать и установить
Дать Charles установить нужные настройки сети
Настроить устройства и установить на них Charles SSL сертификат
Сначала скачайте Charles Proxy для MacOS.
После загрузки Charles установите его, открыв dmg и перетащив приложение в папку "Приложения".
Charles Proxy не бесплатен, но предоставляет 30-дневный trial из-за которого Charles будет работать только 30 минут и после этого его нужно перезагружать. Чтобы работа Charles стала полноценной нужно купить его лицензию. Лицензия бессрочная и распространяется на неограниченное количество устройств.
Настройка сети
Запустите Charles, при первом запуске появится попап о запросе разрешения на изменение сетевых настроек. Если он не появился, то нажмите Shift-Command-P и увидите следующее окно:
Нажмите “Grant Priveleges” и введите пароль от своего пользователя, если его запросят. После этого Charles начнёт показывать сетевые запросы, которые отправляет ваш Mac
Настройка реального устройства для работы с Charles Proxy
Для отслеживания трафика с реального устройства через Charles Proxy ваш Mac и устройство должны находиться в одной сети. При проксировании трафика от устройства в Charles Proxy необходимо установить Charles Root SSL Certificate для того чтобы можно было анализировать трафик. Для этого открываем Charles и в меню выбираем Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser
Теперь на устройстве открываем настройки WiFi -> Настройки выбранной сети -> Proxy Settings и вводим IP адрес и порт из окна чарльза:
И нажимаем “Save”.
Теперь нужно зайти в браузер и перейти на https://chls.pro/ssl и установить сертификат:
Нажимаем “Allow” и после этого видим попап о установленном configuration profile:
Теперь заходим в системное приложение Settings и там General -> Profile и нажимаем Charles Proxy CA.
Нажимаем “Install”, в появившемся окне ещё раз “Install” и после того как сертификат будет успешно установлен на экране должно быть примерно следующее:
И последнее! Теперь нужно зайти в приложение Settings, там в General -> About -> Certificate Trust Settings.
И здесь нужно включить свитчер Charles Proxy CA. На всплывающем окне нужно нажать “Continue”. Ура! Теперь установка сертификата завершена. Не волнуйтесь, эту настройку нужно делать только 1 раз на одном устройстве.
Краткий обзор интерфейса
Интерфейс Charles логичен и прост.
После того как мы настроили сертификат на устройстве, и включили запись запросов в Чарльзе, мы будем видеть абсолютно все запросы, которые отправляет приложение в сеть. Либо последовательно, либо структурно.
Как вы видите на скриншоте, слева у нас отображается список запросов, справа — информация о выбранном нами запросе. Остановить запись отправляемых запросов, чтобы не засорять список и не запутаться, можно нажав на красный кружочек 🙂
Далее, видим, что в верхней части экрана будет информация о request-части запросов, а в нижней — response-части.
Для примера я пока взяла рандомный запрос, далее рассмотрим подробнее на одном из приложений, с которыми я работаю.
При нажатии на один из запросов мы можем увидеть некоторые детали запроса, например, заголовки, тело и другое. Мы также можем увидеть ответ на данный запрос.
Однако, есть один нюанс: если запрос выполняется через HTTPS, мы не увидим никаких подробностей в этих запросах, по крайней мере пока не включим SSL-проксирование для определенного хоста или всех запросов, выполняемых приложением. После включения можно будет проверять содержимое этих запросов.
Как включить ssl-проксирование для интересного нам хоста?
Сharles > Proxy > SSL Proxying Settings…
Выбираем вкладку SSL Proxying, нажимаем на Add.
Вставляем интересующий нас хост (обратите внимание, только хост, без https и query-параметров), в моём случае это один из хостов приложения Dice и порт 443.
Теперь, когда я запущу на своём устройстве приложение Dice, я буду видеть все внутренности запросов с этого хоста 🙂
Теперь давайте перейдём непосредственно к нескольким функциям, которые сильно облегчают жизнь в разработке и тестировании.
Волшебные функции
1. Breakpoint
Breakpoint — дает возможность приостановить выполнение запроса или ответа на определенном этапе и проанализировать содержимое для того, чтобы можно было внести необходимые изменения и проверить как приложение или сервер отреагируют на внесённые нами изменения. Звучит, вероятно, слегка сложно, но на примере всё будет сильно понятнее.
Breakpoint можно использовать, чтобы изменить URL запроса на сервер, заменить один заголовок на другой, изменить содержимое тела запроса или ответа или добавить новый параметр в URL запроса.
Функция Breakpoint позволяет остановить выполнение на следующих этапах запроса или ответа:
Запрос перед отправкой на сервер
Ответ после получения от сервера
Загрузка ресурсов (например, изображений или стилей)
Рассмотрим на простом примере одного из приложений, с которыми я работаю:
Пользователь забронировал себе трансфер. У нас есть экран подтверждения его бронирования, с данными, которые он указал. Что мы можем сделать с помощью брейкпоинта? Поменять практически любые данные, которые приходят в запросе для этого экрана, и посмотреть, как новые данные будут выглядеть. Для примера, давайте поменяем имя пользователя, который трансфер.
Вот такой экран мы имеем на старте (все данные вымышленные):
Для начала, нам нужно понять, в каком запросе хранится информация об имени.
Нашли:
Теперь правой кнопкой мыши нажимаем на нужный нам запрос и в выпадающем меню выбираем Breakpoints.
Видим, что наш брейкпоинт добавлен, функция “отлова” сейчас включена, и при следующей отправке этого запроса он “перехватится”.
Так как нужная нам информация хранится именно в Response-части запроса, менять мы будем именно её. Request-часть не трогаем.
Итак, запускаем приложение ещё раз, и доходим до нужного нам запроса.
Когда приложение отправит запрос, на который мы поставили брейкпоинт, Чарльз уведомит нас об этом:
Сначала Чарльз всегда предлагает изменить Request-часть, но в ней нам не нужно ничего менять, поэтому нажимаем Execute, и дальше Чарльз предложит изменить Response-часть, как раз то что нам нужно. Вот там-то мы нажимаем “Edit response” и доходим до того самого места, где лежит имя нашего пользователя, и меняем его.
Поменяли, и теперь нажимаем Execute.
Важно! Время, на которое запрос перехватывается, ограничено, и нам нужно успеть поменять всё, что мы хотим поменять, примерно за 30 секунд (точное время зависит от того, какой таймаут поставили разработчики для отработки этого запроса), иначе запрос просто отработает без изменений.
Что мы видим на экране приложения теперь?
Ивана с уже новой фамилией 🙂
Таким образом можно менять любую информацию в теле и ответе запроса, можно менять значения хэдеров, можно менять коды ответов, например, если мы хотим посмотреть, как будет выглядеть ошибка в приложении, мы можем поменять код ответа с 200 на 500.
2. Rewrite
Функция Rewrite по смыслу похожа на Breakpoint за исключением того, что Rewrite позволяет изменять и перезаписывать запросы и ответы перед их отправкой и получением соответственно, а не ВО ВРЕМЯ, как Breakpoint.
Давайте снова рассмотрим на примере нашего путешественника, заказавшего себе трансфер. Мы снова хотим поменять ему имя, но только теперь не во время запроса, а заранее.
В меню Charles переходим в Tools > Rewrite > Add
Добавляем новый сет, задаём ему название, и теперь нужно прописать, где, что и на что мы хотим поменять.
В верхней части прописываем путь до нужного нам места, значение которого нам нужно изменить, в нижней части указываем что и на что меняем. Остановимся подробнее на втором:
В типе выбираем “Body”, так как нужный нам параметр лежит именно в теле ответа. Далее Response, потому что в теле ответа. И далее мы знаем, что на самом деле пользователя зовут Ivan Sidorov, а мы хотим назвать его по-другому. ОК.
Запускаем наше приложение, доходим до нужного экрана, и что мы видим:
Готово!
И так теперь будет каждый раз, когда мы будем открывать этот экран, пока мы не отключим функцию Rewrite. И не надо каждый раз руками менять это, как в Breakpoints.
Кстати, в одном сете Rewrite менять можно не только одно значение, а сразу несколько. Достаточно в настройках сета нажать на кнопку Add, и добавить другие условия.
Rewrite также можно использовать для перенаправления трафика, достаточно вместо Body, там где мы выбрали Body, выбрать Host и настроить параметры под него.
Этот метод не лучше и не хуже. Breakpoint хорош, если нам нужно проверить несколько разных значений подряд. Rewrite хорош, если мы заранее знаем, на какое значение нам нужно подменить тот или иной параметр, и знаем, что он нам понадобится несколько раз, чтобы каждый раз не вбивать его руками в условиях ограниченного времени.
3. Map remote
Наконец, последняя в моём сегодняшнем списке, но не последний по важности, функция Map remote.
Map Remote позволяет перенаправить трафик с одного хоста на другой по настраиваемым правилам.
Вот житейский пример:
Приложение ходит за данными по адресу https://backend.service.com.
Команда бекенд-разработчиков делали задачу на фикс какого-нибудь бага, сделали ветку с изменениями этого бэкенда и хотят протестировать его до слива этой ветки в мастер, на всех. Адрес отдельного домена https://new-backend.service.com
Нам нужно протестировать как приложение будет работать с бэкендом с новыми изменениями от разработчиков.
В такой ситуации можно прийти к разработчикам приложения и попросить чтобы они сделали специальную версию приложения, которое будет ходить в новый бэкенд, но для этого нужно отвлекать разработчиков, ждать пока они это сделают.
С помощью Map Remote можно перенаправить трафик приложения без внесения изменений в код.
Итак, идём в Charles > Tools > Map Remote > Enable Map Remote > Add
Готово :)
Теперь, когда мы запустим наше приложение и посмотрим в список запросов, мы увидим, что запросы идут не в обычный хост, а в тот, на который мы сделали перенаправление. И всё, что мы видим в приложении теперь, происходит с учётом тех изменений, которые сделали господа бекендеры в своей ветке-хосте.
Подытожим
В этой статье мы рассмотрели три, на мой взгляд, основные и самые ходовые функции Charles Proxy. Конечно, это только малая часть того, что может этот славный товарищ.
Ещё раз подчеркну, что Charles является незаменимым помощником для разработчиков и тестировщиков как мобильных, так и вэб-приложений.
Это мощный и гибкий инструмент, который может значительно упростить процесс тестирования мобильных приложений и помочь выявлять ошибки и уязвимости в приложении. Использование Charles Proxy может сократить время, затраченное на тестирование, и улучшить качество мобильного приложения в целом.
Подробнее с функционалом можно ознакомиться на официальном сайте (у них, к слову, довольно понятная и подробная документация, если вы владеете английским).
Ну а я желаю вам успешного тестирования, наслаждайтесь этими и узнавайте другие функции этого замечательного инструмента 🙂
