Pengujian menyeluruh untuk Ekstensi Chrome

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

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

Menggunakan library pengujian browser

Ekstensi didukung oleh berbagai library pengujian.

Menjalankan pengujian di Chrome tanpa antarmuka

Saat menjalankan pengujian sebagai bagian dari alur kerja otomatis, sering kali perlu memuat ekstensi Anda di mesin 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 secara default adalah "old", yang tidak mendukung pemuatan ekstensi). Bergantung pada alat otomatisasi yang Anda pilih, mungkin ada setelan yang menambahkan tanda secara otomatis untuk Anda.

Menetapkan ID ekstensi

Sering kali ID ekstensi tetap diinginkan dalam pengujian. Hal ini mempermudah banyak tugas umum seperti memasukkan asal ekstensi ke dalam daftar yang diizinkan di server yang perlu berkomunikasi dengannya, atau membuka halaman ekstensi dalam pengujian. Untuk melakukannya, ikuti langkah-langkah di bagian Mempertahankan 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

Dengan beberapa library, Anda dapat membuka pop-up menggunakan API action.openPopup(), lalu mendapatkan referensi ke konteks baru. Misalnya, Puppeteer mendokumentasikan cara melakukannya dalam panduan Ekstensi Chrome mereka.

Jika hal ini tidak memungkinkan di perpustakaan pilihan Anda, buka URL pop-up di tab baru. Jika pop-up Anda menggunakan tab aktif, pertimbangkan untuk menerapkan penggantian tempat 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 await chrome.tabs.get(parseInt(URL_PARAMS.get("tab")));
  }

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

  return tabs[0];
}

Memeriksa status ekstensi

Untuk menghindari kegagalan pengujian saat Anda mengubah perilaku internal ekstensi, umumnya praktik terbaik adalah menghindari akses ke status internal dalam pengujian integrasi. Sebagai gantinya, Anda harus mendasarkan pengujian pada apa yang terlihat oleh pengguna. Namun, terkadang Anda mungkin ingin 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');
});

Di 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 service worker, lihat menguji penghentian service worker 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 dalam penggunaan normal. Hal ini terjadi di Selenium. Hal ini bergantung pada ChromeDriver yang melampirkan debugger ke semua pekerja layanan, sehingga mencegahnya dihentikan.