Menguji Ekstensi Chrome dengan Puppeteer

Puppeteer menyediakan framework untuk membuat pengujian otomatis situs, yang juga menyertakan kemampuan untuk menguji Ekstensi Chrome. Pengujian ini adalah pengujian menyeluruh tingkat tinggi yang menguji fungsi situs atau ekstensi setelah di-build ke dalam produk akhir. Dalam tutorial ini, kita akan menunjukkan cara menulis pengujian dasar untuk ekstensi dari repositori contoh.

Sebelum memulai

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

Anda juga harus menginstal Node.JS yang merupakan runtime yang digunakan Puppeteer.

Menulis pengujian

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"
}

Serupa 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 ditambahkan secara otomatis ke file package.json Anda.

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

Langkah 3: Buat titik entri

Buat file baru bernama index.test.js dan 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

Perbarui beforeEach dan afterEach untuk meluncurkan dan menutup browser. Saat menjalankan banyak pengujian, sebaiknya pertimbangkan untuk menggunakan browser yang sama. Namun, tindakan ini umumnya tidak dianjurkan karena mengurangi isolasi antarpengujian 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 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 berakhiran .test.js di direktori saat ini.

Langkah 6: Buka pop-up

Mari tambahkan pengujian dasar yang membuka pop-up di halaman baru. Kita perlu melakukannya karena Puppeteer tidak mendukung akses ke 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 kita dapat gagal jika ekstensi tidak berperilaku seperti yang diharapkan. Kita tahu bahwa pop-up harus menampilkan halaman yang baru-baru ini dikunjungi, jadi mari kita pastikan kita melihatnya:

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 berhasil.

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 selengkapnya tentang hal yang dapat dilakukan - ada banyak kemampuan yang tidak dijelaskan di sini.