Как установить Charles Proxy. Как настроить Charles Proxy. Как подменить данные в charles Proxy. Как подменить запрос в charles proxy. Как применить map local в charles proxy. Как подключить Charles Proxy. Основы работы в Charles Proxy.
Как настроить Charles Proxy на маке mac. Как подключить телефон iphone через Charles Proxy. Charles Proxy c нуля. Charles Proxy для новичков.
Меня зовут Богдан и я рад приветствовать тебя на своем канале! Живу активной и интересной жизнью, снимаю это и делюсь с вами. ⠀⠀Рассказываю о том, как решил сменить работу (и сменил конечно же), устроиться в IT и стать тестировщиком. ⠀⠀Всегда снимаю в поездках и путешествиях, рассказываю о своих увлечениях и тренировках, а так же показываю здесь все, что мне интересно.
Источник: dzen.ru
Чарли, Чарли, ты здесь? #юмор #призрак #приколы
Charles Proxy на пальцах: главный помощник QA и разработчиков
Привет, меня зовут Света и я тимлид Mobile QA в Emerging Travel Group. В этой статье я простым языком расскажу про один из самых полезных и простых в использовании инструментов тестирования мобильных приложений — мистер Charles Proxy, и покажу на примерах некоторые самые полезные его функции.
Для начала разберёмся, кто вообще такой этот Charles.
Charles Proxy — это сниффер (sniffer – перехватчик) трафика, инструмент для анализа трафика, который позволяет отслеживать, записывать и анализировать сетевые запросы между устройствами и интернетом.
Charles — не единственный инструмент для анализа трафика, у него есть аналоги, например: WhireShark, Fiddler, Proхyman, mitmproxy. Все они в той или иной степени про одно, различие лишь в интерфейсе, поддержке разных платформ, и наборе функционала.
Установка и первичные настройки
Я распишу процесс для MacOS, однако для Windows он практически идентичен 🙂 Для использования Charles Proxy сначала нужно выполнить следующие шаги:
- Скачать и установить
- Дать Charles установить нужные настройки сети
- Настроить устройства и установить на них Charles SSL сертификат
Сначала скачайте Charles Proxy для MacOS.
После загрузки Charles установите его, открыв dmg и перетащив приложение в папку «Приложения».
Charles Proxy не бесплатен, но предоставляет 30-дневный trial из-за которого Charles будет работать только 30 минут и после этого его нужно перезагружать. Чтобы работа Charles стала полноценной нужно купить его лицензию. Лицензия бессрочная и распространяется на неограниченное количество устройств.
Настройка сети
Запустите Charles, при первом запуске появится попап о запросе разрешения на изменение сетевых настроек. Если он не появился, то нажмите Shift-Command-P и увидите следующее окно:
Нажмите “Grant Priveleges” и введите пароль от своего пользователя, если его запросят. После этого Charles начнёт показывать сетевые запросы, которые отправляет ваш Mac
Настройка реального устройства для работы с Charles Proxy
Для отслеживания трафика с реального устройства через Charles Proxy ваш Mac и устройство должны находиться в одной сети. При проксировании трафика от устройства в Charles Proxy необходимо установить Charles Root SSL Certificate для того чтобы можно было анализировать трафик. Для этого открываем Charles и в меню выбираем Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser
Теперь на устройстве открываем настройки WiFi -> Настройки выбранной сети -> Proxy Settings и вводим IP адрес и порт из окна чарльза:
И нажимаем “Save”.
Теперь нужно зайти в браузер и перейти на https://chls.pro/ssl и установить сертификат:
Нажимаем “Allow” и после этого видим попап о установленном configuration profile:
Теперь заходим в системное приложение Settings и там General -> Profile и нажимаем Charles Proxy CA.
Нажимаем “Install”, в появившемся окне ещё раз “Install” и после того как сертификат будет успешно установлен на экране должно быть примерно следующее:
И последнее! Теперь нужно зайти в приложение Settings, там в General -> About -> Certificate Trust Settings.
И здесь нужно включить свитчер Charles Proxy CA. На всплывающем окне нужно нажать “Continue”. Ура! Теперь установка сертификата завершена. Не волнуйтесь, эту настройку нужно делать только 1 раз на одном устройстве.
Краткий обзор интерфейса
Интерфейс Charles логичен и прост.
После того как мы настроили сертификат на устройстве, и включили запись запросов в Чарльзе, мы будем видеть абсолютно все запросы, которые отправляет приложение в сеть. Либо последовательно, либо структурно.
Как вы видите на скриншоте, слева у нас отображается список запросов, справа — информация о выбранном нами запросе. Остановить запись отправляемых запросов, чтобы не засорять список и не запутаться, можно нажав на красный кружочек
Далее, видим, что в верхней части экрана будет информация о request-части запросов, а в нижней — response-части.
Для примера я пока взяла рандомный запрос, далее рассмотрим подробнее на одном из приложений, с которыми я работаю.
При нажатии на один из запросов мы можем увидеть некоторые детали запроса, например, заголовки, тело и другое. Мы также можем увидеть ответ на данный запрос.
Однако, есть один нюанс: если запрос выполняется через HTTPS, мы не увидим никаких подробностей в этих запросах, по крайней мере пока не включим SSL-проксирование для определенного хоста или всех запросов, выполняемых приложением. После включения можно будет проверять содержимое этих запросов.
Как включить ssl-проксирование для интересного нам хоста?
Сharles > Proxy > SSL Proxying Settings…
Выбираем вкладку SSL Proxying, нажимаем на Add.
Вставляем интересующий нас хост (обратите внимание, только хост, без https и query-параметров), в моём случае это один из хостов приложения Dice и порт 443.
Теперь, когда я запущу на своём устройстве приложение Dice, я буду видеть все внутренности запросов с этого хоста
Теперь давайте перейдём непосредственно к нескольким функциям, которые сильно облегчают жизнь в разработке и тестировании.
Волшебные функции
1. Breakpoint
Breakpoint — дает возможность приостановить выполнение запроса или ответа на определенном этапе и проанализировать содержимое для того, чтобы можно было внести необходимые изменения и проверить как приложение или сервер отреагируют на внесённые нами изменения. Звучит, вероятно, слегка сложно, но на примере всё будет сильно понятнее.
Breakpoint можно использовать, чтобы изменить URL запроса на сервер, заменить один заголовок на другой, изменить содержимое тела запроса или ответа или добавить новый параметр в URL запроса.
Функция Breakpoint позволяет остановить выполнение на следующих этапах запроса или ответа:
- Запрос перед отправкой на сервер
- Ответ после получения от сервера
- Загрузка ресурсов (например, изображений или стилей) Рассмотрим на простом примере одного из приложений, с которыми я работаю: Пользователь забронировал себе трансфер. У нас есть экран подтверждения его бронирования, с данными, которые он указал. Что мы можем сделать с помощью брейкпоинта? Поменять практически любые данные, которые приходят в запросе для этого экрана, и посмотреть, как новые данные будут выглядеть. Для примера, давайте поменяем имя пользователя, который трансфер. Вот такой экран мы имеем на старте (все данные вымышленные):
Для начала, нам нужно понять, в каком запросе хранится информация об имени.
Теперь правой кнопкой мыши нажимаем на нужный нам запрос и в выпадающем меню выбираем Breakpoints.
Видим, что наш брейкпоинт добавлен, функция “отлова” сейчас включена, и при следующей отправке этого запроса он “перехватится”.
Так как нужная нам информация хранится именно в Response-части запроса, менять мы будем именно её. Request-часть не трогаем.
Итак, запускаем приложение ещё раз, и доходим до нужного нам запроса.
Когда приложение отправит запрос, на который мы поставили брейкпоинт, Чарльз уведомит нас об этом:
Сначала Чарльз всегда предлагает изменить Request-часть, но в ней нам не нужно ничего менять, поэтому нажимаем Execute, и дальше Чарльз предложит изменить Response-часть, как раз то что нам нужно. Вот там-то мы нажимаем “Edit response” и доходим до того самого места, где лежит имя нашего пользователя, и меняем его.
Поменяли, и теперь нажимаем Execute.
Важно! Время, на которое запрос перехватывается, ограничено, и нам нужно успеть поменять всё, что мы хотим поменять, примерно за 30 секунд (точное время зависит от того, какой таймаут поставили разработчики для отработки этого запроса), иначе запрос просто отработает без изменений.
Что мы видим на экране приложения теперь?
Ивана с уже новой фамилией
Таким образом можно менять любую информацию в теле и ответе запроса, можно менять значения хэдеров, можно менять коды ответов, например, если мы хотим посмотреть, как будет выглядеть ошибка в приложении, мы можем поменять код ответа с 200 на 500.
2. Rewrite
Функция Rewrite по смыслу похожа на Breakpoint за исключением того, что Rewrite позволяет изменять и перезаписывать запросы и ответы перед их отправкой и получением соответственно, а не ВО ВРЕМЯ, как Breakpoint.
Давайте снова рассмотрим на примере нашего путешественника, заказавшего себе трансфер. Мы снова хотим поменять ему имя, но только теперь не во время запроса, а заранее.
В меню Charles переходим в Tools > Rewrite > Add
Добавляем новый сет, задаём ему название, и теперь нужно прописать, где, что и на что мы хотим поменять.
В верхней части прописываем путь до нужного нам места, значение которого нам нужно изменить, в нижней части указываем что и на что меняем. Остановимся подробнее на втором:
В типе выбираем “Body”, так как нужный нам параметр лежит именно в теле ответа. Далее Response, потому что в теле ответа. И далее мы знаем, что на самом деле пользователя зовут Ivan Sidorov, а мы хотим назвать его по-другому. ОК.
Запускаем наше приложение, доходим до нужного экрана, и что мы видим:
И так теперь будет каждый раз, когда мы будем открывать этот экран, пока мы не отключим функцию Rewrite. И не надо каждый раз руками менять это, как в Breakpoints.
Кстати, в одном сете Rewrite менять можно не только одно значение, а сразу несколько. Достаточно в настройках сета нажать на кнопку Add, и добавить другие условия.
Rewrite также можно использовать для перенаправления трафика, достаточно вместо Body, там где мы выбрали Body, выбрать Host и настроить параметры под него.
Этот метод не лучше и не хуже. Breakpoint хорош, если нам нужно проверить несколько разных значений подряд. Rewrite хорош, если мы заранее знаем, на какое значение нам нужно подменить тот или иной параметр, и знаем, что он нам понадобится несколько раз, чтобы каждый раз не вбивать его руками в условиях ограниченного времени.
3. Map remote
Наконец, последняя в моём сегодняшнем списке, но не последний по важности, функция Map remote.
Map Remote позволяет перенаправить трафик с одного хоста на другой по настраиваемым правилам.
Вот житейский пример:
Приложение ходит за данными по адресу https://backend.service.com.
Команда бекенд-разработчиков делали задачу на фикс какого-нибудь бага, сделали ветку с изменениями этого бэкенда и хотят протестировать его до слива этой ветки в мастер, на всех. Адрес отдельного домена https://new-backend.service.com
Нам нужно протестировать как приложение будет работать с бэкендом с новыми изменениями от разработчиков.
В такой ситуации можно прийти к разработчикам приложения и попросить чтобы они сделали специальную версию приложения, которое будет ходить в новый бэкенд, но для этого нужно отвлекать разработчиков, ждать пока они это сделают.
С помощью Map Remote можно перенаправить трафик приложения без внесения изменений в код.
Итак, идём в Charles > Tools > Map Remote > Enable Map Remote > Add
Теперь, когда мы запустим наше приложение и посмотрим в список запросов, мы увидим, что запросы идут не в обычный хост, а в тот, на который мы сделали перенаправление. И всё, что мы видим в приложении теперь, происходит с учётом тех изменений, которые сделали господа бекендеры в своей ветке-хосте.
Подытожим
В этой статье мы рассмотрели три, на мой взгляд, основные и самые ходовые функции Charles Proxy. Конечно, это только малая часть того, что может этот славный товарищ.
Ещё раз подчеркну, что Charles является незаменимым помощником для разработчиков и тестировщиков как мобильных, так и вэб-приложений.
Это мощный и гибкий инструмент, который может значительно упростить процесс тестирования мобильных приложений и помочь выявлять ошибки и уязвимости в приложении. Использование Charles Proxy может сократить время, затраченное на тестирование, и улучшить качество мобильного приложения в целом.
Подробнее с функционалом можно ознакомиться на официальном сайте (у них, к слову, довольно понятная и подробная документация, если вы владеете английским).
Ну а я желаю вам успешного тестирования, наслаждайтесь этими и узнавайте другие функции этого замечательного инструмента
- снифферы
- тестирование мобильных приложений
- тестирование api
- Разработка мобильных приложений
- Тестирование веб-сервисов
- Тестирование мобильных приложений
Источник: habr.com
Charlie программа для windows
Всем привет, меня зовут Роман, я тестировщик в компании СберМегаМаркет.
Итак, по первой ссылке в гугле на запрос «Charles что такое», можно найти примерно следующее: Charles – один из самых распространенных инструментов для сниффинга трафика. В свою очередь, сниффинг трафика – это перехват и анализ сетевого трафика.
Нетрудно понять, что Charles – это что-то похожее на консоль разработчика в браузере, однако, с гораздо более широким спектром возможностей и приспособленным под большее количество платформ.
Особенно обширно Charles применяется в мобильном тестировании, ввиду того, что это один из самых простых и удобных способов посмотреть, уходят ли запросы с мобильного клиента, с какими параметрами они отправляются и как отвечает backend. Дальше в статье расскажу о Charles для начинающего QA.
Подключение Android-девайса к Charles
Для начала необходимо подружить телефон, с которого мы будем сниффить трафик, и Charles.
1. Скачиваем программу с официального сайта Charles.
Charles является платной программой, но есть и бесплатная версия, в которой Charles необходимо перезапускать каждые 30 минут и на некоторые действия накладывается 10-ти секундный Delay. В остальном отличий между платной и бесплатной версиями нет.
2. После успешной установки открываем программу и попадаем в главное окно.
3. Сверху жмем Help ~> SSL Proxying ~> Install Charles Root Certificate.
Таким образом мы установим корневой сертификат в систему, чтобы Charles мог работать с https-запросами.
4. После установки в списке сертификатов видим сертификат Charles.
5. Открываем свойства сертификата.
6. В открывшемся окне, в пункте «Доверие», проверяем, что везде указан параметр «Всегда доверять».
7. После этого можно закрыть все окна, связанные с сертификатами. Далее идем в Help ~> SSL Proxying ~> Install Root Certificate on a Mobile Device or Remote Browser.
Должно открыться окно с ip и портом, по которому можно достучаться до Charles.
Открывшееся окно не нужно закрывать. Оставляем открытым, пока не подключимся с телефона.
8. Берем в руки девайс и переходим в настройки Wi-Fi сети.
Чтобы все получилось, необходимо, чтобы компьютер и телефон были подключены к одному Wi-Fi, а vpn был выключен как на телефоне, так и на компьютере. Иначе есть вероятность того, что Charles не сможет обнаружить телефон.
9. В настройках Wi-Fi на телефоне заходим в настройки сети (на телефонах марки Samsung – шестеренка рядом с названием сети Wi-Fi, на телефонах марки Huawei необходимо нажать и удерживать палец на наименовании Wi-FI сети и выбрать «Изменить сеть»).
Далее в пункте «Прокси» выбираем параметр «Вручную».
В поле «Имя узла прокси» вводим ip: например, 192.168.1.64:
В поле «Порт прокси» указываем порт: например, 8888:
Должно получиться следующее:
Жмем кнопку «Сохранить»
После того, как сохранили настройки сети, в окне Charles должно появиться уведомление с просьбой разрешить или отклонить доступ к девайсу. Жмем «Разрешить»/«Allow».
10. Вводим в браузере телефона следующий URL: http://chls.pro/ssl или charlesproxy.com/getssl
После открытия страницы браузер должен начать скачивать сертификат для Charles.
Если браузер не показал, что начал скачивать файл, попробуйте открыть пункт «Загрузки»: некоторые браузеры осуществляют загрузку в фоновом режиме. Если же сертификат не загружается, значит, один из пунктов выше выполнен неправильно или не до конца.
11. После скачивания сертификата открываем настройки – на Samsung в поиске пишем «Установить из памяти» – Сертификат Wi-Fi – выбрать папку Download – Выбрать сертификат Charles и установить его. Для Huawei и других устройств можно просто нажать на сертификат и установить его, выбрав пункт «Установка для Wi-Fi».
12. Теперь можно смотреть сетевой трафик на мобильном девайсе. Если для тестирования дебажной сборки вашего приложения необходимо подключение к VPN, его нужно включить на компьютере. Ввиду того, что весь трафик с телефона проходит через Charles и запросы уходят так же через него, для отправки запроса будут использоваться настройки сети компьютера, а не телефона.
Если есть проблема с тем, что некоторые запросы не отображаются, необходимо сделать следующее: Proxy ~> SSL Proxying Settings ~> Во вкладке SSL Proxying и графе Include нажать Add ~> В поле Host и Port указать «*» и нажать «Ок».
Эта настройка принудительно включает проксирование трафика с любого хоста и порта.
Подключение iOS-девайса к Charles
Для подключения iOS-девайса к Charles необходимо проделать те же шаги, что и для Android-девайса, однако, в пункте 13 необходимо сделать доверенным установленный сертификат. Для этого необходимо перейти в Настройки – Основные – Об этом устройстве – Пролистать в самый низ экрана – Доверие сертификатам – Включить доверие для сертификата Charles.
Как и для чего мы в СберМегаМаркете используем Charles: на примере тестирования Android-приложения
Во-первых, смотреть трафик в мобильном приложении чуть сложнее, если сравнивать с веб-тестированием. Поэтому базово мы используем Charles как средство для просмотра трафика в мобильном клиенте.
Во-вторых, одна из самых полезных и незаменимых фич в Charles – это подмена ответа с backend. Это можно сделать с помощью нескольких инструментов, одним из которых являются Breakpoints. Их мы используем чаще всего.
В качестве примера можно рассмотреть наш недавний кейс с отображением заглушки экрана после авторизации, которая отображается в зависимости от того, по какой схеме доставки товара работает продавец. И отрисовка необходимых вкладок с заказами для каждого типа доставок или для обеих типов доставки вместе. Вся логика реализуется на бэкенде.
Во время авторизации используем ручку merchant/search, в ответе которой приходит атрибут startFlow типа string, который свидетельствует о том, должна ли отображаться заглушка и какие вкладки для заказов необходимо отображать.
На первый взгляд кажется, что при тестировании этого кейса не совсем целесообразно использовать подмену ответа через Charles, однако, несмотря на всю простоту кейса, есть ряд проблем.
Во-первых, на тестовом окружении нет необходимых аккаунтов, на которых можно проверить отображение заглушки.
Во-вторых, создать такой аккаунт на данный момент довольно сложно ввиду того, что разработка функционала регистрации таких аккаунтов еще не закончена.
В-третьих, атрибут, который приходит в ответе ручки, не хранится в БД, а формируется на бэке по отдельной логике.
Итак, как я уже писал выше, основной инструмент, который понадобится для подмены ответа – это Breakpoints (Точки останова). Если вкратце, Breakpoints срабатывают в тот момент, когда Charles «ловит» запрос к методу, для которого указана точка останова. Запрос не отправится до того момента, пока пользователь руками не отправит его. Сделано это для того, чтобы можно было отредактировать параметры запроса или итоговый ответ.
Итак, указываем в прокси телефона ip и порт Charles и открываем приложение. Логинимся в аккаунт, который работает по поддерживаемой нами схеме.
Логин прошел успешно и мы попадаем в личный кабинет продавца 
Открываем Charles и видим запросы, которые проходили за время логина в приложение.
Для того, чтобы отобразилась заглушка, необходимо в ручке merchant/search в поле startFlow прислать значение «true».
Для того, чтобы подменить это поле, необходимо поставить Breakpoint на нужный метод. Для этого в списке запросов находим нужный ~> открываем настройки ~> выбираем пункт Breakpoints.
После этого выходим из учетной записи и снова авторизуемся под теми же логином и паролем. Во время авторизации в личном кабинете в Charles появляется запрос, на который мы только что поставили точку останова.
В открывшемся окне нам доступно редактирование тела запроса, если перейти на вкладку «Edit request». В нашем случае менять тело запроса не нужно, поэтому просто отправляем запрос. После этого снова откроется окно в Charles, где уже можно редактировать ответ, который пришел от api. Для редактирования ответа необходимо перейти на вкладку «Edit response» и выбрать удобный формат отображения содержимого ответа.
Из условия мы помним, что для отображения заглушки значение в поле startFlow должны быть stub. Меняем «CD» на «stub» и жмем «execute».
После этого смотрим, что отображается в мобильном приложении и видим, что подмен данных произошел успешно. Теперь фронт показывает необходимую нам заглушку:
В этой статье я преимущественно рассказал, как законнектить Charles и мобильный девайс, описал проблемы, которые наиболее часто возникают при настройке связки телефон + Charles и постарался на примере продемонстрировать базовый уровень того, как мы в СберМегаМаркете используем Charles при тестировании мобильного приложения.
Возможности Charles гораздо обширнее, чем может показаться на первый взгляд. При желании можно создать несколько файлов с заранее сохраненными ответами от api, настроить Map Local (подмен ответа с бэкенда на ответ, сохраненный в локальном файле) и тестить огромные части фронта без фактического взаимодействия с реальным бэкэндом. Без прохождения процессов по созданию необходимых тестовых данных и соответственно без ощутимых временных затрат. Однако, об этом я хочу поговорить в следующей статье.
Источник: windowser.ru