Chrome 확장 프로그램에 대한 엔드 투 엔드 테스트

엔드 투 엔드 테스트에는 확장 프로그램 패키지가 빌드되어 브라우저에 로드됩니다. 테스트 도구는 브라우저와 통신하여 상호작용을 자동화하고 사용자가 거치는 것과 동일한 흐름을 테스트합니다. 엔드 투 엔드 테스트를 지원하는 라이브러리는 일반적으로 브라우저를 제어하고 사용자 입력을 시뮬레이션하며 열린 페이지의 현재 상태를 관찰하는 방법을 제공합니다.

튜토리얼은 Puppeteer로 Chrome 확장 프로그램 테스트, Chrome 확장 프로그램 단위 테스트 작성에 관한 자세한 내용은 단위 테스트를 참고하세요.

브라우저 테스트 라이브러리 사용

확장 프로그램은 다양한 테스트 라이브러리에서 지원됩니다.

보관함	가이드
인형극 / 극작가	Chrome 확장 프로그램 (Puppeteer / Playwright)을 참고하세요.
셀레늄	ChromeOptions 객체를 사용하여 확장 프로그램을 로드합니다. 자세한 내용은 여기를 참고하세요.
WebDriverIO	웹 확장 프로그램 테스트를 참조하세요.

헤드리스 Chrome에서 테스트 실행

자동화된 워크플로의 일부로 테스트를 실행할 때 화면이 없는 머신에 확장 프로그램을 로드해야 하는 경우가 많습니다. Chrome의 새로운 헤드리스 모드를 사용하면 이러한 무인 환경에서 Chrome을 실행할 수 있습니다. --headless=new 플래그를 사용하여 Chrome을 시작합니다. 헤드리스는 현재 확장 프로그램 로드를 지원하지 않는 'old'로 기본 설정됩니다. 선택한 자동화 도구에 따라 플래그를 자동으로 추가하는 설정이 있을 수 있습니다.

확장 프로그램 ID 설정

테스트에서 고정된 확장 프로그램 ID를 두는 것이 바람직한 경우가 많습니다. 이렇게 하면 통신해야 하는 서버에 확장 프로그램의 출처를 허용하거나 테스트 내에서 확장 프로그램 페이지를 여는 등 여러 일반적인 작업을 더 쉽게 수행할 수 있습니다. 이렇게 하려면 일관된 확장 프로그램 ID 유지의 단계를 따르세요.

확장 프로그램 페이지 테스트

확장 프로그램 페이지는 해당 URL(예: chrome-extension://<id>/index.html)을 사용하여 액세스할 수 있습니다. 선택한 자동화 도구에서 사용할 수 있는 일반적인 탐색 방법을 사용하여 이러한 URL로 이동합니다.

확장 프로그램 팝업 테스트

현재 다른 페이지의 컨텍스트에서는 확장 프로그램 팝업을 열 수 없습니다. 대신 새 탭에서 팝업 URL을 여세요. 팝업에서 활성 탭을 사용하는 경우 탭 ID를 팝업에 명시적으로 전달할 수 있는 재정의를 구현하는 것이 좋습니다. 예를 들면 다음과 같습니다.

const URL_PARAMS  = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return parseInt(URL_PARAMS.get("tab"));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

확장 프로그램 상태 검사

확장 프로그램의 내부 동작을 변경할 때 테스트 실패를 방지하려면 통합 테스트에서 내부 상태에 액세스하지 않는 것이 좋습니다. 대신 사용자에게 표시되는 항목을 기반으로 테스트해야 합니다. 하지만 확장 프로그램에서 데이터에 직접 액세스하는 것이 좋을 수도 있습니다. 이 경우 확장 프로그램 페이지의 컨텍스트에서 코드를 실행하는 것이 좋습니다.

Puppeteer:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

셀레늄 사용:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

서비스 워커 종료 테스트

서비스 워커 종료 테스트에 관한 자세한 내용은 Puppeteer로 서비스 워커 종료 테스트를 참조하세요. Puppeteer 및 Selenium 샘플도 있습니다.

일부 테스트 프레임워크를 사용할 때 서비스 워커는 일반적인 사용 시와 같이 자동으로 종료되지 않을 수 있습니다. 셀레니엄이 여기에 해당합니다. 디버거를 모든 서비스 워커에 연결하여 서비스 워커가 중지되지 않도록 하는 ChromeDriver를 사용합니다.