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

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

ก่อนจะเริ่ม

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

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

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

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

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

pacakge.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';
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

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

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