Компания
176,18
рейтинг
20 октября 2015 в 14:30

Разработка → 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-спецификациям). Такие возможности расширяют границы тестирования черного ящика и позволяют наблюдать все основные взаимодействия вашего МП и его серверов. Тестирование на таком уровне позволяет находить более сложные дефекты и значительно повышает общее качество приложения.
Автор: @yaryabu
REDMADROBOT
рейтинг 176,18

Комментарии (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-клиент, но и дернуть между запросом и ответом запрос на локальный сервер.

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

Самое читаемое Разработка