UI 테스트를 위해 HTTP 상태 코드 변경하기
이 미니 블로그에서는 Unsplash 앱이 검색 문제를 만났을 때 어떻게 동작하는지 확인하기 위해 백엔드 오류를 시뮬레이션합니다.
1. 시작하기
다양한 사용자 시나리오를 테스트하려고 백엔드 개발자에게 가짜 상태 코드를 요청하는 대신, Proxyman이라는 디버깅 도구를 사용할 수 있습니다.
기본적으로 Proxyman은 모바일 및 웹 앱을 디버깅할 때 유용한 도구입니다. 개발자가 요청과 응답을 실시간으로 수정할 수 있게 해 주기 때문입니다.
제 iOS 기기에 Proxyman 인증서를 설정하면, 기기에서 오가는 모든 요청이 Remote devices 섹션에 캡처됩니다.
URL을 더블 클릭하면 응답의 내용을 볼 수 있습니다. 원본 상태 코드는 200 OK입니다.
그다음 요청과 응답을 모니터링하도록 Map Local 도구를 활성화합니다.
이어서 Map Local 도구 창이 나타나며, 이제 매핑 설정을 시작할 수 있습니다.
2. HTTP 응답의 상태 코드 수정하기
원본 응답의 본문을 수정하는 것과 마찬가지로, 에디터에서 상태 코드를 변경할 수 있습니다.
File Path에는 원본 응답의 현재 위치가 표시됩니다(보통 데스크톱에 있습니다).
파일을 클릭해 즐겨 쓰는 에디터로 엽니다.
... 그다음 상태 코드를 404로 변경합니다. 기기가 서버와 통신은 했지만 서버가 요청한 대상을 찾지 못한 상황을 시뮬레이션하는 것입니다.
3. 매칭 규칙 만들기
다음 단계는 Proxyman이 우리 도메인을 캡처할 수 있도록 규칙을 정의하는 것입니다. 이렇게 하면 규칙과 일치하는 모든 API 호출을 감지하고, 서버 대신 로컬 파일에 설정한 상태 코드를 제공합니다.
매핑할 도메인을 입력합니다.
... 그다음 수정한 응답을 선택하고 Done을 누릅니다.
그 API를 다시 호출하면 Proxyman이 해당 요청을 캡처하고, 로컬 디렉터리에 있는 수정된 응답으로 매핑합니다. 이제 받은 응답의 Header를 클릭하면, 응답이 서버가 아니라 로컬 파일에서 제공되고 있음을 나타내는 행이 하나 추가된 것을 볼 수 있습니다.
그리고 Unsplash 앱은 검색 결과 이미지를 표시하는 대신 검은 화면을 보여줍니다.
다른 백엔드 오류에 대한 UI를 테스트하고 싶다면 상태 코드를 다시 변경하기만 하면 됩니다.
4. 다음 단계
상태 코드 수정은 모바일 앱을 개발하고 테스트할 때 유용합니다. Map Local을 사용하면 개발자나 테스터가 백엔드 팀의 도움 없이도 프런트엔드 또는 백엔드 오류를 쉽게 시뮬레이션하고, 여러 시나리오에서 앱이 어떻게 동작하는지 확인할 수 있습니다.
응답이 지나가는 동안 한 번만 빠르게 바꾸려면 Breakpoint를 사용합니다. 같은 모킹(Mock) 응답을 여러 번 반환해야 한다면 Map Local을 사용합니다. 404에서 멈추지 말고, 로그인 문제에는 401 또는 403을, 요청 제한에는 429를, 서버 장애에는 500을 시도해 보며, 앱이 사용자에게 유용한 다음 단계를 안내하는지 확인합니다.
다음 블로그 글에서는 사이트의 개발 버전이 있고, 일부 요청은 개발 버전에서 제공하면서 프로덕션 사이트를 둘러보려는 경우 Map Remote 기능을 사용하는 방법을 알아보겠습니다. 계속 지켜봐 주시고, 다음 글에서 뵙겠습니다!
Proxyman은 iOS 기기, iOS 시뮬레이터, Android 기기에서 앱과 도메인의 HTTP/HTTPS 요청을 캡처하고 확인할 수 있게 해 주는 고성능 macOS 앱입니다.
https://proxyman.com에서 다운로드할 수 있습니다.
