grep

QA

Charles Proxy 소개

Joseph여기어때

2022년 6월 21일

원문에서 보기 ↗

안녕하세요~

여기어때컴퍼니 QA팀 요셉입니다.

이번 블로그는 저희 팀에서 사용하고 있는 Charles Proxy Tool이 무엇이고 어떻게 사용하는지 설명을 하겠습니다~

우리는 왜? Charles를 사용해야 하고 여러 기업들이 이 Tool을 사용할까요??

이유는 바로

모든 네트워킹은 Charles를 통해 기록되고 그 기록된 요청값과 응답값은 수시로 변경하고 테스트가 가능하기 때문입니다.

Charlse Proxy Tool의 Key Features 입니다.

SSL Proxying : SSL의 요청과 응답을 볼 수 있다.

Bandwidth Throttling : Latency를 줘 Internet 연결을 느리게 할 수 있다.

AJAX Debugging : XML과 JSON의 요청과 응답을 트리 혹은 텍스트로 볼 수 있다.

Back-end의 변화를 테스트하기 위해 요청을 반복할 수 있다.

다른 Inputs값을 테스트하기 위해 요청을 수정할 수 있다.

Breakpoint되는 부분에 요청값과 응답값을 변경하여 테스트 할 수 있다.

보통 블랙박스 테스팅을 하다 보면 우리는 버튼을 눌렀을 때 어떤 API가 호출/응답 되는지 알 수 없습니다. 그러나 Charles를 사용하면 기록된 API를 눈으로 확인할 수 있고 요청/응답을 수정하여 Front에서 어떤 결과가 나오는지 확인할 수 있습니다.

자 그러면 이제부터 Charles의 설치부터 사용까지 살펴보도록 하겠습니다~!!

Contents

1. Charles 설치

2. iOS / Android 휴대폰과 연결

3. Charles 대표 기능

1. Charles 설치

Charles의 설치는 https://www.charlesproxy.com/download/ 에서 Windows, MacOS, Linux64의 운영체체에 맞게 다운받으시면 됩니다. 라이선스를 구매하지 않을 경우 30일 동안 무료로 사용 가능합니다. 여기어때컴퍼니 기술총괄에선 필요하신 분은 라이선스 지급 가능합니다~^^

설치가 완료 되었으면 이제 인증서를 설치해야 합니다. 인증서 설치는 Mac과 Windows에 따라 방법이 조금 차이가 있습니다.

  1. 인증서 설치

  1. Charles 설정

3.Proxy 메뉴에서 MacOS Proxy 클릭하여 체크

  1. Proxy 메뉴에서 Proxy Settings 클릭 후 포트 설정(8888)

  1. Help 메뉴에서 Local IP Address의 노트북/PC의 IP 주소 확인

이로써 Charles의 설치는 끝났습니다. 다음은 iOS/Android 휴대폰을 연결해보겠습니다~

2. iOS / Android 휴대폰 연결

iOS와 Android 디바이스에 연결하여 네트워크의 기록을 볼 수 있도록 하기 위해 두 가지를 기억하고 있어야 합니다. 바로 4. Proxy Setting에서 입력한 포트 번호와 5. Local IP Address를 기억해야 합니다. 이 두 가지로 디바이스에서 Proxy 설정을 하여 연결된 네트워크의 기록을 볼 수 있습니다.

  1. 노트북/PC와 동일한 Wi-Fi를 디바이스에 연결 후 위에서 Wi-Fi의 프록시 설정에 말한 포트 번호와 Local IP Address를 수동으로 저장

  1. 사파리 혹은 크롬 웹브라우저에서 https://chls.pro/ssl 입력 후 검색하여 프로파일 다운로드 허용

  1. 디바이스의 설정 > 일반에서 프로파일 설치

  1. 디바이스 설정에서 일반 > 정보로 들어가서 3번에서 설치한 인증서 신뢰 설정

  1. Charles에 iOS 디바이스의 통신 내역이 기록되면 성공~!!!!!

휴~~~ 여기까지 잘 따라오셨나요?? 잠시 차 한잔의 여유를 가진 뒤 다시 시작해보겠습니다~!!!

위처럼 디바이스가 연결되면 노트북/PC와 디바이스까지 통신 내역이 Charles Proxy Tool에 기록되게 됩니다.

이제 Charles Proxy로 어떻게 테스트를 할 수 있는지 주요 기능들을 설명하도록 하겠습니다.

3. Charles 대표 기능

처음 서론에서 이야기했듯이 Charles를 이용해 요청값과 응답값을 변경하여 테스트를 할 수도 있고 네트워크 Latency를 설정하여 응답을 지연 시킬 수도 있습니다.

Throttle는 말 그대로 조절하는 것을 뜻합니다. 무엇을 조절하느냐면 바로 네트워크 속도와 응답 지연 상황을 조절할 수 있습니다.

Throttle Preset은 Wi-Fi와 통신상태를 조절할 수 있습니다.

네트워크의 느린 상황을 재현하여 API들이 통신 할 때 Client에 어떤 결과를 보여주는지 테스트 가능합니다.

Round-trip Latency는 응답 지연 상황의 조절이 가능합니다.

위 이미지처럼 5000ms(5초)의 Latency를 줘 API들이 통신 할 때 Client에 규약된 타임아웃이 지나면 어떤 결과를 보여주는지 테스트 할 수 있습니다.

API 혹은 서버 통신이 요청 온 순간부터 통신을 막을 수 있습니다. 그 후 요청 값을 수정하여 실행하기도 하고 응답값을 수정하여 실행하기도 합니다.

Breaking Point로 설정된 API 혹은 서버 통신이 요청이 오면 요청값을 Edit 할 수 있는 화면이 출력됩니다.

위 화면에서 Edit Request를 눌러 Quary param 등 수정을 할 수 있고 Execute를 클릭하면 수정한 요청값으로 응답을 받게 되고 응답도 실행하게 되면 Client에 수정된 내용으로 반영될 수 있습니다.

위 이미지 처럼 “searchKeyword”: “베르나르” 값을 “집"으로 변경하여 요청한 내용입니다. 검색 입력필드엔 베르나르로 찍혀있지만 Load된 리스트엔 변경한 “집"과 관련된 리스트가 Load되게 됩니다.

응답값도 마찬가지 입니다. 실제 Load되어야 할 리스트를 모두 삭제하여 리스트가 없는 Default 상태를 테스트할 수 있습니다.

위 이미지처럼 실제 DB엔 검색된 내용이 있지만 응답값을 변경하여 Client에서 검색결과 없음을 테스트 할 수 있었습니다.

Map Remote의 경우 Protocol이나 Host 정보, Path, Query를 바꿔서 Client에 보낼 수 있습니다. 예를 들어 Protocol이 http로 되어있을 때 https로 변경하여 보낼 수 있습니다.

서버에서 준 JSON 형태의 응답값을 수정하고 JSON 파일로 첨부하여 Client에서 결과를 테스트 할 수 있습니다. Client 디버깅 시 응답값을 하나하나 바꿔가며 이슈의 원인을 파악할 때 사용할 수 있습니다. 또한 테스트 데이터 혹은 API가 개발 배포 되지 않은 상태에서 Client(client가 선 개발완료 및 배포된 상태일 경우)의 UI 테스트 시 사용 할 수 있습니다.

위 이미지처럼 JSON 파일에 검색 결과를 모두 삭제하여 API 호출할 때 JSON 파일대로 응답받도록 하여 테스트 할 수 있습니다.

그 이외에 Rewrite, Compose등 다양한 기능을 제공하고 Postman과 같이 API 테스트에도 쉽게 사용이 가능합니다.

긴 글 읽어주셔서 감사합니다.

Charles Proxy Tool에 대해서 설치에서부터 사용법, 대표 기능까지 모두 알아보았습니다. 사실 Charles는 QA팀 뿐만 아니라 개발팀에도 유용한 툴입니다. 그리고 QA팀, 개발팀이 같이 사용해야 더 좋은 효과를 줄 수 있다고 생각합니다. 같이 하면 더 좋은 효과~!!!

마지막으로~

여기어때컴퍼니의 미션인 “좋은 곳에서 행복한 시간을" 처럼 QA팀도 여기어때 서비스의 품질을 높여 User가 행복한 시간을 보내실 수 있도록 노력하고 있습니다. Charles Proxy Tool도 보다 다양한 테스트와 효율적이고 효과적으로 품질을 높일 수 있는 하나의 노력이라고 생각합니다.

또 다른 노력을 위해 저희는 그 방법을 끝없이 찾을 것 입니다. 쭈~욱~!!!!!

References List

  1. https://www.charlesproxy.com/documentation/