ทดสอบส่วนขยาย Chrome ด้วย Puppeteer

Puppeteer มีเฟรมเวิร์กสําหรับสร้างการทดสอบเว็บไซต์อัตโนมัติ ซึ่งรวมถึงความสามารถในการทดสอบส่วนขยาย Chrome ด้วย การทดสอบเหล่านี้เป็นการทดสอบแบบครบวงจรระดับสูงที่ทดสอบฟังก์ชันการทำงานของเว็บไซต์หรือส่วนขยายเมื่อสร้างเป็นผลิตภัณฑ์ขั้นสุดท้ายแล้ว ในบทแนะนำนี้ เราจะสาธิตวิธีเขียนการทดสอบพื้นฐานสำหรับส่วนขยายจากที่เก็บตัวอย่างของเรา

ก่อนจะเริ่ม

โคลนหรือดาวน์โหลดที่เก็บ chrome-extensions-samples เราจะใช้การสาธิต History API ใน api-samples/history/showHistory เป็นส่วนขยายการทดสอบ

นอกจากนี้ คุณยังต้องติดตั้ง Node.JS ซึ่งเป็นรันไทม์ที่สร้าง Puppeteer ด้วย

การเขียนการทดสอบ

ขั้นตอนที่ 1: เริ่มโปรเจ็กต์ Node.JS

เราต้องตั้งค่าโปรเจ็กต์ Node.JS พื้นฐาน ในโฟลเดอร์ใหม่ ให้สร้างไฟล์ package.json ที่มีข้อมูลต่อไปนี้

package.json:

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

ไฟล์นี้จำเป็นสำหรับโปรเจ็กต์ Node ทั้งหมดเช่นเดียวกับไฟล์ manifest.json ของส่วนขยาย

ขั้นตอนที่ 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';

let browser;
let worker;

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: รอ Service Worker ของส่วนขยาย

เราต้องรอให้ Service Worker ของส่วนขยายเริ่มต้นเพื่อให้เราใช้ ในภายหลังเพื่อเปิดป๊อปอัปได้ อัปเดตฟังก์ชัน beforeEach ด้วยโค้ดต่อไปนี้

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

ขั้นตอนที่ 6: เพิ่มชื่อแทน

หากต้องการให้การทดสอบง่ายขึ้น ให้เพิ่มนามแฝงลงในไฟล์ package.json

package.json:

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

ซึ่งจะเรียกใช้ไฟล์ทั้งหมดที่ลงท้ายด้วย .test.js ในไดเรกทอรีปัจจุบัน

ขั้นตอนที่ 7: เปิดป๊อปอัป

เพิ่มการทดสอบพื้นฐาน เราจะเปิดหน้าใหม่ก่อนเพื่อให้มีรายการใน ประวัติการเข้าชมของเบราว์เซอร์ จากนั้นเราจะเปิดป๊อปอัปเพื่อดูเนื้อหาประวัติ เพิ่มโค้ดต่อไปนี้

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

ขั้นตอนที่ 8: ยืนยันสถานะปัจจุบัน

ยืนยันบางอย่างเพื่อให้การทดสอบล้มเหลวได้หากส่วนขยายทำงานไม่เป็นไปตามที่คาดไว้ เราทราบว่าป๊อปอัปควรแสดงหน้าที่เข้าชมล่าสุด ดังนั้นให้ตรวจสอบว่าเราเห็นป๊อปอัป

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

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

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

ขั้นตอนที่ 9: เรียกใช้การทดสอบ

หากต้องการทำการทดสอบ ให้ใช้ npm start คุณควรเห็นเอาต์พุตที่ระบุว่าการทดสอบผ่าน

คุณดูโปรเจ็กต์ทั้งหมดได้ในที่เก็บ chrome-extensions-samples

ขั้นตอนถัดไป

หลังจากเข้าใจพื้นฐานแล้ว ให้ลองสร้างชุดทดสอบสำหรับส่วนขยายของคุณเอง ข้อมูลอ้างอิง API ของ Puppeteer มีข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่ทำได้ ซึ่งมีความสามารถอีกมากมาย ที่ไม่ได้อธิบายไว้ที่นี่