책 발췌 – 크롬 DevTools by Gayathri Mohan

출처: 2022년, Full Stack Testing - A Practical Guide for Delivering High Quality Software by Gayathri Mohan, 2장 Manual Exploratory Testing

  

웹 UI 테스팅에 활용할 수 있는 도구인 Chrome DevTools에 대해 소개한다.

 

---

 

Chrome DevTools

Chrome DevTools는 스위스 군용 칼처럼 다용도인데 탐색적 테스트, 보안 테스트, 성능 테스트 등을 지원하는 다수의 기능을 함께 제공한다.

 

DevTools를 열기 위해 크롬 브라우저 페이지에서 마우스 오른쪽 버튼으로 검사(Inspect) 옵션을 선택하거나 또는 단축키를 사용할 수 있다(macOS에서는 Cmd-Option-C 또는 Cmd-Option-I, 윈도우에서는 Shift-Ctrl-J)

 

DevTools에서 다음과 같은 다양한 항목을 탐색할 수 있다.

 

 

페이지 에러(Page errors)

그림 2-13에서 볼 수 있듯이 Console 탭은 웹 페이지의 에러를 표시한다. 일반적으로 웹 페이지에 에러가 있으면 안되므로 테스트 애플리케이션의 새 페이지가 나올 때마다 이 탭을 확인하는 것이 좋다. 이 탭에 보고된 에러가 웹 페이지에서 발견된 이슈를 디버깅하는 데도 도움이 될 수 있다. 예를 들어 이미지가 누락된 것이 보인다면 Console 탭을 확인하고 여기에 보고된 에러를 버그 보고서에 넣을 수 있다.

그림 2-13. 웹 페이지의 에러를 표시하는 Console 탭

 

 

페이지에서 발생한 요청 수(Number of requests made from a page)

때로는 애플리케이션 로직의 오류로 인해 웹 페이지에서 원치 않는 API 호출이 많이 발생하여 속도가 느려질 수 있다. Network 탭에서 이러한 문제를 파악할 수 있다(왼쪽 하단에 해당 페이지에서 전송된 총 요청 수가 표시됨).

 

 

최초 사용자 동작(First-time user behavior)

동일한 애플리케이션을 반복적으로 테스트하면 일부 리소스(예: 웹 페이지의 이미지)가 캐시로 저장된다. 따라서 개발 중에 이미지가 변경되면 이것이 눈에 띄지 않을 수 있다. Network 탭에서 ‘캐시 비활성화(Disable cache)' 체크박스를 사용해 캐시를 청소하고 다시 페이지 보기를 한다. 이 기능은 최종 사용자가 처음 애플리케이션을 사용할 때의 사용자 경험을 탐색하는 데 도움이 된다.

 

 

느린 네트워크에서의 UI 동작

네트워크 대역폭이 한정된 최종 사용자의 경험을 탐색하기 위해 Network 탭에서 네트워크를 제한하고 UI 동작을 관찰할 수 있다. 아래 그림에서 볼 수 있듯이 "캐시 비활성화" 체크박스 옆에 2G, 3G 및 4G 네트워크 조건을 시뮬레이션할 수 있는 드롭다운이 있다. 이 드롭다운에서 하나의 옵션을 선택하고, 브라우저 캐시를 지우고, 페이지를 다시 로드한다. DevTools는 그림 2-14와 같이 애플리케이션이 지정된 대역폭에서 점차적으로 로드되는 방식을 설명하는 일련의 스크린샷을 표시한다. 프로그레시브 웹 앱은 오프라인 상태에서도 작동하며, 네트워크 조절 드롭다운에는 이 동작을 확인하기 위해 오프라인으로 전환하는 옵션도 포함되어 있다.

 

그림 2-14. Chrome DevTools를 사용한 네트워크 조절

 

 

UI 및 API 통합

Network 탭은 UI에서 웹 서비스에 대한 호출을 포함하여 웹 페이지의 모든 네트워크 호출을 캡처한다. 그림 2-15에서 볼 수 있듯이 요청 및 응답 헤더(인증 토큰 포함), 쿼리 패러미터, 응답, 매 요청에 대한 기타 유용한 정보를 기록한다.

그림 2-15. Network 탭의 요청 및 응답 세부정보

 

이 요청/응답 정보는 UI/API 통합을 탐색하는 데 사용될 수 있다. 예를 들어 UI가 최종 사용자가 입력한대로 정확한 쿼리 패러미터를 올바른 엔드포인트에 전달하는지 확인할 수 있다. 또한 서비스로부터 받은 다양한 응답에 대한 UI 동작을 관찰할 수 있다. 예를 들어, 항목 가용성 API가 404 상태 코드를 반환하면 UI는 '항목을 사용할 수 없음'이라는 에러 메시지를 보여야 한다.

 

 

서비스 다운 동작

요청 실패(request failure) 테스트 케이스를 시뮬레이션해야 하는 경우 Network 탭에서 특정 요청을 차단하고 UI 동작을 관찰할 수 있다. 예를 들어, Google 브라우저에서 “exploratory testing”으로 검색한 결과에서 Network 탭의 첫 번째 이미지 로딩 URL을 찾아 마우스 오른쪽 버튼을 클릭하고 메뉴에서 '요청 URL 차단(Block Request URL)'을 선택한 다음 페이지를 다시 로드한다. 해당 이미지가 UI에 로드되지 않고 차단된다. 이 기능을 사용하면 실제로 서비스를 중단하지 않고 "서비스 중단" 시나리오를 테스트할 수 있다.

 

 

쿠키(Cookies)

쿠키는 주로 애플리케이션 세션 정보를 저장하는 데 사용된다. Application 탭에는 그림 2-16과 같이 저장된 쿠키 목록과 세부 정보가 표시된다. 테스트하는 동안 여기에서 쿠키 값을 편집하거나 삭제하고 애플리케이션의 동작을 관찰할 수 있다.

그림 2-16. 쿠키는 Application 탭에서 편집하거나 삭제할 수 있음