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

  • Tutorial

Для тестирования мобильных приложений, работающих с удаленными серверами, 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": [{
			"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-спецификациям). Такие возможности расширяют границы тестирования черного ящика и позволяют наблюдать все основные взаимодействия вашего МП и его серверов. Тестирование на таком уровне позволяет находить более сложные дефекты и значительно повышает общее качество приложения.
Redmadrobot 72,99
№1 в разработке мобильных решений для бизнеса
Поделиться публикацией
Комментарии 15
  • +6
    Софт такого рода — отличная вещь для дебага веб-запросов. Но Charles — не мой выбор. Мне больше понравился бесплатный аналог Fiddler.

    Работал с ним хоть и не очень долго, но в нем есть все что нужно — есть те же фильтры, можно подменять ответы, поддерживает HTTPS, может перехватить запрос и ответить на него, не обращаясь к реальному серверу. На Linux работает под Mono, но с периодическими вылетами и мелкими глюками. Не нашел ничего нативного для линукса, что умеет все то же и работает лучше (посоветуете?).

    P.S.: Redmadrobot, почему вы отдали предпочтение Charles?
    • +5
      Когда мы выбирали тул (чуть больше года назад), мы рассматривали Fiddler. Основная проблема была в том, что разработчики делают сильный акцент на Windows. У нас большинство сотрудников работают на Mac и Charles'ом пользуются на только QA, но также разработчики и аналитики. Так что мы учитывали не только функциональность тулзы и принимали во внимание удобство использования внутри компании.

      С линуксом мы почти не работаем, посоветовать тут ничего не могу, но версия Charles на него тоже есть.
    • +1
      А почему не WebScarab?
      • +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 поехал интерфейс, но разработчики это быстро зафиксили.
      • 0
        В целом штука хорошая, но временами тормозная и текущая, вполне себе может повесить неторопливый комп при долгом использовании, что раздражает.
        • +2
          Такое бывает, но не очень часто. Достаточно просто периодически чистить историю или перезапускать тул.
          Ну, а от JSON'ов в 10-50к строк никуда не деться, они все что угодно будут тормознуть.
        • –1
          BurpSuite FREE
          написан на Java
          • 0
            BurpSuite это скорее хак-комбайн нежели простой QA инструмент.
          • +1
            Передаю привет роботу)
            Забыли описать еще одну полезную фичу «Recording Settings», где можно указать с каких хостов снифать траффик, чтобы не было лишних запросов на левые урлы
            • +1
              Спасибо!
              Recording Settings достаточно полезная, но мы ей не особо пользуемся т.к. хватает галочки «Focus» на нужных хостах. В таком случае остальные хосты попадают в папку Other Hosts (см. скрин из статьи). Проектов много и каждый проект использует в среднем 1-3 сервера (не считая аналитики, Crashlytics и т.д.), так что не очень удобно несколько раз в день переключать и редактировать экран Recording Settings.
            • 0
              После редактирования ответа в Charles (через breakpoint) сериализатор ругается NSJSONSerialization: Unable to convert data to string around character.
              • 0
                Мы на такую проблему не натыкались. Не могу точно сказать в чем причина. Скорее всего, какая-нибудь ошибка в синтаксисе JSON при подмене или проблемы с юникодом.
                • +1
                  Обнаружил в заголовке ответа два поля Content-Type:
                  Content-Type : application/octed-stream
                  Content-Type : application/json; charset=utf-8
                  

                  После удаления первого все стало ок
              • +1
                mitmproxy кроссплатформенный и бесплатный. Да, консольное приложение, но под него скрипты можно писать.
                • 0
                  Второй раз за неделю натыкаюсь, хотя мысли о совсем другом пути: создание фэйковых веб-серверов внешних сервисов с подменой резолва на локальной машине. Основная моя проблема — нужно не просто получить фэйковый ответ в браузер или другой локальный http-клиент, но и дернуть между запросом и ответом запрос на локальный сервер.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое