Charles руководство по

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

Charles работает и на мобильных устройствах, но в этой статье мы будем рассматривать только версию для Windows. Давайте же начнем!

Установка Charles

Начать следует, конечно же, с установки. Скачиваем программу с официального сайта разработчика. 

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

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

Charles Web Debugging Proxy

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

После скачивания следует запустить exe-файл и произвести инсталляцию. Здесь ничего сложного нет, просто оставьте стандартные настройки установки.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Настройка программы

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

Для начала нужно установить сертификат программы. Именно из-за него, увы, и возникает большинство проблем, связанных с неработоспособностью программы.

Инструкция по установке сертификата:

Установка Charles

Открываем меню установки сертификата через Help -> SSL Proxying -> Install Root Charles Certificate.

Help -> SSL Proxying -> Install Root Charles Certificate

Жмем «Установить сертификат».

Мастер импорта сертификатов

Здесь выбираем «Локальный компьютер» и жмем «Далее».

Сертификаты Charles

ВАЖНО! На этом этапе выбираем «Поместить все сертификаты в следующее хранилище», жмем «Обзор», затем ОБЯЗАТЕЛЬНО выбираем «Доверенные корневые центры сертификации».

Поместить все сертификаты в следующее хранилищеЖмем «Далее».

Импорт сертификатов

Затем жмем «Готово».

Установку сертификата мы выполнили, теперь нам необходимо включить SSL Proxying и настроить его фильтрацию, чтобы начать перехватывать запросы. Фильтрация определяет, какие именно запросы нужно ловить, но мы сделаем так, чтобы у нас перехватывались все запросы

SSL Proxying

Открываем Proxy -> SSL Proxying Settings.

SSL Proxying Settings

Ставим галочку на «Enable SSL Proxying», затем под полем «Include» жмем на кнопку «Add».

Enable SSL Proxying

Для отключения фильтрации и сниффинга всего трафика мы просто добавляем звездочку в поле «Host».

Программа настроена. Теперь рассмотрим ее возможности и функции. 

Compose

Данная функция позволяет нам отправить копию выбранного запроса с измененными параметрами.

Нам достаточно выбрать один конкретный запрос и с помощью функции Compose поменять его параметры (заголовок запроса, тело запроса, куки, код и пр.)
Для начала мы можем отделить конкретные запросы от остальных с помощью функции Focus:

Compose

Теперь выбираем нужный нам запрос и выполняем ПКМ -> Compose

Focus Compose Charles

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

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

Charles

После изменения нужных нам параметров жмем «Execute» и получаем копию запроса с ответом от сервера.

Breakpoint

Данная функция позволяет точнее работать с запросами, вешая на них так называемый «Breakpoint» (точку остановки).

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

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

Breakpoint

Открываем Proxy -> Breakpoint Settings.

 Breakpoint Settings Charles

Ставим галочку на «Enable Breakpoints», затем жмем «Add».

Enable Breakpoints

Заполняем все поля в открывшемся окне (выше пример заполнения). 

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

Программа Charles

Rewrite

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

Rewrite

Открываем Tools -> Rewrite.

Tools -> Rewrite

Ставим галочку на «Enable Rewrite», затем в открывшемся окне под левым полем жмем «Add», а дальше жмем «Add» уже под правым верхним полем. 

Enable Rewrite

Заполняем все поля (они идентичны тем, что заполняются при создании Breakpoint).

Новое правило в Чарльз

Затем жмем «Add» уже под правым нижним полем, указываем тип редактирования запроса, заменяемые значения, а также условия замены.

Давайте поймаем запрос и посмотрим на реакцию Charles!

Захват запросов

Charles поймал нужный запрос, а затем заменил все Header одним значением.

Repeat Advanced

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

Ниже подробно показано, как это сделать.

Repeat Advanced

ПКМ по запросу -> Repeat Advanced.

Флуд-контроль

Здесь настраиваем все в соответствии с указаниями на приложенной выше картинке.

Проверяем!

Запросы в Charles

Должно открыться новое окно, где отправляются запросы.

Map Local

Последняя функция в сегодняшней статье. Позволяет работать с локальными файлами. 

Демонстрация инструмента ниже.

Map Local

ПКМ по запросу -> Map Local.

Карта запросов

В открывшемся окне у нас идут знакомые поля. Жмем «Choose» и выбираем локальный файл, после чего жмем «OK».

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

Локальный файл в Charles

Надеюсь, эта статья помогла вам разобраться в основах Charles. Это действительно мощный и довольно простой инструмент для тестирования. Спасибо за внимание!

Привет! Многие из тех, кто приходит к нам на собеседование на должность тестировщика, с гордостью заверяют, что они могут пользоваться Charles Proxy. Но когда погружаешься в техническую часть, то становится очевидно, что кандидат только слышал об этом инструменте. Давайте уже наконец скорее приручим эту вазу!

Википедия нам сообщает, что:

Charles представляет собой кроссплатформенное приложение прокси-сервера для отладки HTTP, написанное на Java. Он позволяет пользователю просматривать HTTP, HTTPS и активированный трафик TCP-порта, доступ к которому осуществляется с локального компьютера, на него или через него. Сюда входят запросы и ответы, включая HTTP-заголовки и метаданные (например, файлы cookie, кэширование и кодирование информации), с функциями, предназначенными для помощи разработчикам и тестировщикам в анализе соединений и обмене сообщениями.

Небольшое пояснение

Сниффинг — процесс мониторинга и перехвата всех пакетов, проходящих через сеть, с помощью инструментов сниффинга (Charles Proxy).

Первые шаги

1. Установка и запуск

Для начала необходимо загрузить и установить приложение.

Если у вас не приобретена лицензия, то будет доступна 30-ти дневная пробная версия с ограничениями (функциональность не блокируется, но будут появляться окна с таймаутом 5-10 секунд до возобновления использования, а также через 30 минут будет завершаться работа приложения).

2. Начинаем сниффить трафик

Запустите Charles Proxy на MAC, зайдите в меню HelpSSL ProxyingInstall Charles Root CertificateУстановить сертификатИмпортируем сертификат.

Запустите Charles Proxy на Windows, зайдите в меню HelpSSL ProxyingInstall Charles Root Certificate

В Windows, в открывшемся окне СертификатУстановить сертификат. Выбрать «Текущий пользователь» или «Локальный пользователь». Далее вы получите уведомление от мастера импорта сертификатов, что сертификат успешно импортирован.

3. Проксирование трафика веб-браузера

Рассмотрим вариант с проксированием на примере браузера Mozilla Firefox. И установку сертификата на примере двух OS: MAC и Windows.

3.1 Windows
Для этого узнаем IP-адрес ПК: в Charles Proxy перейдем в HelpLocal IP Address. Видим, что ваш IP: 10.0.2.15 (p.s. в Local IP Address может быть несколько указано IP, например отображаться IP от VirtualBox, если после указания одного IP не будут отображаться запросы, попробуйте выбрать другой из списка).

Далее откроем Mozilla Firefox, перейдем в Параметры сетиНастроить. Выставим все как на скриншоте ниже и нажмем Ок.

Теперь необходимо перейти по ссылке chls.pro/ssl, а далее начнется автоматическая загрузка сертификата. В этот момент будет входящее соединение в Charles Proxy, необходимо нажать Allow, а также выполнить импорт сертификата:

3.2 MAC OS
Для этого узнаем IP-адрес ПК: в Charles Proxy перейдем в HelpLocal IP Address. Видим, что ваш IP: 192.168.1.50.

Далее откроем Mozilla Firefox, перейдем в Параметры сетиНастроить.

Выставим все как на скриншоте и нажмем Ок.

Теперь необходимо перейти по ссылке chls.pro/ssl, а далее начнется автоматическая загрузка сертификата.

В этот момент будет входящее соединение, необходимо нажать Allow:

Следующим шагом обратите внимание на диалоговое окно, где необходимо выбрать Открыть в keychain:

Важным шагом, который вы должны сделать далее, это в Keychain Access сделать сертификат доверенным:



Не забудьте деактивировать Windows Proxy (если у вас ОС Windows) или Mac Proxy (в противном случае будет вам мешать).

Теперь у вас отображаются запросы, однако они зашифрованы, и кроме иероглифов ничего не видно. Чтобы видеть Request/Response в нормальном виде, нужно включить SSL Proxying и настроить домены, пакеты которых мы хотим перехватывать. А хотим мы получать запросы со всех сайтов. Для этого перейдите в раздел ProxySSL Proxying Settings.

В открывшемся диалоговом окне поставьте галочку Enable SSL Proxying, выберите раздел Include и нажмите Add.

Далее заполните поле Host значением * (как показано на скриншоте) и нажмите ОК.

В диалоговом окне «SSL Proxying Settings» нажмите ОК.

Если необходим будет определенный host, следует указать например нужный *youla* (это значит, что будет расшифровываться трафик только тот, где в запросах есть youla.

4. Настройка прокси на Android

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

Для этого узнаем IP-адрес ПК: в Charles Proxy перейдем в HelpLocal IP Address. Видим, что ваш IP: 192.168.1.50.

Далее возьмите в руки телефон, откройте Свойства сети → Название сети WiFi → Прокси-сервер → Вручную → Имя хоста: *ваш IP* / Порт: *8888* → Сохраните измененные свойства сети.

Теперь необходимо перейти по ссылке chls.pro/ssl или charlesproxy.com/getssl, а далее начнется автоматическая загрузка сертификата. Откройте его, задайте имя сертификата, и теперь у вас есть доступ к трафику Android-приложения.

5. Настройка прокси на iOS

Возьмите в руки iPhone, откройте Свойства сети → Название сети WiFi → Прокси-сервер → Вручную → Имя хоста: *Наш IP* / Порт: *8888* → Сохраните измененные свойства сети (важно: устройство iOS и десктоп должны быть в одной сети).

Теперь необходимо перейти по ссылке chls.pro/ssl или charlesproxy.com/getssl, «Разрешить» загрузку профиля конфигурации. Далее перейдите в НастройкиПрофиль загруженУстановить. Затем перейдите в НастройкиОсновныеОб этом устройствеДоверие сертификатам → найдите установленный сертификат и сделайте его «Доверенным».

Функциональность Charles Proxy

  1. Подмена данных:
    • 1.1 Breakpoint
    • 1.2 Rewrite
    • 1.3 Map Local
  2. Proxy:
    • 2.1 Throttle Settings
    • 2.2 Reverse Proxies
    • 2.3 Port Forwarding
    • 2.4 MacOS Proxy/Windows Proxy
  3. Tools:
    • 3.1 No Caching
    • 3.2 Block Cookies
    • 3.3 Map Remote
    • 3.4 Block List
    • 3.5 DNS Spoofing
    • 3.6 Mirror
    • 3.7 Compose
  4. Recording Settings
  5. Focus
  6. Repeat
  7. Repeat Advanced

1. Подмена данных

Представим, что нам надо протестировать на клиенте верстку. Нужно проверить, как будет отображаться большое количество бонусов у пользователя. Один из вариантов, который многие предложат: изменить в БД количество бонусов и проверить на клиенте. Да, вы будете правы! Однако на сервере может быть кэш, и необходимо подождать какое-то время, пока количество бонусов не обновится, либо просто подключиться к самой базе и выполнить запрос — это занимает определенное время. Есть вариант проще: изменить ответ от сервера! В Charles Proxy есть три способа подмены данных:

1.1 Breakpoint

Breakpoint — это некая точка остановки запроса. Когда обнаруживается запрос из заданного списка, для дальнейшего ручного взаимодействия с параметрами запроса открывается отдельное окно. В нём перейдите к ручному изменению запросов и ответов. Удобно использовать эту функцию, когда тестируете API или разные ответы сервера.

У нас имеется приложение и профиль пользователя, у которого сейчас 45 бонусов на счету:

Запрос, в котором приходит это количество бонусов: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8

Чтобы «повесить» Breakpoint на запрос, перейдите в раздел ProxyBreakpoint Settings. Далее поставьте галочку Enable BreakpointsAdd, и в открывшемся диалоговом окне «Edit Breakpoint» вставьте URL запроса, как показано на скриншоте:

Для примера поставьте две галочки «Request» и «Response». Далее нажмите OK, и ещё раз OK в окне «Breakpoint Settings». Теперь выполните запрос еще раз, то есть на клиенте заново откроется экран с профилем пользователя.

В Charles Proxy мы видим, что выполнение запроса ставится на паузу:

Здесь можно изменить параметры запроса. Но сейчас это делать не нужно, нажмите «Execute». Следом у нас ставится на паузу уже пришедший ответ от сервера. И тут как раз мы должны отредактировать «Response». Найдите нужный параметр — bonus_cnt»: 45.

Далее измените значение параметра bonus_cnt, например, на 1 000 000 бонусов, и нажмите «Execute».

На клиенте отобразится новое количество бонусов. Мы богаты!

1.2 Rewrite

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

Попробуем с помощью Rewrite изменить количество бонусов нашего пользователя. Для этого откройте ToolsRewrite → галочка «Enable Rewrite» → Add. В поле Name можно ввести любое название подмены, например, «Change bonus», либо оставить по умолчанию «Untitled Set».

Следующим шагом необходимо добавить в «Location» путь запроса. Для этого, в разделе LocationAdd заполните следующие поля и сохраните:

Host: https://api.youla.io

Path: /api/v1/user/5e6222bbbedcc5975d2375f8

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

Type: Body (потому что параметр находится в теле);

Where: Response (потому что параметр находится в ответе от сервера);

Раздел Match: в «Value» укажите значение и параметр, который возвращает сервер;

Раздел Replace: в «Value» укажите значение и параметр, который вы хотите увидеть на клиенте.

Далее сохраните «Rewrite Rule» и нажмите ОК на вкладке «Rewrite Settings». На клиенте перезапросите еще раз профиль пользователя. У вас автоматически подменилось количество бонусов пользователя. Мы снова богаты!

1.3 Map Local

Map Local — инструмент, который позволяет использовать локальные файлы, словно они являются частью сервера.

Перейдите в Tools → Map Local.

Далее в окошке «Map Local Settings» нажмите Add → Хост: https://api.youla.io/api/v1/user/5e6222bbbedcc5975d2375f8 → Local path: путь на компьютере до файла. Можете использовать готовые медиа-файлы, HTML, CSS, JSON, XML. Больше подходит, конечно, разработчикам, чтобы не загружать данные на сервер для его последующего тестирования, но и тестировщик может найти грамотное применение. Мы заранее подготовили ответ, который нам будет нужен, и сохранили в файл change_bonus.json:

Сохраните введенные значения на вкладке «Edit Mapping» и на вкладке «Map Local Settings».

На клиенте перезапросите еще раз профиль пользователя. У вас автоматически подменилось количество бонусов пользователя. Мы снова богаты!

Давайте рассмотрим другие возможности инструмента Charles Proxy. И начнем с самого начала, с вкладки «Proxy».

2.1 Throttle Settings

Throttle Settings — функция, позволяющая задавать разные параметры скорости соединения с выбранным доменом.

Функция для тех, кто любит тестировать в лифте, в метро, в подземном переходе. Перейдем в ProxyThrottle Settings → галочка Enable Throttling. Если не разбираетесь во всех перечисленных пунктах, то можете использовать Throttle preset и там выбрать подходящую для теста скорость, а система автоматически заполнит остальные поля.

Если выбрать «Only for selected hosts», то можно задать определенный хост, к которому будут применяться ваши настройки. Здесь можно использовать готовые пресеты с настройками для различных типов (4G, 3G и т. д.). А также можно задать различные параметры, коротко перечислю некоторые из них:

Bandwidth — максимальный объем данных, который может быть передан с течением времени.

Utilisation — доля общей пропускной способности, которая может быть предоставлена пользователю в любой момент времени.

Latency — задержка в миллисекундах по запросу firts между клиентом и удаленным сервером.

MTU — максимальное передающее устройство для текущего пресета.

Reliability — мера вероятности, что соединение не удастся. Используется для имитации ненадежных сетевых условий.

Stability — мера вероятности, что соединение будет нестабильным и, следовательно, снизится качество. Полезно для моделирования сетей, в которых периодических падает качество связи, например, мобильных.

2.2 Reverse Proxies

Reverse proxy — обратный прокси-сервер. Обычно используется для того, чтобы принимать запросы из Интернета и перенаправлять их на один из веб-серверов.

2.3 Port Forwarding

Port Forwarding — проброс портов, который иногда называют перенаправлением портов, или туннелированием — процесс пересылки трафика, адресованного конкретному сетевому порту, с одного сетевого узла на другой. Этот метод позволяет внешнему пользователю достичь порта внутри локальной сети.

2.4 MacOS Proxy/Windows Proxy

MacOS Proxy или Windows Proxy (в зависимости от вашей ОС) — проксирование трафика с вашего веб-браузера.

Разобравшись с разделом Proxy, перейдем к разделу Tools.

3.1 No Caching

Инструмент No Caching предотвращает кэширование, манипулируя заголовками HTTP, которые управляют кэшированием ответов. Заголовки If-Modified-Since и If-None-Match удаляются из запросов, добавляются Pragma: no-cache и Cache-control: no-cache. Заголовки Expires, Last-Modified и ETag удаляются из ответов и добавляются Expires: 0 и Cache-Control: no-cache.

3.2 Block Cookies

Block Cookies — заголовок файла Cookie удаляется из запросов, предотвращая отправку значений файла из клиентского приложения (например веб-браузер) на удаленный сервер. А также из ответов удаляется заголовок Set-Cookie, предотвращая получение клиентским приложением запросов на установку файлов cookie с удаленного сервера. В настройках можно включить удаление Cookie как для всех хостов, так и для выбранных. В примере ниже включено удаление Cookie для всех запросов.

3.3 Map Remote

Map Remote — позволяет переадресовать запросы с одного URL «Map From» на другой «Map To». Подменяет хост, путь целиком или только параметры в зависимости от вашей задачи. В примере ниже подменён запрос с prod-сервера на dev-сервер.

3.4 Block List

Block List — позволяет блокировать определённые доменные имена. Когда веб-браузер попытается запросить любую страницу из заблокированного доменного имени, она заблокируется. Можно выбрать либо «Drop connection», либо возврат 403 ошибки.

3.5 DNS Spoofing

Виртуальный хостинг — это когда у вас есть несколько сайтов на одном IP-адресе, и веб-сервер определяет, какой сайт вы запрашиваете, основываясь на имени, введённом в браузере. Точнее, сервер смотрит на заголовок хоста, отправленный в запросе. Например, когда нужно подменить хосты, чтобы при вводе какого-либо адреса в браузере (скажем, api.youla.ru) запросы уходили по другому адресу (допустим, на тестовую площадку).

DNS Spoofing — перенаправляет доменное имя на определенный IP-адрес.

3.6 Mirror

Mirror — эта функция позволяет автоматически сохранять все ответы, возвращаемые в Charles Proxy. Они раскладываются локально в такой же иерархии, как на сервере. Если внезапно случился даунтайм на бэкенде, отвалилась тестовая среда и т. д., у вас уже есть готовые моки для Map Local. Активировать функцию можно так: ToolsMirror или ToolsAuto Save.

3.7 Compose

Compose — функция редактирования запросов, которые вы поймали.

Например вы добавляете в избранное какой-то товар, но почему-то он не добавляется. Вы можете отредактировать уже отправленный запрос и отправить его еще раз. Для этого необходимо выбрать нужный запрос из списка, нажать на нём правой кнопкой и выбрать Compose. Иконка у запроса поменяется, и теперь можно смело его редактировать.

После того, как вы изменили нужные значения в запросе, нажмите внизу «Execute», чтобы отправить запрос на сервер.

4. Recording Settings

Recording Settings — настройки отображения списков разрешенных и запрещенных доменов.

Во вкладке «Options» можно настроить лимит, то есть количество запросов, которое Charles Proxy может записать.

Во вкладке «Include» можно выбрать конкретный домен для отображения пакетов.

Во вкладке «Exclude» можем выбрать те домены, которые необходимо спрятать при сниффинге.

5. Focus

Focus — эта функция перемещает домен на первые позиции в списке. 

6. Repeat

Repeat — отправляет на сервер запрос, идентичный выбранному.

7. Repeat Advanced

Repeat Advanced — идентично Repeat, только можно выбрать количество отправляемых запросов и задержку между ними. Эта функция пригодится при проверке реакции сервера на флуд.

Здесь Concurrency — количество пользователей, а Iterations — количество повторений каждого запроса. Также можно поставить галочку «Show results in new Session», в таком случае откроется новое окно, где будут выполняться запросы.

Резюме

В этой статье мы постарались описать те функции Charles Proxy, которыми пользуются тестировщики мобильных приложений. На этом всё, и не забывайте прикреплять к баг-репорту сессию из сниффера. А если остались вопросы — скорее пишите в мой телеграм-канал @qa_chillout

Web Debugging Proxy Application for Windows, Mac OS and Linux

  • Home
  • Overview
  • Documentation
  • Download
  • Buy
  • Support

Charles is developed by XK72. All content is copyright 2023. Site design by Matthew Buchanan.

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

Документацию можно почитать на официальном сайте, а в данной заметке я покажу основные кейсы его использования.

Установка и предварительная настройка

Установка и запуск

Скачайте и установите Charles.

При первом запуске Charles скорее всего попросит разрешения внести изменения в сетевые настройки вашего компьютера, согласитесь.

Настройка прокси

Далее перейдите в Proxy – Access Control Setting, нажмите кнопку Add и добавьте IP-адрес 0.0.0.0/0.

Charles Access Control Setting

Затем перейдите в ProxySSL Proxying Settings, установите галочку в Enable SSL Proxying, нажмите кнопку Add и добавьте локацию, в Host укажите «.», а в Port «*». Такая настройка позволит получать запросы и ответы со всех хостов. Или вы можете добавить только интересующие.

Charles Location

Установите сертификаты на компьютер: HelpSSL ProxyingInstall Charles Root Certificate.

Сharles Certificates

Укажите порт: ProxyProxy Settings – вкладка ProxiesPort: 8888.

Charles Port

Проксирование трафика веб-браузера

Если не хотите видеть запросы с ПК, перейдите на вкладку MacOS (Windows) и снимите чекбоксы. Но если целью является изучение трафика из браузера, наоборот, удостоверьтесь, что чекбоксы установлены.

Charles Proxy Settings

Когда закончите с настройками прокси, перезапустите Charles.

Настройка прокси на устройстве

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

Компьютер с Charles и устройство должны находиться в одной сети.

На устройстве, в настройках сети или Wi-Fi, укажите прокси-сервер: IP-адрес компьютера с запущенным Charles и порт 8888, или другой, который был указан при настройке прокси.

Быстро узнать IP-адрес компьютера с запущенным Charles можно через пункт меню HelpLocal IP Address.

IP address Charles

Для iPhone откройте Настройки (Settings), перейдите в настройки Wi-Fi, выберите активную Wi-Fi сеть, пролистайте экран вниз и выберите пункт Настройка прокси (Configure Proxy). Метод определения выберите Вручную (Manual) и укажите IP-адрес и порт.

Proxy iPhone

Далее нужно установить сертификат прокси-сервера.

В браузере на устройстве перейдите по адресу http://charlesproxy.com/getssl или http://chls.pro/ssl Разрешите загрузку профиля и скачайте сертификат.

Установите скачанный сертификат Charles. Процесс установки зависит от используемого устройства и может различаться.

Например, чтобы установить сертификат на iPhone откройте Настройки (Settings), перейдите в Основные (General), пролистайте вниз и выберите пункт Профили и управление устройством (Profiles & Device Management). В открывшемся меню найдите загруженный профиль сертификата, откройте его, а затем установите.

Profiles iPhone

Дополнительно может потребоваться установить доверие сертификату. Откройте Настройки (Settings) – ОсновныеОб этом устройстве (About), пролистайте вниз до конца, выберите пункт Доверие сертификатов (Certificate Trust Settings). В открывшемся окне отметьте переключателем сертификат, которому хотите дать доверие.

Certificate Trust Settings

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

Подробнее про установку сертификатов можно прочитать в документации Charles.

Теперь можно проксировать и изучать трафик.

Как смотреть трафик

Запустите Charles. На устройстве или в браузере откройте интересующий сайт или приложение. При выполнении действий на клиенте, запросы с него и ответы от сервера будут логироваться в Charles.

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

Structure View

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

Charles Sequence View

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

Выделив хост, в контекстном меню можно включить режим Focus, при котором запросы к интересующим хостам будут группироваться вместе, а остальные скрыты в отдельную группу.

Charles Focus

Не забывайте пользоваться Поиском (EditFind или Cmd+F). Он поможет быстро найти интересующий параметр или подстроку среди перехваченных запросов.

Charles Find

На что стоит обращать внимание:

  • запрос уходит на верный URL;
  • допустимое время между действием, отправкой запроса и получением ответа;
  • метод, код ответа, тело, параметры cоответствуют ожидаемым, значения не пустые;
  • формат данных;
  • запрос не дублируется;
  • данные отобразились на клиенте.

Как менять запросы и ответы

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

В этом случае можно использовать инструмент Rewrite (ToolsRewrite – галочка Enable Rewrite.

Добавьте новое правило, введите хост (или оставьте пустым, тогда правило будет действовать для всех хостов), затем заполните Rewrite Rule, где укажите что на что необходимо заменить.

В примере ниже, значение поля bonus в теле ответа будет заменено со 100 на 5000.

  • Type: Body – потому что меняем параметр в теле;
  • Where: Response – потому что меняем ответ;
  • Match: в Value – значение, возвращаемое сервером;
  • Replace: в Value – значение, на которое необходимо заменить Value из Match.

Rewrite Charles

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

Rewrite Charles

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

Аналогичным способом через Rewrite можно изменять, добавлять, удалять заголовки, менять коды ответа сервера, хосты и url.

Как вручную отредактировать запрос

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

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

Charles Compose

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

Charles Execute

Инструмент Repeat в контекстном меню запроса отправит его на сервер еще раз.

Repeat Advanced – похож на Repeat, однако позволяет указать количество отправляемых запросов и задержку между ними. Данный функционал может быть полезен при проверке сервера на флуд.

С помощью инструмента Breakpoints (точки остановка) можно перехватывать и изменять не только запросы, но так же и ответы от сервера, прежде чем они попадут на клиент.

Для начала нужно включить возможность использования Breakpoints (ProxyBreakpoint SettingsEnable Breakpoints).

Далее нужно указать URL запроса, который в случае выполнения должен быть перехвачен. Это можно сделать в том же окне Breakpoint Settings, либо повесить Breakpoint через контекстное меню, выбрав ранее выполненный запрос.

Перед выполнением запроса он будет остановлен и вы сможете отредактировать его тело, метод, протокол, url, параметры, заголовки и куки.

Charles Breakpoints

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

Как подменить хост в API

Задача: подменить продовый хост с API на тестовый. Это можно сделать двумя способами.

Первый, через инструмент Rewrite, подобно тому, как описано в предыдущем разделе.

Host Charles

Второй способ подменить API, заключается в использовании инструмента Map Remote (ToolsMap Remote).

Charles Map Remote

В зависимости от задачи можно подменить хост целиком, его часть или только параметры.

Как подменить код ответа сервера

Задача: проверить как поведет себя клиент при неожиданном коде ответа от сервера.

Как и в предыдущих двух примерах, тут подойдет инструмент Rewrite (ToolsRewrite).

Charles Response Status

Как эмулировать недоступность сервера

Задача: проверить как поведет себя клиент при недоступности хоста.

Используя инструмент Block List (ToolsBlock List), можно заблокировать доступ клиента к указанному хосту. На выбор разрыв соединения либо 403 код ответа.

Charles Block List

Инструмент Allow List (ToolsAllow List) наоборот блокирует все хосты кроме разрешенных.

Как замокать ручку или подменить файл

Задача: подменить ответ от сервера на заранее подготовленный, сохраненный локально, например, чтобы замокать ответ ручки или заменить скрипт.

Для этих целей можно использовать инструмент Map Local (ToolsMap Local).

Charles Mapping

В настройках укажите ручку или файл на сервере, а также локальный файл, который будет использован вместо них. Поддерживаются форматы HTML, CSS, JSON, XML и медиафайлы.

Как эмулировать проблемы в сети

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

Для этого предназначен инструмент Throttle (ProxyThrottle Settings).

Charles Throttle

Здесь можно включить сетевые ограничения для определенных или всех хостов, а так же задать различные сетевые параметры.

  • Bandwidth – пропускная способность;
  • Utilisation – эффективность использования пропускной способности;
  • Latency – задержка в миллисекундах между клиентом и сервером;
  • MTU – максимальный объём данных за одну итерацию;
  • Reliability – вероятность, что соединение не удастся;
  • Stability – вероятность, что соединение будет нестабильным.

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

Как раздать VPN

Задача: дать доступ другому устройству в корпоративную сеть.

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

Подробнее читайте в статье: Как раздать VPN через Fiddler или Charles.

Другие полезные функции

Инструмент Block Cookies – предотвращает получение клиентом запросов на установку cookie с сервера.

Инструмент No Caching предотвращает кэширование через заголовки.

MacOS Proxy или Windows Proxy разрешает или запрещает проксирование трафика из браузера, установленного на том же компьютере, что и Charles.

Инструмент Port Forwarding (проброс портов) позволяет пересылать запросы с одного порта на другой.

DNS Spoofing – перенаправляет запрос с доменного имени на указанный IP-адрес.

Mirror – автоматически сохраняет в указанную папку все ответы, возвращаемые в Charles. Затем их можно использовать как моки.

Устранение проблем

Большая часть функций Charles не будет работать если не установлены или не корректно установлены сертификаты. Это самая распространенная проблема. Вторая проблема может быть в том, что для связи клиента и сервера используется SSL соединение, но оно выключено в Charles, соответсвенно он не может его расшифровать, тем более изменить запрос или ответ.

Убедитесь, что ответ в Charles отображается в незашифрованном виде, как на скриншоте ниже. Это значит базовые настройки выполнены верно, сертификаты установлены, SSL Proxying включен.

Not Encrypted

Если же в ответе нечитаемый текст, как на скриншоте ниже, часть инструментов Charles работать не будет.

Encrypted

В этом случае проверьте, что выполнили все рекомендации по настройке описанные в начале данной статьи.

В частности удостоверьтесь, что проксирование включено для SSL соединений. Галочка в Enable SSL Proxying в ProxySSL Proxying Settings должна быть установлена, указана локация.

Сертификаты Charles должны быть установлены в системе (HelpSSL ProxyingInstall Charles Root Certificate).

Сертификаты Charles должны быть установлены на клиенте, если в качестве него выступает другое устройство.

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

Дополнительную информацию про установку сертификатов можно получить в документации Charles.

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

Делитесь интересными кейсами использования Charles и я добавлю их в статью.

Полезные ссылки

Официальный сайт Charles
Как раздать VPN через Fiddler или Charles

На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.

Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.

Автор: Анастасия Копова

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

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

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

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

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

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

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

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

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

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

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

При тестировании задач мы придерживаемся нескольких правил. Во-первых, проксируем трафик приложения, включаем расшифровку тех 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). Появляется скромное окошко, обладающее большими возможностями.

Rewrite — это подмены: в заголовках (header rules), в пути (URL), в параметрах (query parameter rules) и в теле запроса или ответа (body rules).

Помимо подмен можно добавить или удалить новые заголовки, параметры запроса, когда это нужно. Для этого выбираем подходящее для задачи значение из выпадающего списка Тип (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. Если какие-то функции, которые вы используете, остались за бортом, пожалуйста, напишите об этом в комментариях.

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

Обсудить в форуме

Понравилась статья? Поделить с друзьями:
  • Руководство ich e2c
  • Руководство города новокузнецка
  • Как сделать выравнивание ногтевой пластины базой пошаговая инструкция
  • Руководство для трудных детей
  • Ноутбук тошиба руководство