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

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

시작하기 전에

chrome-extensions-samples 저장소를 복제하거나 다운로드합니다. api-samples/history/showHistory의 History 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 참조에서 가능한 작업에 관한 자세한 내용을 확인할 수 있습니다. 여기에서 설명하지 않는 많은 기능이 있습니다.