Menguji Ekstensi Chrome dengan Puppeteer

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

Sebelum memulai

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

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

Menulis pengujian

Langkah 1: Mulai project Node.JS Anda

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

package.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 kita.

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

let browser;
let worker;

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 gunakan browser yang sama. Namun, tindakan ini umumnya tidak dianjurkan 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,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

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

Langkah 5: Tunggu pekerja layanan ekstensi

Kita harus menunggu pekerja layanan ekstensi dimulai agar kita dapat menggunakannya nanti untuk membuka pop-up. Perbarui fungsi beforeEach dengan kode berikut:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

Langkah 6: Tambahkan alias

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

package.json:

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

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

Langkah 7: Buka pop-up

Tambahkan pengujian dasar. Pertama-tama kita akan membuka halaman baru agar ada item di histori browser. Kemudian, kita akan membuka pop-up untuk melihat konten histori. Tambahkan kode berikut:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

Langkah 8: Tegaskan status saat ini

Tegaskan sesuatu, sehingga pengujian kita dapat gagal jika ekstensi tidak berperilaku seperti yang diharapkan. Kita tahu bahwa pop-up kita harus menampilkan halaman yang baru-baru ini dikunjungi, jadi periksa apakah kita melihat salah satunya:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

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

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

Langkah 9: 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 kemungkinan yang dapat dilakukan - ada banyak kemampuan yang tidak dijelaskan di sini.