Menguji Ekstensi Chrome dengan Puppeteer

Puppeteer menyediakan framework untuk membuat pengujian situs otomatis, yang juga mencakup kemampuan untuk menguji Ekstensi Chrome. Pengujian ini merupakan pengujian menyeluruh tingkat tinggi yang menguji fungsi situs atau ekstensi setelah di-build menjadi produk akhir. Dalam tutorial ini, kami menunjukkan cara menulis pengujian dasar untuk ekstensi dari repositori contoh kami.

Sebelum memulai

Clone atau download repositori chrome-extensions-samples. Kita akan menggunakan demo API histori di api-samples/history/showHistory sebagai ekstensi pengujian.

Anda juga perlu menginstal Node.JS yang merupakan tempat runtime Puppeteer.

Menulis pengujian Anda

Langkah 1: Mulai project Node.JS Anda

Kita perlu menyiapkan project Node.JS dasar. Di folder baru, buat file package.json dengan hal berikut:

pacakge.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

Mirip dengan file manifest.json ekstensi, file ini diperlukan oleh semua project Node.

Langkah 2: Instal Puppeteer dan Jest

Jalankan npm install puppeteer jest untuk menambahkan Puppeteer dan Jest sebagai dependensi. File tersebut akan otomatis ditambahkan ke file package.json Anda.

Anda dapat menulis pengujian Puppeteer mandiri, tetapi kita akan menggunakan Jest sebagai runner pengujian untuk memberikan beberapa struktur tambahan pada kode.

Langkah 3: Buat titik entri

Buat file baru bernama index.test.js, lalu tambahkan kode berikut:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

Langkah 4: Luncurkan browser

Update beforeEach dan afterEach untuk meluncurkan dan menutup browser. Saat menjalankan banyak pengujian, sebaiknya pertimbangkan untuk menggunakan browser yang sama. Namun, hal ini umumnya tidak disarankan karena mengurangi isolasi antara pengujian Anda dan dapat menyebabkan satu pengujian memengaruhi hasil pengujian lainnya.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

Langkah 5: Tambahkan alias

Untuk mempermudah menjalankan pengujian, tambahkan alias ke file package.json Anda:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "scripts": {
    "start": "jest ."
  }
}

Tindakan ini akan menjalankan semua file yang diakhiri dengan .test.js di direktori saat ini.

Langkah 6: Buka pop-up

Mari kita tambahkan pengujian dasar yang membuka pop-up di halaman baru. Kita harus melakukan hal ini karena Puppeteer tidak mendukung akses pop-up ekstensi dari jendela pop-up. Tambahkan kode berikut:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

Langkah 7: Nyatakan status saat ini

Mari kita nyatakan sesuatu sehingga pengujian bisa gagal jika ekstensi tidak berperilaku seperti yang diharapkan. Kita mengetahui bahwa pop-up akan menampilkan halaman yang baru saja dikunjungi, jadi mari kita periksa apakah ada:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

Langkah 8: Jalankan pengujian

Untuk menjalankan pengujian, gunakan npm start. Anda akan melihat output yang menunjukkan bahwa pengujian Anda lulus.

Anda dapat melihat project lengkap di repositori chrome-extensions-samples kami.

Langkah Berikutnya

Setelah menguasai dasar-dasarnya, coba buat rangkaian pengujian untuk ekstensi Anda sendiri. Referensi API Puppeteer berisi informasi lebih lanjut tentang apa yang mungkin dilakukan - ada banyak kemampuan yang tidak dijelaskan di sini.