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

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

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

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

ส่วนขยายได้รับการสนับสนุนจากไลบรารีการทดสอบที่หลากหลาย

การเรียกใช้การทดสอบใน Chrome แบบ Headless

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

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

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

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

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

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

ในบางไลบรารี คุณอาจเปิดป๊อปอัปได้โดยใช้ action.openPopup() API แล้วรับการอ้างอิงไปยังบริบทใหม่ เช่น Puppeteer มีเอกสารเกี่ยวกับวิธีดำเนินการนี้ในคู่มือส่วนขยาย Chrome

หากทำไม่ได้ในคลังที่คุณเลือก ให้เปิด 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 await chrome.tabs.get(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 ให้ทำดังนี้

// 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 ได้ที่ การทดสอบการสิ้นสุดของ Service Worker ด้วย Puppeteer นอกจากนี้ เรายังมีตัวอย่างสำหรับ Puppeteer และ Selenium ด้วย

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