크롬의 새로운 기능 Override Contents

최근 크롬 브라우저에 추가된기능인 Override Contents는 QA 엔지니어에게 매우 유용한 도구라고 생각합니다! 이 기능을 통해 웹 페이지의 콘텐츠를 쉽게 수정하고, 이를 QA 테스트에 적용할 수 있는 방법에 대해 알아보겠습니다 !!

1. Override Contents 기능이란?

Override Contents는 크롬 개발자 도구(DevTools)를 사용하여 웹 페이지의 Network Requests 파일을 수정할 수 있게 해주는 기능입니다. 기존의 '로컬 수정(Local Overrides)' 기능과 유사하지만, 더 정교하고 직관적인 방법으로 특정 콘텐츠를 바꿀 수 있다는 점에서 다릅니다. 이 기능은 특히 콘텐츠나 스타일, 스크립트의 변경을 테스트하거나 A/B 테스트를 시뮬레이션하는 데 유용합니다.

2. Override Contents의 사용 방법

Override Contents 기능을 이용하여 API 값을 바꿔 결과를 확인하는 방법을 알아 보겠습니다.

이 서버에 저장된 성별을 여성으로 변경하는 테스트를 시도해봅시다.
먼저 Devetools 에서 해당 Network Requests 를 찾아줍니다.

찾은 후 해당 requests을 우클릭하여 override content를 선택합니다.(먼저 Sources -> overrides 탭에 폴더를 생성해주셔야 합니다.)

그후 원하는 값을 변경한 후, 저장(ctrl + s) -> 웹 새로고침을 실행할경우

위와같이 쉽게 네트워크 조작이 가능해집니다.

3. 기존 HTML 수정 방식과의 차별점

기존에 QA 엔지니어들이 웹 페이지의 HTML이나 CSS를 수정하려면 다음과 같은 방법을 주로 사용했습니다:

• Developer Tools를 이용한 일시적 수정: 페이지를 새로 고침하면 수정된 내용이 사라집니다.
• 서버 측 코드를 수정: 서버에서 개발자들이 직접 수정하여 테스트해야 했습니다. 상당히 시간이 오래걸리고 이 과정에서 커뮤니케이션 비용이 발생하게 됩니다.

Override Contents는 이러한 문제를 해결해줍니다. 이 기능을 사용하면, QA 엔지니어는 로컬 환경에서 파일을 수정하여 테스트할 수 있으며, 수정된 내용은 브라우저에 영구적으로 저장됩니다(페이지를 새로고침하더라도 유지됨). 이는 버그 수정 확인, 새로운 디자인 테스트 등에 매우 유용합니다.

4. QA 테스트에의 적용

Override Contents 기능을 QA 작업에 적용하는 몇 가지 방법은 다음과 같습니다:

• 버그 재현 및 수정 테스트: 발견된 버그가 특정 코드나 스타일의 문제에서 발생한 경우, 해당 파일을 오버라이드하여 즉시 수정하고 결과를 확인할 수 있습니다.
• 다양한 시나리오 테스트: 사용자에게 특정 조건에서 다른 콘텐츠를 제공하는 시나리오를 테스트할 때, 이를 쉽게 시뮬레이션할 수 있습니다.

크롬의 Override Contents 기능은 QA 엔지니어에게 시간과, 커뮤니케이션 비용을 줄여주는 아주 좋은 도구입니다. 이게 드디어 나왔네요 ㅠㅠ (약 3개월 지나긴했지만 ㅎㅎ) 이 기능을 통해 웹 페이지의 다양한 요소를 실시간으로 수정하고, 다양한 테스트 시나리오를 손쉽게 구현할 수 있습니다. 기존의 HTML 수정 방식과 달리, 이 기능은 수정된 내용을 브라우저에 영구적으로 유지가능하며, QA 작업의 효율성을 크게 향상 시킬수 있습니다!

Happy Testing!