การทดสอบแบบเอนด์ทูเอนด์สำหรับส่วนขยาย Chrome

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

ดูบทแนะนำในหัวข้อการทดสอบส่วนขยาย Chrome ด้วย Puppeteer และดูรายละเอียดเกี่ยวกับการทดสอบหน่วยการเขียนสำหรับส่วนขยาย Chrome ได้ที่การทดสอบหน่วย

การใช้ไลบรารีการทดสอบเบราว์เซอร์

ส่วนขยายได้รับการรองรับโดยไลบรารีการทดสอบจำนวนมาก

ห้องสมุด	คำแนะนำ
หุ่นเชิด / นักเขียนบทละคร	ดูส่วนขยาย Chrome (Puppeteer / Playwright)
ซีลีเนียม	ใช้ออบเจ็กต์ ChromeOptions เพื่อโหลดส่วนขยาย ดูข้อมูลเพิ่มเติมได้ที่นี่
WebDriverIO	ดูการทดสอบส่วนขยายเว็บ

การเรียกใช้การทดสอบใน Chrome แบบไม่มีส่วนหัว

เมื่อทำการทดสอบโดยเป็นส่วนหนึ่งของเวิร์กโฟลว์อัตโนมัติ เรามักจะต้องโหลดส่วนขยายในเครื่องที่ไม่มีหน้าจอ โหมดไม่มีส่วนหัวใหม่ของ Chrome ช่วยให้เรียกใช้ Chrome ในสภาพแวดล้อมที่ไม่มีการดูแลเช่นนี้ได้ เริ่ม Chrome โดยใช้แฟล็ก --headless=new (ปัจจุบันแบบไม่มีส่วนหัวเป็น "old" ซึ่งไม่รองรับการโหลดส่วนขยาย) อาจมีการตั้งค่าที่เพิ่มการแจ้งให้คุณโดยอัตโนมัติ ทั้งนี้ขึ้นอยู่กับเครื่องมือการทำงานอัตโนมัติที่คุณเลือก

การตั้งค่ารหัสส่วนขยาย

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

การทดสอบหน้าส่วนขยาย

หน้าส่วนขยายจะเข้าถึงได้โดยใช้ URL ที่เกี่ยวข้อง เช่น chrome-extension://<id>/index.html ใช้วิธีการนำทางปกติที่มีให้ในเครื่องมืออัตโนมัติที่คุณต้องการเพื่อไปยัง URL เหล่านี้

การทดสอบป๊อปอัปส่วนขยาย

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

const URL_PARAMS  = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return parseInt(URL_PARAMS.get("tab"));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

การตรวจสอบสถานะของส่วนขยาย

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

ใน Puppeteer:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

ในซีลีเนียม:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

กำลังทดสอบการสิ้นสุดการทำงานของ Service Worker

หากต้องการดูข้อมูลเกี่ยวกับการสิ้นสุดการทดสอบโปรแกรมทำงานของบริการ โปรดดูการทดสอบการสิ้นสุดการทำงานของ Service Worker ด้วย Puppeteer เรายังมีตัวอย่างสำหรับ Puppeteer และ Selenium ด้วย

โปรดทราบว่าเมื่อใช้เฟรมเวิร์กการทดสอบบางรายการ โปรแกรมทำงานของบริการอาจไม่สิ้นสุดการทำงานโดยอัตโนมัติเช่นเดียวกับการใช้งานปกติ อย่างใน Selenium โดยต้องใช้ ChromeDriver ซึ่งจะแนบโปรแกรมแก้ไขข้อบกพร่องกับโปรแกรมทำงานของบริการทั้งหมด เพื่อป้องกันการหยุดการทำงานของโปรแกรมเหล่านั้น