Pengujian menyeluruh untuk Ekstensi Chrome

Pengujian menyeluruh melibatkan paket ekstensi yang dibuat dan dimuat ke browser. Alat pengujian berkomunikasi dengan browser untuk mengotomatiskan interaksi dan menguji alur yang sama yang akan dilalui pengguna. Library yang mendukung pengujian menyeluruh umumnya akan menyediakan cara untuk mengontrol browser, menyimulasikan input pengguna, dan mengamati status saat ini dari setiap halaman yang terbuka.

Lihat Menguji Ekstensi Chrome dengan Puppeteer untuk mengetahui tutorial dan Pengujian unit guna mengetahui detail tentang cara menulis pengujian unit untuk ekstensi Chrome.

Menggunakan library pengujian browser

Ekstensi didukung oleh berbagai library pengujian.

Koleksi	Panduan
Puppeteer / Penulis drama	Lihat Ekstensi Chrome (Puppeteer / Playwright).
Selenium	Gunakan objek ChromeOptions untuk memuat ekstensi. Informasi selengkapnya tersedia di sini.
WebDriverIO	Lihat Pengujian Ekstensi Web.

Menjalankan pengujian di Chrome headless

Saat menjalankan pengujian sebagai bagian dari alur kerja otomatis, sering kali Anda harus memuat ekstensi di komputer yang tidak memiliki layar. Mode headless baru Chrome memungkinkan Chrome dijalankan di lingkungan tanpa pengawasan seperti ini. Mulai Chrome menggunakan flag --headless=new (headless saat ini ditetapkan secara default ke "old", yang tidak mendukung pemuatan ekstensi). Bergantung pada alat otomatisasi yang Anda pilih, mungkin ada setelan yang menambahkan tanda untuk Anda secara otomatis.

Menetapkan ID ekstensi

Sebaiknya Anda memiliki ID ekstensi tetap dalam pengujian. Hal ini mempermudah banyak tugas umum seperti mengizinkan pembuatan asal ekstensi di server yang perlu diajak berkomunikasi, atau membuka halaman ekstensi dalam pengujian. Untuk melakukannya, ikuti langkah-langkah di bagian Menjaga ID ekstensi yang konsisten.

Menguji halaman ekstensi

Halaman ekstensi dapat diakses menggunakan URL yang sesuai, misalnya chrome-extension://<id>/index.html. Gunakan metode navigasi normal yang tersedia di alat otomatisasi pilihan Anda untuk membuka URL ini.

Menguji pop-up ekstensi

Membuka pop-up ekstensi dalam konteks halaman lain saat ini tidak dapat dilakukan. Sebagai gantinya, buka URL pop-up di tab baru. Jika pop-up Anda menggunakan tab aktif, pertimbangkan untuk menerapkan penggantian sehingga ID tab dapat diteruskan secara eksplisit ke pop-up Anda. Contoh:

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];
}

Memeriksa status ekstensi

Untuk menghindari kegagalan uji saat Anda mengubah perilaku internal ekstensi, praktik terbaiknya secara umum adalah menghindari akses ke status internal dalam pengujian integrasi. Sebagai gantinya, Anda harus mendasarkan pengujian pada apa yang terlihat oleh pengguna. Namun, terkadang diinginkan untuk mengakses data secara langsung dari ekstensi. Dalam kasus ini, pertimbangkan untuk mengeksekusi kode dalam konteks halaman ekstensi.

Di 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');
});

Dalam 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);'
);

Menguji penghentian pekerja layanan

Untuk mempelajari cara menguji penghentian pekerja layanan, lihat menguji penghentian pekerja layanan dengan Puppeteer. Kami juga memiliki contoh untuk Puppeteer dan Selenium.

Perhatikan bahwa saat menggunakan beberapa framework pengujian, pekerja layanan mungkin tidak berhenti secara otomatis seperti yang terjadi dalam penggunaan normal. Ini adalah kasus di Selenium. Ini mengandalkan ChromeDriver yang memasang debugger ke semua pekerja layanan sehingga mencegahnya dihentikan.