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, pipe: true, enableExtensions: [EXTENSION_PATH] }); }); afterEach(async () => { await browser.close(); browser = undefined; }); 5단계: 별칭 추가
테스트를 더 쉽게 실행하려면 package.json 파일에 별칭을 추가합니다.
package.json:
{ "name": "puppeteer-demo", "version": "1.0", "dependencies": { "puppeteer": "^24.8.1" }, "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 참조에는 가능한 작업에 관한 자세한 정보가 포함되어 있습니다. 여기에 설명되지 않은 많은 기능이 있습니다.