Charles программа

[ИНСТРУКЦИЯ] Учимся правильно пользоваться Charles

Charles — инструкция пользователя и FAQ…
Часто особенно у новичков возникают вопросы по использованию программы Charles (Чарльз), потому я все же решил выложить описание работы с программой и ответы на часто задаваемые вопросы по использованию Charles. Так как программа на английском языке, а с инглишем у жителей стран бывшего СССР не сложилось, то кое-что пришлось перевести…
Итак, читаем вникаем и запоминаем…
Charles Web Debugging proxy — это HTTP proxy/HTTP монитор/Reverse Proxy позволяющий пользователю наблюдать за всем HTTP траффиком между его компьютером и сетью Интернет. Это включает в себя запросы (requests), ответы (responses) и HTTP заголовки (содержащие cookies и кэш информацию). Charles отображает весь трафик в виде папок с названием серверов. Внутри каждой папки содержатся запросы, которые отображают происходящие события, связанные с данным сервером. ПЛАГИН
Если Mozilla Firefox не ловит запросы:
Необходимо установить специальный плагин для браузера, чтобы Charles смог контролировать запросы.
Если Google Chrome не ловит запросы:
JAVA
Работа с программой:
— Для того, чтобы Charles начал или остановил запись траффика, необходимо нажать на кнопку «Start/Stop Recording» находящуюся на панели инструментов программы (белый круг с точкой).
-Если по каким то причинам Charles не отображает связь с нужным вам сервером, то есть не отображается папка с гетевеями, проверьте, не добавили ли вы данный сервер в игнор. Для этого необходимо зайти в меню Proxy->Recording->Settings и там проверить, не присутствует ли нужный вам сервер в графе Ignore Hosts. Если он там есть, удалите его кнопкой Remove. (а простая переустановка программы ничего не изменит и сервер по прежнему будет игнорироваться)
-Для того чтобы отредактировать конкретный запрос в Charles, вам необходимо кликнуть правой кнопкой по строчке, например по gateway.php и выбрать там Edit. После внесения нужных изменений, необходимо нажать внизу кнопку Execute, и запрос будет отправлен на сервер.
-Если Вам нужно заставить Charles перехватывать запросы с нужного сервера, вам необходимо нажать правой кнопкой по папке сервера в списке и выбрать в контекстном меню Breakpoints(БРЯКИ). Далее необходимо в панели инструментов Charles нажать на красный шестиугольник с надписью Enable/Disable Breakpoints. После этого программа будет остановливать каждый входящий и исходящий запрос связанный с данным сервером. Вы можете редактировать запросы или отправлять сразу кнопокй Execute. Исходящие запросы, от вас к серверу, будут появляться в Charles с красными стрелками вверх. Входящие запросы, ответы сервера, появляются со стрелкой вниз.
Функционал, или разбираемся с кучей красивых кнопочек в Charles…
Кнопки:
Создание новой сессии —
Открыть сессию (например сохраненную ранее) —
Закрыть выбранную сессию —
Сохранить сессию —
Очистить сессию —
Найти текст/цифры в выбранной сессии —
Кнопка записи —
Кнопка регулирования (как правило, редко используется) —
Кнопка Включения/Выключения Перехвата данных —
Кнопка повтора. Повторяет выбраное(ые) процесс —
Кнопка редактирования. Редактирует выбранный процесс —
Кнопка утверждения выделенного процесса(практически не используется) —
Кнопка задействования других кнопок на этой же панели —
Настройки программы —
Последний пункт с корзиной — совершенно не нужен, если Вы крякните программу)…
Виды пакетов:
Полезные для нас:
Ненужные пакеты (мусорные)
Виды запросов Charles:
Исходящий Запрос (Со стрелочкой вверх):
Входящий запрос (Со стрелочкой вниз):
Установка Charles:
Установка Charles принципиально не чем не отличается от других программ, появится окно, в котором необходимо нажать Next:
Далее необходимо выбрать компоненты для установки, список их не богат, потому оставляем все, по умолчанию и жмем Next:
Переходим в следующее окно диалогового установщика, где нам предлагаю выбрать путь, куда инсталлировать (устанавливать) программу и ее компоненты, по умолчанию эта папка Program Files, я в нее и установил, нажав Install:
В завершении процесса установки, появляется окно, которое говорит нам, все замечательно, все правильно установилось и какие мы большие молодцы, что справились, с столь тяжелейшим процессом, жмем Finish, на этом установка завершена:
Плагин Charles для FireFox, перейдя по ссылке, появится окно, которое нам сообщит, что FireFox заблокировал запрос на установку программного обеспечения на компьютер с этого сайта (www.charlesproxy.com) (установочные окна могут отличаться в зависимости от версии браузера FireFox, я привожу пример на базе 4-той версии)… Вам необходимо нажать «Разрешить»:
После этого появится окно загрузки:
Далее появится окно с сообщением о «Установке программного обеспечения», жмете -> «Установить сейчас»:
Появится сообщение о том, что Charles Autoconfiguration будет установлен после перезапуска вами Firefox, нажмете «Перезапустить сейчас»:
После перезагрузки Firefox, можно преступать к работе с программой… Но перед этим необходимо, по-крайней мере я бы рекомендовал, сходить на сайт java.com, скачать оттуда и проинсталлировать последнюю версию виртуальной машины…
Активация Charles:
Если программа была скачана с нашего сайта, то необходимо делать следующее, для версии 3.5.2… Идем в папку iNViSiBLE и запускаем patcher.bat (убедитесь, что у Вас установлена JAVA, скачать можно последнюю версию на java.com), после запуска, нам надо будет ввести путь с Jar File программы Charles, стандартно это путь: C:\Program Files\Charles\lib, выбираем файл charles.jar и жмем Open, затем, .patch
Если программа будет успешно пропатчена, выдаст сообщение: «Your applicarion has successfully beeb patched», жмем OK, закрываем…
Для того, чтобы зарегистрировать Charles, необходимо запустить программу, зайти в программе во вкладку информация, регистрация и ввести регистрационные данные (см.ниже):
Registered name: iNViSiBLE TEAM License key: 1337
Все после этого Ваша программа полностью работоспособна и не имеет никаких ограничений.
Прикручиваем Charles к другим браузерам:
Настройка Charles на Opera (писал уже в статье, но повторюсь):
1. Заходим в Инструменты —-> Настройки.
2. Переходим во вкладку «Дополнительно».
3. Выбираем пункт «Сеть».
4. Жмем кнопку «прокси Серверы…».
5. Ставим галочку напротив пункта «HTTP».
6. Вводим такие данные: IP: 127.0.0.1 Порт: 8888
После окончания работы в программе Charles, необходимо отключить прокси в опере, иначе просто не будут грузится страницы.
Настройка Charles на Internet Explorer (не думаю, что кто-то еще пользуется этим го…ном, но все же):
1. Заходим в Сервис —-> Свойства Обозревателя
2. Переходим во вкладку «Подключения».
3. Жмем кнопку «Настройка сети».
4. Ставим на галочку (Если она у вас не поставлена) «Использовать Прокси-Сервер для локальных подключений»
5. В первой строке там где написано «HTTP»
6. Вводим такие данные: Адрес: 127.0.0.1 Порт: 8888
Администрация форума не имеет отношения к пользователям форума и к публикуемой ими информации. Пользовательское соглашение

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


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

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

Charles — инструмент для мониторинга HTTP/HTTPS трафика. Программа работает как прокси-сервер между мобильным приложением (в нашем случае) и сервером этого приложения. Charles записывает и сохраняет все запросы, которые проходят через подключенный к нему телефон и позволяет их редактировать.
Инструкция по установке Charles на Mac OS X и подключение телефона.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’ов):
{ «data»: { «id»: 946584, «login»: «yaryabu», «time_registered»: «2015-02-27T15:22:52+03:00», «score»: 6, «fullname»: null, «sex»: 0, «rating»: 0, «rating_position»: 0, «geo»: { «country»: null, «region»: null, «city»: null }, «counters»: { «posts»: 1, «comments»: 3, «followed»: 0, «followers»: 0 }, «badges»: , «avatar»: «http:\/\/habrahabr.ru\/i\/avatars\/stub-user-middle.gif», «is_readonly»: false }, «server_time»: «2015-10-16T20:38:02+03:00» }
В логе есть поле score:
«score»: 6 По всей видимости, как раз то, что мне нужно.

Rewrite settings

Для подмены серверных данных открываем Tools > Rewrite.
В списке слева отображаются сеты из запросов, которые можно составлять на свой вкус. После создания сета идет выставление location. Здесь мы прописываем URL запроса с query параметрами (по желанию).
Следующий шаг — создать правило подмены. К сожалению, Charles не умеет подменять информацию по ключу. Нужно вручную прописывать ключ и значение, а затем писать то, что мы ходим увидеть.
Окно создания правила будет выглядеть следующим образом:

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

Следующий ответ по запросу информации о себе будет иметь отредактированные данные, score = 5000:
{ «data»: { «id»: 946584, «login»: «yaryabu», «time_registered»: «2015-02-27T15:22:52+03:00», «score»: 5000, «fullname»: null, «sex»: 0, «rating»: 0, «rating_position»: 0, «geo»: { «country»: null, «region»: null, «city»: null }, «counters»: { «posts»: 1, «comments»: 3, «followed»: 0, «followers»: 0 }, «badges»: , «avatar»: «http:\/\/habrahabr.ru\/i\/avatars\/stub-user-middle.gif», «is_readonly»: false }, «server_time»: «2015-10-16T20:58:05+03:00» }
При следующем переходе на экран профиля в приложении Хабра мы увидим плод своих трудов.

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

Breakpoints

При подмене запросов с помощью Rewrite settings в Charles невозможно редактировать кириллицу. При изменении любой информации на кириллицу ваши логи будут состоять из множества вопросительных знаков.
К счастью, этот недостаток можно обойти с помощью другой функции Charles — breakpoints. Идея похожая, но только ответы останавливаются прямо перед передачей в МП, и их можно редактировать своими руками в реальном времени.
Открываем Breakpoints settings и прописываем URL запроса.
При следующем ответе по этому запросу Charles перехватит всю выдачу и позволит нам с ней работать. Следует держать в голове, что МП может выкинуть ошибку по тайм-ауту, и текущий запрос уйдет в никуда.
Заменим мой логин на что-нибудь, написанное на кириллице.
Вот и все. Приложение отображает нужную нам информацию и проблем с кириллицей не возникает.

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

Лицензионная версия Charles обойдется в $50 на человека. Charles разрешает пользоваться собой бесплатно, но с ограничениями. Функционал инструмента не блокируется, но во время использования триальной версии иногда будут появляться окна с просьбой подождать 5-10 секунд перед возобновлением работы и еще раз подумать о том, как клево было бы купить лицензию. Также каждые 30 минут программа будет автоматически завершаться и вся история запросов будет утрачена.

Итоги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подготовка

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

  1. Устанавливаем и запускаем Charles Proxy.
  2. Для расшифровки SSL-соединений потребуется установка сертификата. Переходим по ссылке chls.pro/ssl на тестовом устройстве.
  3. Для iOS необходимо дополнительно подтвердить доверие сертификату в настройках: General -> About -> Trust Certificates. Для Android 7.0 и выше в код приложения должен быть добавлен network_security_config. Подробно описывается .
  4. Настраиваем проксирование через Charles:
    • если ПК c Charles и тестовое устройство принадлежат одной Wi-Fi сети, переходим в настройки Wi-Fi тестового девайса, прописываем настройки прокси-сервера: IP-адрес устройства, на котором запущен Charles, в поле Server (Hostname), порт 8888;
    • если ПК с Charles подключен к проводной сети, но с него можно раздать Wi-Fi, то делаем это;
    • если ПК с Charles подключен к проводной сети и раздать интернет с него нельзя, нам понадобится дополнительное устройство, способное раздавать беспроводной интернет (роутер), на нём настраиваем Port Forwarding на адрес нашего ПК. Ищем «проброс портов <модель роутера>».
  5. После того как мы связали тестовое устройство и ПК со сниффером, в Charles появится запрос на разрешение подключиться мобильному устройству.
  6. Включаем SSL Proxying Settings на нужных хостах.

Результат шага: мы запустили 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.

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

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

  1. При выполнении действия на клиенте с него уходит запрос по нужному URL.
  2. Время между действием и отправкой запроса.
  3. Соответствует ли метод запроса ожидаемому.
  4. В каком формате переданы данные серверу, не пусты ли значения.
  5. Не дублируется ли запрос.
  6. Вернулся ли ответ сервера за допустимое время, соответствуют ли код и тело ответа ожиданиям.
  7. Блокирующий ли запрос (важно для запросов на старте приложения).
  8. Отобразились ли полученные данные на клиенте (если применимо) за допустимое время.

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

  • запрос не завершается;
  • возвращается неожиданный код ответа бэкенда;
  • в ответе бэкенда возвращается 200 ОК, но в теле содержится ошибка;
  • возвращается ошибочный код ответа от бэкенда (например, 500), но в теле ошибка отсутствует;
  • мы не понимаем, что происходит.

Задача 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).

Для создания Rewrite нужно перейти в Tools -> Rewrite (или для macOS нажать — ⌘⌥R). Для добавления Rewrite set жмём на (1), ему можно задать название в поле (2). Rewrite sets могут быть ограничены набором хостов, на которых применяются правила. Если область действия правил (Location) не задать, то они будут применяться ко всем хостам. Для задания Location жмём на (3).

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

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

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

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

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

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

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

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

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

  • какие коды ошибок возвращает бэкенд;
  • какая обработка ожидается при ошибке сервера: 500, 503;
  • какая обработка ожидается при ошибках клиента: 403, 404;
  • требуется ли повторить отправку запроса при получении ответа с ошибкой;
  • должны ли уходить следующие запросы, пока не получен успешный ответ.

Варианты решения:

  1. Сделать редирект на URL, который отдаст нужную нам ошибку, но надо иметь список соответствующих URL.
  2. Универсальный способ решения этой задачи — через Rewrite с типом Response Status.
    Создаём правило. Указываем в Replace нужный код ответа:
  3. Для возвращения ошибок типа 403 можно использовать механизмы Block list (для macOS — ⌘⌥B), Allow list (для macOS — ⌘⌥W).

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

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

  1. Берём структуру, которую хотим подменить.
  2. Выносим её в переменную.
  3. Создаём набор правил по замене этой переменной на нужные тестовые структуры.

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

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

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

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

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

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

    Window -> Error Log может содержать полезную информацию. Например, как ниже: проверяю правило, найден матч, выполнен Rewrite.

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

  • Проверяем Location.

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

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

Auto save

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

Перейдём в Tools -> Auto Save (⌘⌥A), выберем интервал сохранения сессий и путь для сохранения chls-файлов. Теперь через каждую минуту сессия будет сохраняться локально, а затем очищаться в Charles без дополнительных действий с вашей стороны.

Mirror

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

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

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

Программа Charles: что это за программа и как её использовать

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

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

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

Mozilla Firefox – наиболее оптимальный браузер для использования Charles

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

Установка и настройка программы

Скачать дистрибутив можно с официального сайта. Там представлены две версии: бесплатная на месяц и платная по цене от 50 долларов в год. Не стоит искать взломанные вариации плагина, поскольку ему предстоит работать с вашими данными – в этом случае нельзя полагаться на продукт из неизвестного источника.

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

Также для браузера Mozilla скачайте и установите Java самой свежей версии – это позволяет программе работать корректно. Иногда нужный файл кладут в общий архив – кликните по нему и запустите. Обратите внимание, что Java не поддерживается браузерами на основе Chromium: Google Chrome, Яндекс. Браузер и прочими.

Главное окно программы Charles

После установки программы найдите в пакете инсталляции файл с расширением .xpi. Откройте Firefox и просто перетащите элемент в окно браузера.

Переходим к настройкам:

  1. Если у вас браузер Firefox, то просто откройте его, перейдите во вкладку Tools – Charles и нажмите Enable Charles. Для проверки откройте какой-нибудь сайт, а затем Charles (значок в виде кувшинчика, по умолчанию он находится на «Рабочем столе»), и вы увидите целый список запросов, связанных с открытием ресурса.
  2. В Chrome и Opera нужно открыть «Настройки» – «Прокси-сервер», отметить пункт HTTP, указать IP: 127.0.0.1 и порт: 8888.

Как пользоваться Charles: основные аспекты

Вы настроили Charles, как пользоваться им, сразу понятно из меню программы:

  1. Чтобы данные не просто отслеживались, но и записывались, нажмите вверху плашку Start / Stop Recording – она крупная, вы её точно не пропустите. Это делается на случай возникновения каких-либо проблем с подключением к определённому сайту. Имея подробный отчёт о процессе соединения, вы сможете обратиться к системному администратору, и он быстро обнаружит причину ошибки.
  2. Если какой-то сайт кажется вам подозрительным и вы хотите вначале понять, какие данные он отправляет/получает, а затем уже допускать или не допускать их перемещение, то можно сделать так, чтобы по запросу в браузере информация передавалась сразу в Charles. Для этого выделите папку с его названием ресурса, кликните по ней ПКМ и нажмите Breakpoints – Enable/Disable Breakpoints.
  3. Управлять содержимым папок со сведениями можно через клик дополнительной кнопкой манипулятора и команду Edit. После внесения коррективов в заголовки и прочие элементы, нажмите Execute, чтобы подтвердить новую форму обращения. На нее вы будете получать ответы от сервера – их можно просматривать и сохранять себе. Это ещё один плюс на случай неполадок, столкновения с мошенническими и фишинговыми ресурсами и т. п.

Теперь вы разобрались, как работать с программой Charles. Даже если вы не понимаете, как использовать данные, то хранить их полезно, чтобы своевременно получить помощь от провайдера или системного администратора.

Проблемы с использованием Charles

Иногда при посещении некоторых сайтов сведения о них не отображаются в списках Charles. Попробуйте сделать следующее:

  1. Откройте раздел Proxy/Recording Settings и Black List.
  2. Удалите из последнего нужный сайт, и его данные появятся в общем перечне.

Также большая проблема программы заключается в том, что ею пользуются взломщики. Умело манипулируя полученной информацией, они получают доступ к ограниченному контенту, например, к закрытым объектам в онлайн-игре. Это делается с помощью редактирования сведений, которые пришли в Charles: вначале узнается название и код проделанной доступной операции, а затем значение меняется на более высокое. В итоге игрок может «перепрыгнуть» на несколько уровней вперед и получить премиум-ресурсы. Это представляет угрозу не только для разработчиков гейм-развлечений, но и для соперников по игре, особенно если конкуренция лежит в её основе.

Зачастую Charles используется для взлома WEB приложений

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

Charles proxy не видит пакеты от мобильных устройств, т.к. не удается открыть chls.pro/ssl или http://www.charlesproxy.com/getssl

  1. установила charles, установила сертификаты
  2. включила все настройки (enable ssl proxying, enable transparent HTTP proxing)
  3. подключила ноутбук и телефон (проверяла на 5 девайсах — android/ios) к одной сеть wi-fi
  4. в настройках сети на телефоне указала прокси- вручную, адрес = ip pc, port = 8888
  5. открываю chls.pro/ssl или http://www.charlesproxy.com/getssl — страницы не открываются
  6. в самом charles не появляется окошко, что с такого девайса пытаются подключиться — разрешить или отклонить
  7. попробовала в access control settings добавить вручную ip девайса с маской /24 и без

Ранее, чарльз работал с этими девайсами нормально. Но в какой-то момент перестал. Попробовала переустановить сертификат. Попробовала переустановить программу, удалив полностью все данные после uninstall. На этой же машине через fiddler все работает нормально. На другой машине чарльз с этими девайсами тоже работает. Помогите разобраться.

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

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