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

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

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

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

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

라이브러리	안내
Puppeteer / Playwright	Chrome 확장 프로그램 (Puppeteer / Playwright)을 참고하세요.
셀레늄	ChromeOptions 객체를 사용하여 확장 프로그램을 로드합니다. 자세한 내용은 여기를 참고하세요.
WebDriverIO	웹 확장 프로그램 테스트를 참고하세요.

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

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

확장 프로그램 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:

// 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를 사용합니다. ChromeDriver는 모든 서비스 워커에 디버거를 연결하여 서비스 워커가 중지되지 않도록 합니다.