자주 묻는 질문(FAQ)

현재 교차 브라우저 지원은 어떤 상태인가요?

Firefox 공식 지원은 현재 실험 단계에 있습니다. Mozilla와 지속적인 협력은 일반적인 엔드 투 엔드 테스트 사용 사례를 지원하는 것을 목표로 하며, 이러한 사용 사례에서는 개발자가 교차 브라우저 범위를 예상합니다. Puppeteer팀은 Firefox 지원을 안정화하고 누락된 API를 파악하기 위해 사용자의 의견이 필요합니다.

Puppeteer v2.1.0부터는 puppeteer.launch({product: 'firefox'})를 지정하여 추가 맞춤 패치 없이 Firefox Nightly에서 Puppeteer 스크립트를 실행할 수
있습니다. 이전 실험에는 Firefox 패치 버전이 필요했지만 현재 접근 방식은 '스톡' Firefox에서 작동합니다.

Google은 Safari와 같은 브라우저에 Puppeteer 지원을 제공하기 위해 다른 브라우저 공급업체와 계속 협력하고 있습니다. 여기에는 Chrome에서 사용하는 비표준 DevTools 프로토콜에 의존하는 대신 교차 브라우저 명령어를 실행하기 위한 표준 탐색이 포함됩니다.

Puppeteer의 목표와 원칙은 무엇인가요?

이 프로젝트의 목표는 다음과 같습니다.

  • DevTools 프로토콜의 기능을 강조하는 슬림한 표준 라이브러리를 제공합니다.
  • 유사한 테스트 라이브러리를 위한 참조 구현을 제공합니다. 결국 이러한 다른 프레임워크는 Puppeteer를 기본 레이어로 채택할 수 있습니다.
  • 헤드리스/자동화된 브라우저 테스트 채택을 늘립니다.
  • 새로운 DevTools 프로토콜 기능을 dogfood하고 버그를 포착하는 데 도움을 주세요.
  • 자동화된 브라우저 테스트의 고충에 대해 자세히 알아보고 격차를 해소하세요.

Google은 제품 관련 의사결정을 돕기 위해 다음과 같이 Chromium 원칙을 적용합니다.

  • 속도: Puppeteer는 자동화된 페이지에 비해 성능 오버헤드가 거의 없습니다.
  • 보안: Puppeteer는 Chromium과 관련하여 프로세스 외부에서 작동하므로 악성일 가능성이 있는 페이지를 안전하게 자동화할 수 있습니다.
  • 안정성: Puppeteer는 불안정하거나 메모리를 누출해서는 안 됩니다.
  • 단순성: Puppeteer는 사용, 이해, 디버깅이 쉬운 상위 수준 API를 제공합니다.

Puppeteer가 Selenium/WebDriver를 대체하나요?

아니요. 두 프로젝트 모두 중요한 이유는 매우 다릅니다.

  • Selenium/WebDriver는 교차 브라우저 자동화에 중점을 둡니다. 가치 제안은 모든 주요 브라우저에서 작동하는 단일 표준 API입니다.
  • Puppeteer는 Chromium에 초점을 맞추고 있습니다. 가치 제안은 더 풍부한 기능과 더 높은 안정성입니다.

즉, 커뮤니티 기반의 jest-puppeteer와 같이 Puppeteer를 사용하여 Chromium에 대한 테스트를 실행할 수 있습니다. 이것이 유일한 테스트 솔루션은 아닐 수도 있지만 WebDriver와 비교하여 몇 가지 좋은 점이 있습니다.

  • Puppeteer는 설정이 필요하지 않으며, 가장 잘 작동하는 Chromium 버전과 함께 제공됩니다. 테스트를 아예 사용하지 않는 것보다는 몇 번의 테스트로 Chromium만 실행하는 것이 좋습니다.
  • Puppeteer는 이벤트 기반 아키텍처를 사용하므로 잠재적인 결함을 상당 부분 제거할 수 있습니다. Puppeteer 스크립트에서는 잘못된 'sleep(1000)' 호출이 필요하지 않습니다.
  • Puppeteer는 기본적으로 헤드리스로 실행되므로 빠르게 실행됩니다. 또한 Puppeteer v1.5.0은 브라우저 컨텍스트를 노출하므로 테스트 실행을 효율적으로 병렬 처리할 수 있습니다.
  • Puppeteer는 디버깅 측면에서 빛을 발합니다. 'headless' 비트를 false로 바꾸고 'slowMo'를 추가하면 브라우저가 어떤 작업을 하는지 확인할 수 있습니다. Chrome DevTools를 열어 테스트 환경을 검사할 수도 있습니다.

왜 Chromium v.YYY에서는 Puppeteer v.XXX가 작동하지 않나요?

Puppeteer는 Chromium에서 분할할 수 없는 항목으로 표시됩니다. 각 Puppeteer 버전은 호환이 보장되는 유일한 버전인 특정 버전의 Chromium을 번들로 제공합니다.

이것은 인위적인 제약 조건이 아닙니다. Puppeteer에 관한 많은 작업은 실제로 Chromium 저장소에서 이루어지고 있습니다. 일반적인 스토리는 다음과 같습니다.

  1. Puppeteer 버그가 신고됨
  2. 이는 DevTools 프로토콜의 문제이므로 Chromium에서 수정합니다.
  3. 업스트림 수정사항이 제공되면 업데이트된 Chromium을 Puppeteer로 출시합니다.

하지만 Chromium이 아닌 공식 Google Chrome에서 Puppeteer를 사용하는 것이 바람직한 경우가 많습니다. 이 작업을 수행하려면 Chrome 버전에 해당하는 puppeteer-core 버전을 설치해야 합니다.

예를 들어 Puppeteer-core로 Chrome 101을 구동하려면 chrome-101 npm 태그를 사용합니다.

npm install puppeteer-core@chrome-101

Puppeteer는 어떤 Chromium 버전을 사용하나요?

다음 방법 중 하나를 사용하여 버전을 찾습니다.

  • revisions.ts에서 chromium 항목을 찾습니다. 해당 Chromium 커밋 및 버전 번호를 찾으려면 OmahaProxy의 'Find Releases' 섹션에서 r가 접두어로 붙은 버전을 검색합니다.
  • Chromium과 Puppeteer 버전 간의 매핑이 포함된 versions.js에서 versionsPerRelease 맵을 찾습니다. 참고: 파일에는 Chromium이 업데이트된 Puppeteer 버전만 포함됩니다. 일부 Puppeteer 버전이 나열되어 있지 않습니다.

Puppeteer는 어떤 Firefox 버전을 사용하나요?

Firefox 지원은 실험 단계에 있으므로 Puppeteer에서는 PUPPETEER_PRODUCT 환경 변수가 firefox로 설정된 경우 최신 Firefox Nightly를 다운로드합니다. 또한 revisions.ts의 firefox 값이 latest인 이유이기도 합니다. Puppeteer는 특정 Firefox 버전에 묶여 있지 않습니다.

Puppeteer 설치의 일부로 Firefox Nightly를 가져오려면 다음 단계를 따르세요.

PUPPETEER_PRODUCT=firefox npm i puppeteer
# or "yarn add puppeteer"

무엇이 탐색으로 간주되나요?

Puppeteer의 관점에서 '탐색'은 페이지의 URL을 변경하는 모든 것입니다. 브라우저가 웹 서버에서 새 문서를 가져오기 위해 네트워크에 접속하는 일반적인 탐색 외에도, 여기에는 앵커 탐색 및 History API 사용이 포함됩니다.

이 '탐색' 정의에 따라 Puppeteer는 단일 페이지 애플리케이션에서 원활하게 작동합니다.

'신뢰할 수 있음' 입력 이벤트와 '신뢰할 수 없음' 입력 이벤트의 차이점은 무엇인가요?

브라우저에서 입력 이벤트는 신뢰할 수 있는 이벤트와 신뢰할 수 없는 이벤트라는 두 가지 큰 그룹으로 나눌 수 있습니다.

  • 신뢰할 수 있는 이벤트: 마우스나 키보드 사용과 같이 페이지와 상호작용하는 사용자에 의해 생성되는 이벤트입니다.
  • 신뢰할 수 없는 이벤트: document.createEvent 또는 element.click() 메서드와 같이 웹 API에서 생성된 이벤트입니다.

웹사이트는 다음 두 그룹을 구분할 수 있습니다.

  • Event.isTrusted 이벤트 플래그 사용
  • 함께 하는 이벤트 스니핑 예를 들어 신뢰할 수 있는 모든 'click' 이벤트 앞에는 'mousedown' 및 'mouseup' 이벤트가 옵니다.

자동화를 위해 신뢰할 수 있는 이벤트를 생성하는 것이 중요합니다. Puppeteer로 생성된 모든 입력 이벤트는 신뢰할 수 있으며 관련 이벤트를 적절하게 실행합니다.

어떤 이유로든 신뢰할 수 없는 이벤트가 필요한 경우 언제든지 page.evaluate가 있는 페이지 컨텍스트로 이동하여 가짜 이벤트를 생성할 수 있습니다.

await page.evaluate(() => {
  document.querySelector('button[type=submit]').click();
});

Puppeteer에서 지원하지 않는 기능은 무엇인가요?

오디오와 동영상이 포함된 페이지를 제어할 때 Puppeteer가 예상대로 작동하지 않을 수도 있습니다. 예를 들어 동영상 재생 및 스크린샷이 실패할 수 있습니다.) 여기에는 두 가지 이유가 있습니다.

  • Puppeteer는 Chromium (Chrome 아님)과 함께 번들로 제공됩니다. 따라서 기본적으로 Chromium의 미디어 관련 제한사항을 모두 상속합니다. 즉, Puppeteer는 AAC 또는 H.264와 같은 라이선스 형식을 지원하지 않습니다.
    • Puppeteer에서 puppeteer.launch에 대한 executablePath 옵션을 사용하여 Chromium 대신 별도 설치된 버전의 Chrome을 사용하도록 강제할 수 있습니다. 이러한 미디어 형식을 지원하는 Chrome 공식 버전이 필요한 경우에만 이 구성을 사용해야 합니다.
  • Puppeteer (모든 구성)는 Chromium 또는 Chrome의 데스크톱 버전을 제어하므로 모바일 버전의 Chrome에서만 지원되는 기능은 지원되지 않습니다. 즉, Puppeteer는 HTTP 실시간 스트리밍 (HLS)을 지원하지 않습니다.

테스트 환경에서 Puppeteer를 설치 / 실행하는 데 문제가 있습니다. 어디에서 도움을 받을 수 있나요?

다양한 운영체제의 문제 해결 가이드에는 필요한 종속 항목이 나열되어 있습니다.

Chromium은 npm ci를 실행할 때마다 다운로드됩니다. 다운로드를 캐시하려면 어떻게 해야 하나요?

기본 다운로드 경로는 node_modules/puppeteer/.local-chromium입니다. 그러나 PUPPETEER_DOWNLOAD_PATH 환경 변수를 사용하여 이 경로를 변경할 수 있습니다.

Puppeteer는 이 변수를 사용하여 시작 시 Chromium 실행 위치를 확인하므로 PUPPETEER_EXECUTABLE_PATH도 지정할 필요가 없습니다.

예를 들어 Chromium 다운로드를 ~/.npm/chromium에 유지하려면 다음을 실행합니다.

export PUPPETEER_DOWNLOAD_PATH=~/.npm/chromium
npm ci

# by default the Chromium executable path is inferred
# from the download path
npm test

# a new run of npm ci will check for the existence of
# Chromium in ~/.npm/chromium
npm ci

질문이 더 있습니다. 어디에서 질문해야 하나요?

Puppeteer에 관한 도움을 얻는 방법에는 여러 가지가 있습니다.

질문을 게시하기 전에 해당 채널을 검색해 보세요.