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