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

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

ก่อนจะเริ่ม

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

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

การเขียนการทดสอบของคุณ

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

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

pacakge.json:

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

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

ขั้นตอนที่ 2: ติดตั้ง Puppeteer และ Jest

เรียกใช้ npm install puppeteer jest เพื่อเพิ่ม Puppeteer และ Jest เป็นทรัพยากร Dependency ระบบจะเพิ่มรายการเหล่านี้ ลงในไฟล์ 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-Sample ของเรา

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

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