Всем привет, меня зовут Роман, я тестировщик в компании СберМегаМаркет. 

Итак, по первой ссылке в гугле на запрос «Charles что такое», можно найти примерно следующее: Charles – один из самых распространенных инструментов для сниффинга трафика. В свою очередь, сниффинг трафика – это перехват и анализ сетевого трафика.

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

Особенно обширно Charles применяется в мобильном тестировании, ввиду того, что это один из самых простых и удобных способов посмотреть, уходят ли запросы с мобильного клиента, с какими параметрами они отправляются и как отвечает backend. Дальше в статье расскажу о Charles для начинающего QA.

Подключение Android-девайса к Charles 

Для начала необходимо подружить телефон, с которого мы будем сниффить трафик, и Charles.

1. Скачиваем программу с официального сайта Charles.

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

2. После успешной установки открываем программу и попадаем в главное окно.

3. Сверху жмем Help ~> SSL Proxying ~> Install Charles Root Certificate.

Таким образом мы установим корневой сертификат в систему, чтобы Charles мог работать с https-запросами.

4. После установки в списке сертификатов видим сертификат Charles.

5. Открываем свойства сертификата.

6. В открывшемся окне, в пункте «Доверие», проверяем, что везде указан параметр «Всегда доверять».

7. После этого можно закрыть все окна, связанные с сертификатами. Далее идем в Help ~> SSL Proxying ~> Install Root Certificate on a Mobile Device or Remote Browser.

Должно открыться окно с ip и портом, по которому можно достучаться до Charles.

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

8. Берем в руки девайс и переходим в настройки Wi-Fi сети.

Чтобы все получилось, необходимо, чтобы компьютер и телефон были подключены к одному Wi-Fi, а vpn был выключен как на телефоне, так и на компьютере. Иначе есть вероятность того, что Charles не сможет обнаружить телефон.

9. В настройках Wi-Fi на телефоне заходим в настройки сети (на телефонах марки Samsung – шестеренка рядом с названием сети Wi-Fi, на телефонах марки Huawei необходимо нажать и удерживать палец на наименовании Wi-FI сети и выбрать «Изменить сеть»).

Далее в пункте «Прокси» выбираем параметр «Вручную».

В поле «Имя узла прокси» вводим ip: например, 192.168.1.64:

В поле «Порт прокси» указываем порт: например, 8888:

Должно получиться следующее:

После того, как сохранили настройки сети, в окне Charles должно появиться уведомление с просьбой разрешить или отклонить доступ к девайсу. Жмем «Разрешить»/«Allow».

10. Вводим в браузере телефона следующий URL: http://chls.pro/ssl или charlesproxy.com/getssl

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

Если браузер не показал, что начал скачивать файл, попробуйте открыть пункт «Загрузки»: некоторые браузеры осуществляют загрузку в фоновом режиме. Если же сертификат не загружается, значит, один из пунктов выше выполнен неправильно или не до конца.

11. После скачивания сертификата открываем настройки – на Samsung в поиске пишем «Установить из памяти» – Сертификат Wi-Fi – выбрать папку Download – Выбрать сертификат Charles и установить его. Для Huawei и других устройств можно просто нажать на сертификат и установить его, выбрав пункт «Установка для Wi-Fi».

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

Если есть проблема с тем, что некоторые запросы не отображаются, необходимо сделать следующее: Proxy ~> SSL Proxying Settings ~> Во вкладке SSL Proxying и графе Include нажать Add ~> В поле Host и Port указать «*» и нажать «Ок».

Эта настройка принудительно включает проксирование трафика с любого хоста и порта.

Подключение iOS-девайса к Charles

Для подключения iOS-девайса к Charles необходимо проделать те же шаги, что и для Android-девайса, однако, в пункте 13 необходимо сделать доверенным установленный сертификат. Для этого необходимо перейти в Настройки – Основные – Об этом устройстве – Пролистать в самый низ экрана – Доверие сертификатам – Включить доверие для сертификата Charles.

Как и для чего мы в СберМегаМаркете используем Charles: на примере тестирования Android-приложения

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

Во-вторых, одна из самых полезных и незаменимых фич в Charles – это подмена ответа с backend. Это можно сделать с помощью нескольких инструментов, одним из которых являются Breakpoints. Их мы используем чаще всего.

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

Во время авторизации используем ручку merchant/search, в ответе которой приходит атрибут startFlow типа string, который свидетельствует о том, должна ли отображаться заглушка и какие вкладки для заказов необходимо отображать.

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

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

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

В-третьих, атрибут, который приходит в ответе ручки, не хранится в БД, а формируется на бэке по отдельной логике.

Итак, как я уже писал выше, основной инструмент, который понадобится для подмены ответа – это Breakpoints (Точки останова). Если вкратце, Breakpoints срабатывают в тот момент, когда Charles «ловит» запрос к методу, для которого указана точка останова. Запрос не отправится до того момента, пока пользователь руками не отправит его. Сделано это для того, чтобы можно было отредактировать параметры запроса или итоговый ответ.

Итак, указываем в прокси телефона ip и порт Charles и открываем приложение. Логинимся в аккаунт, который работает по поддерживаемой нами схеме.

Открываем Charles и видим запросы, которые проходили за время логина в приложение.

Для того, чтобы отобразилась заглушка, необходимо в ручке merchant/search в поле startFlow прислать значение «true».

Для того, чтобы подменить это поле, необходимо поставить Breakpoint на нужный метод. Для этого в списке запросов находим нужный ~> открываем настройки ~> выбираем пункт Breakpoints.

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

В открывшемся окне нам доступно редактирование тела запроса, если перейти на вкладку «Edit request». В нашем случае менять тело запроса не нужно, поэтому просто отправляем запрос. После этого снова откроется окно в Charles, где уже можно редактировать ответ, который пришел от api. Для редактирования ответа необходимо перейти на вкладку «Edit response» и выбрать удобный формат отображения содержимого ответа.

Из условия мы помним, что для отображения заглушки значение в поле startFlow должны быть stub. Меняем «CD» на «stub» и жмем «execute».

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

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

Возможности Charles гораздо обширнее, чем может показаться на первый взгляд. При желании можно создать несколько файлов с заранее сохраненными ответами от api, настроить Map Local (подмен ответа с бэкенда на ответ, сохраненный в локальном файле) и тестить огромные части фронта без фактического взаимодействия с реальным бэкэндом. Без прохождения процессов по созданию необходимых тестовых данных и соответственно без ощутимых временных затрат. Однако, об этом я хочу поговорить в следующей статье.