Для тестирования мобильных приложений, работающих с удаленными серверами, QA-инженеру приходится держать под рукой множество разных тестовых аккаунтов, логов, запросов и ответов. Реальность такова, что не всегда удается договориться о предоставлении нужных тестовых данных в срок. Чаще всего серверные разработчики будут незнакомыми вам людьми по ту сторону Скайпа. В таких ситуациях приходится своими руками подменять ответ сервера перед его передачей в приложение.
Чтобы редактировать выдачу сервера и воспроизводить сложные тестовые сценарии в QA Redmadrobot, мы используем Charles.
Как это работает?
Charles — инструмент для мониторинга HTTP/HTTPS трафика. Программа работает как прокси-сервер между мобильным приложением (в нашем случае) и сервером этого приложения. Charles записывает и сохраняет все запросы, которые проходят через подключенный к нему телефон и позволяет их редактировать.
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": [{
"alias": "habred",
"title": "Захабренный",
"plural": "Захабренные",
"description": "Пользователь с кармой \u003E0."
}],
"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": [{
"alias": "habred",
"title": "Захабренный",
"plural": "Захабренные",
"description": "Пользователь с кармой \u003E0."
}],
"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-спецификациям). Такие возможности расширяют границы тестирования черного ящика и позволяют наблюдать все основные взаимодействия вашего МП и его серверов. Тестирование на таком уровне позволяет находить более сложные дефекты и значительно повышает общее качество приложения.
Комментарии (14)
CAJAX
20.10.2015 15:17+1А почему не WebScarab?
yaryabu
20.10.2015 16:28+6Не думаю, что раньше видел эту тулзу. Спасибо за наводку.
Могу сказать, что Charles выглядит более user-friendly, если учитывать, что им пользуются не только серверные разработчики со стажем, а также Junior QA-инженеры.
Немного смущает подпись на сайте: «This page was last modified on 14 August 2014, at 22:16.» и история коммитов в GitHub.
Если мы используем инструмент каждый день, то мы должны быть уверены в том, что он не заглохнет при выходе новой Mac OS X. К примеру, после выхода El Capitan у Charles поехал интерфейс, но разработчики это быстро зафиксили.
jrip
20.10.2015 16:10В целом штука хорошая, но временами тормозная и текущая, вполне себе может повесить неторопливый комп при долгом использовании, что раздражает.
yaryabu
20.10.2015 16:39+2Такое бывает, но не очень часто. Достаточно просто периодически чистить историю или перезапускать тул.
Ну, а от JSON'ов в 10-50к строк никуда не деться, они все что угодно будут тормознуть.
anton9088
21.10.2015 00:00+1Передаю привет роботу)
Забыли описать еще одну полезную фичу «Recording Settings», где можно указать с каких хостов снифать траффик, чтобы не было лишних запросов на левые урлыyaryabu
21.10.2015 01:39+1Спасибо!
Recording Settings достаточно полезная, но мы ей не особо пользуемся т.к. хватает галочки «Focus» на нужных хостах. В таком случае остальные хосты попадают в папку Other Hosts (см. скрин из статьи). Проектов много и каждый проект использует в среднем 1-3 сервера (не считая аналитики, Crashlytics и т.д.), так что не очень удобно несколько раз в день переключать и редактировать экран Recording Settings.
ruman
21.10.2015 10:57После редактирования ответа в Charles (через breakpoint) сериализатор ругается NSJSONSerialization: Unable to convert data to string around character.
yaryabu
21.10.2015 12:58Мы на такую проблему не натыкались. Не могу точно сказать в чем причина. Скорее всего, какая-нибудь ошибка в синтаксисе JSON при подмене или проблемы с юникодом.
ruman
21.10.2015 13:02+1Обнаружил в заголовке ответа два поля Content-Type:
Content-Type : application/octed-stream Content-Type : application/json; charset=utf-8
После удаления первого все стало ок
bbidox
21.10.2015 11:32+1mitmproxy кроссплатформенный и бесплатный. Да, консольное приложение, но под него скрипты можно писать.
SilverFire
Софт такого рода — отличная вещь для дебага веб-запросов. Но Charles — не мой выбор. Мне больше понравился бесплатный аналог Fiddler.
Работал с ним хоть и не очень долго, но в нем есть все что нужно — есть те же фильтры, можно подменять ответы, поддерживает HTTPS, может перехватить запрос и ответить на него, не обращаясь к реальному серверу. На Linux работает под Mono, но с периодическими вылетами и мелкими глюками. Не нашел ничего нативного для линукса, что умеет все то же и работает лучше (посоветуете?).
P.S.: Redmadrobot, почему вы отдали предпочтение Charles?
yaryabu
Когда мы выбирали тул (чуть больше года назад), мы рассматривали Fiddler. Основная проблема была в том, что разработчики делают сильный акцент на Windows. У нас большинство сотрудников работают на Mac и Charles'ом пользуются на только QA, но также разработчики и аналитики. Так что мы учитывали не только функциональность тулзы и принимали во внимание удобство использования внутри компании.
С линуксом мы почти не работаем, посоветовать тут ничего не могу, но версия Charles на него тоже есть.