Puppeteer로 Chrome 확장 프로그램 테스트

Puppeteer는 웹사이트의 자동 테스트를 빌드하기 위한 프레임워크를 제공하며 여기에는 Chrome 확장 프로그램을 테스트하는 기능도 포함되어 있습니다. 이는 웹사이트 또는 확장 프로그램이 최종 제품에 빌드된 후 기능을 테스트하는 대략적인 엔드 투 엔드 테스트입니다. 이 튜토리얼에서는 샘플 저장소에서 확장 프로그램의 기본 테스트를 작성하는 방법을 보여줍니다.

시작하기 전에

chrome-extensions-samples 저장소를 클론하거나 다운로드합니다. api-samples/history/showHistory의 기록 API 데모를 테스트 확장 프로그램으로 사용합니다.

Puppeteer가 빌드되는 런타임인 Node.JS도 설치해야 합니다.

테스트 작성

1단계: Node.JS 프로젝트 시작

기본 Node.JS 프로젝트를 설정해야 합니다. 새 폴더에서 다음과 같이 package.json 파일을 만듭니다.

pacakge.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

확장 프로그램의 manifest.json 파일과 마찬가지로 이 파일은 모든 Node 프로젝트에 필요합니다.

2단계: Puppeteer 및 Jest 설치

npm install puppeteer jest를 실행하여 Puppeteer 및 Jest를 종속 항목으로 추가합니다. 그러면 package.json 파일에 자동으로 추가됩니다.

독립형 Puppeteer 테스트를 작성할 수도 있지만 Jest를 테스트 실행기로 사용하여 코드에 추가 구조를 제공하겠습니다.

3단계: 진입점 만들기

index.test.js라는 새 파일을 만들고 다음 코드를 추가합니다.

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

4단계: 브라우저 실행

beforeEach 및 afterEach를 업데이트하여 브라우저를 실행하고 닫습니다. 테스트를 많이 실행할 때는 동일한 브라우저를 사용하는 것이 좋습니다. 그러나 이렇게 하면 테스트 간의 격리가 줄어들고 한 테스트가 다른 테스트의 결과에 영향을 미칠 수 있으므로 일반적으로 권장하지 않습니다.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

5단계: 별칭 추가

테스트를 더 쉽게 실행하려면 package.json 파일에 별칭을 추가합니다.

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "scripts": {
    "start": "jest ."
  }
}

이렇게 하면 현재 디렉터리에서 .test.js로 끝나는 모든 파일이 실행됩니다.

6단계: 팝업 열기

새 페이지에서 팝업을 여는 기본 테스트를 추가해 보겠습니다. Puppeteer가 팝업 창에서 확장 프로그램 팝업에 액세스하는 것을 지원하지 않기 때문에 이렇게 해야 합니다. 다음 코드를 추가합니다.

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

7단계: 현재 상태 어설션

확장 프로그램이 예상대로 작동하지 않으면 테스트가 실패할 수 있도록 어설션을 해 보겠습니다. 팝업에는 최근에 방문한 페이지가 표시되어야 하므로 팝업이 표시되는지 확인해 보겠습니다.

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

8단계: 테스트 실행

테스트를 실행하려면 npm start를 사용합니다. 테스트가 통과했음을 나타내는 출력이 표시됩니다.

chrome-extensions-samples 저장소에서 전체 프로젝트를 확인할 수 있습니다.

다음 단계

기본사항을 숙지한 후 자체 확장 프로그램의 테스트 모음을 빌드해 보세요. Puppeteer API 참조에는 가능한 작업에 관한 자세한 정보가 포함되어 있습니다. 여기에 설명되지 않은 많은 기능이 있습니다.