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

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

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

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

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

การทดสอบใน Chrome แบบ Headless

เมื่อทำการทดสอบเป็นส่วนหนึ่งของเวิร์กโฟลว์อัตโนมัติ คุณมักจะต้องโหลดส่วนขยายในเครื่องที่ไม่มีหน้าจอ โหมด Headless ใหม่ของ Chrome ช่วยให้ Chrome ทำงานในสภาพแวดล้อมที่ไม่มีผู้ดูแลได้เช่นนี้ เริ่ม Chrome โดยใช้ Flag --headless=new (ปัจจุบันค่าเริ่มต้นของ headless คือ "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

// 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 ด้วย

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