테스트가 중요합니다. 빌드한 항목(전체 사이트 또는 애플리케이션, 새 기능 등)을 사용자에게 제공하기 전에 예상대로 작동하는지 확인하는 것이 중요합니다. 하지만 여전히 많은 테스트가 수동으로 진행되며 동료나 테스트 엔지니어가 새 기능을 확인하고 문제를 신고하도록 요청받습니다.
이러한 수동 테스트를 통해 특정 유형의 문제가 표시될 수 있지만, 더 많은 문제가 누락될 수 있습니다. 테스트를 진행하는 담당자가 특이 사례를 놓치거나 앱을 통한 특정 여정을 완전히 테스트하지 못할 수 있습니다. 또한 코드를 작성할 때 가지고 있던 모든 정보가 담당자에게 있는 것은 아니며, 코드를 포함하여 방지하려는 특정 문제에 대해서도 알지 못합니다. 그리고 시간이 지남에 따라 새로운 기능이 추가될 때마다 이전에 작동했던 모든 항목을 다시 테스트하여 변경사항으로 인해 문제가 발생하지 않았는지 확인할까요?
Chrome팀은 이러한 이유로 자동 테스트의 중요성을 믿습니다. 기능의 중단을 안정적이고 반복적으로 테스트하는 테스트 모음을 사용하면 지금과 향후 개발 후에도 모든 세부사항이 테스트될 수 있습니다. 기능 개발자로서 갖춘 지식이 테스트에 캡슐화됩니다.
하지만 자동 테스트는 쉽지 않을 수 있습니다. 이러한 이유로 Chrome팀에서는 최대한 원활하게 전환할 수 있도록 다음과 같은 도구와 안내를 제공합니다.
인형 조종자
Puppeteer는 Node.js 라이브러리입니다. 사용하기 쉬운 고급 API를 사용하여 Chrome, Chromium, Firefox를 자동화할 수 있습니다.
이 API는 원래 Chrome DevTools 프로토콜을 기반으로 했지만, 올해 말까지 새로운 고급 WebDriver BiDi 프로토콜을 Puppeteer의 기반으로 만드는 것이 목표입니다. 모든 주요 브라우저 공급업체가 공동으로 만든 WebDriver BiDi는 많은 자동화 사용 사례를 단순화하고 많은 새로운 사용 사례를 지원하며 교차 브라우저 호환성을 제공합니다.
에서 WebDriver BiDi에 대해 자세히 알아보세요.하지만 기다릴 필요는 없습니다. Puppeteer의 API는 이미 많은 자동화 사용 사례를 지원하며, 이는 WebDriver BiDi를 통해서만 개선될 것입니다. 테스트, 시각적 크롤링, 프로세스 자동화 등 페이지 상호작용, 요청 가로채기, 스크린샷과 같은 기능으로 할 수 있는 일이 많습니다. WebGPU 및 WebGL을 사용하여 클라우드에서 웹 AI 모델을 테스트하는 데도 사용할 수 있습니다.
Puppeteer는 본격적인 브라우저 테스트 프레임워크인 WebdriverIO 및 개인 정보 보호 샌드박스 분석 도구와 같은 도구에서도 사용되므로 사이트에서 쿠키 및 사용자 데이터 사용량을 더 잘 이해할 수 있습니다.
Chrome 헤드리스
Puppeteer를 사용하여 Chrome을 자동화한 적이 있다면 테스트가 실행될 때 브라우저 창이 표시되지 않는 것을 발견했을 수 있습니다. 기본적으로 Puppeteer는 헤드리스 모드로 Chrome을 시작합니다. 즉, 자동화가 실행되는 동안 실제 브라우저 창이 없습니다.
하지만 Chrome의 헤드리스 모드는 창이 없는 Chrome이 아니라 실제로는 완전히 별도로 유지관리되는 Chrome 버전이라는 사실을 알고 계셨나요? 오랫동안 이로 인해 혼란이 야기되고 버그와 문제를 추적하기가 어려웠습니다.
Chrome 112부터 일반 Chrome과 동일한 코드베이스를 기반으로 하는 새로운 헤드리스 모드가 도입되었습니다. 이렇게 하면 이전의 혼란을 줄이는 데 그치지 않고 자동화 중에 확장 프로그램을 사용하는 등 이전에는 불가능했던 기능을 사용할 수 있습니다.
Puppeteer는 버전 22부터 이 새로운 헤드리스 모드를 기본값으로 사용하고 있습니다. 다른 자동화 솔루션을 통해 Chrome Headless를 사용하는 경우 --headless=new 명령줄 스위치를 사용하여 새 헤드리스 모드를 강제 적용할 수 있습니다.
Chrome의 새 헤드리스 모드는 더 강력하지만 이전 헤드리스 모드만큼 가볍지는 않습니다. 리소스가 매우 부족하거나 Chrome의 일부 기능만 필요한 경우 이전 헤드리스 모드를 chrome-headless-shell로 사용할 수 있습니다.
Chrome for Testing
테스트할 때는 테스트 환경(운영체제, 브라우저, 브라우저 버전)을 세부적으로 제어해야 합니다. Chrome의 자동 업데이트를 사용하면 쉽지 않을 수 있습니다.
이러한 이유로 Google에서는 자동 업데이트가 없는 Chrome 버전인 테스트용 Chrome을 만들었습니다. 이 버전은 모든 주요 운영체제용으로 모든 Chrome 버전과 함께 출시되며 버전별 보관 파일에서 액세스할 수 있습니다. 이렇게 하면 별도의 조치 없이 특정 버전의 Chrome에서 자동화 워크플로를 실행할 수 있습니다.
Chrome for Testing 사용 가능 여부 대시보드, JSON API 또는 Puppeteer 명령줄 유틸리티에서 Chrome for Testing 바이너리에 액세스할 수 있습니다.
Puppeteer, Chrome의 업데이트된 헤드리스 모드, 테스트용 Chrome은 브라우저 자동화 및 테스트 실행을 최대한 원활하게 만들기 위해 Google팀에서 현재 진행 중인 작업의 일부에 불과합니다. DevTools 레코더와 같은 관련 도구는 테스트를 만드는 데 도움이 됩니다. Chrome에서 사용자 흐름을 녹화하고 Puppeteer에서 재생합니다.
web.dev에서 테스트 알아보기
이 게시물에서 다루는 도구는 자동 테스트를 개선하는 데 도움이 됩니다. 하지만 이제 막 시작하는 단계라면 이해하고 배워야 할 내용이 많아 보일 수 있습니다. 이에 따라 10개 모듈로 구성된 새로운 과정인 web.dev에서 테스트 알아보기를 만들었습니다. 이 심층 과정에서는 테스트의 핵심 개념, 테스트 실행 위치 및 방법, 테스트 유형, 실제로 테스트할 항목을 다룹니다. 테스트 여정을 시작하는 데 좋은 출발점입니다. 기본사항을 숙지했다면 언제든지 테스트 자동화 모음으로 이동하여 더 구체적인 테스트 질문에 대한 심층 분석과 실용적인 팁을 확인하세요.