Chrome Uzantılarını Puppeteer ile Test Etme

Puppeteer, web siteleri için otomatik testler oluşturmak için bir çerçeve sağlar. Bu çerçeve, Chrome Uzantılarını test etme özelliğini de içerir. Bunlar, bir web sitesi veya uzantının nihai ürüne entegre edildikten sonra işlevselliğini test eden üst düzey uçtan uca testlerdir. Bu eğitimde, örnek depomuzdan bir uzantı için temel testin nasıl yazılacağını gösteriyoruz.

Başlamadan önce

chrome-extensions-samples deposunu klonlayın veya indirin. Test uzantısı olarak api-samples/history/showHistory uygulamasındaki History API demosunu kullanacağız.

Ayrıca, çalışma zamanı Puppeteer'ın temelini oluşturan Node.JS'yi de yüklemeniz gerekir.

Testinizi yazma

1. Adım: Node.JS projenizi başlatın

Temel bir Node.JS projesi oluşturmamız gerekir. Yeni bir klasörde aşağıdakilerle bir package.json dosyası oluşturun:

pacakge.json:

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

Bir uzantının manifest.json dosyasına benzer şekilde, bu dosya da tüm Düğüm projeleri için gereklidir.

2. Adım: Puppeteer ve Jest'i yükleyin

Puppeteer ve Jest'i bağımlılık olarak eklemek için npm install puppeteer jest komutunu çalıştırın. Bu dosyalar, package.json dosyanıza otomatik olarak eklenecektir.

Bağımsız Puppeteer testleri yazmak mümkündür, ancak Jest'i kodumuza bazı ek yapı sağlamak için test çalıştırıcısı olarak kullanacağız.

3. Adım: Bir giriş noktası oluşturun

index.test.js adlı yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

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.
});

4. Adım: Tarayıcıyı başlatın

Tarayıcıyı başlatıp kapatmak için beforeEach ve afterEach uygulamalarını güncelleyin. Çok sayıda test çalıştırırken aynı tarayıcıyı kullanmayı düşünebilirsiniz. Ancak bu, testleriniz arasındaki yalıtımı azalttığı ve bir testin diğerinin sonucunu etkilemesine neden olabileceği için genellikle önerilmez.

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

5. Adım: Takma ad ekleyin

Testlerin daha kolay çalıştırılması için package.json dosyanıza bir takma ad ekleyin:

package.json:

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

Bu, .test.js ile biten tüm dosyaları geçerli dizinde çalıştırır.

6. Adım: Pop-up'ı açın

Pop-up'ı yeni bir sayfada açan temel bir test ekleyelim. Puppeteer pop-up pencereden uzantı pop-up'ına erişimi desteklemediğinden bunu yapmamız gerekiyor. Aşağıdaki kodu ekleyin:

index.test.js:

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

7. Adım: Geçerli durum için onay verin

Uzantı beklendiği gibi çalışmazsa testimizin başarısız olabilmesi için bir doğrulama işlemi yapalım. Pop-up'ımızın en son ziyaret edilen sayfaları göstermesi gerektiğini biliyoruz. Bu nedenle, bunlardan birini görüp görmediğimizi kontrol edelim:

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

8. Adım: Testinizi çalıştırın

Testi çalıştırmak için npm start politikasını kullanın. Testinizin başarılı olduğunu belirten bir çıkış görmeniz gerekir.

Projenin tamamını chrome-extensions-samples depomuzda bulabilirsiniz.

Sonraki adımlar

Temel bilgileri edindikten sonra kendi uzantınız için bir test paketi oluşturmayı deneyin. Puppeteer API referansı, nelerin mümkün olduğu hakkında daha fazla bilgi içerir. Burada açıklanmayan birçok özellik vardır.