Chrome Uzantılarını Puppeteer ile Test Etme

Puppeteer, web siteleri için otomatik testler oluşturmaya yönelik bir çerçeve sağlar. Bu çerçeve, Chrome uzantılarını test etme olanağı da sunar. Bunlar, nihai ürüne yerleştirildikten sonra bir web sitesinin veya uzantının işlevini test eden üst düzey uçtan uca testlerdir. Bu eğitimde, örnekler deposumuzdaki bir uzantı için temel bir testin nasıl yazılacağını gösteriyoruz.

Başlamadan önce

chrome-extensions-samples deposunu klonlayın veya indirin. Test uzantımız olarak api-samples/history/showHistory adresindeki Geçmiş API'si demosunu kullanacağız.

Ayrıca, Puppeteer'ın üzerine inşa edildiği çalışma zamanı olan 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 gerekiyor. Yeni bir klasörde aşağıdakileri içeren 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 tüm Node projeleri tarafından gereklidir.

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

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

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

3. Adım: 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şlatmak ve kapatmak için beforeEach ve afterEach öğelerini güncelleyin. Birçok test çalıştırırken aynı tarayıcıyı kullanmayı tercih edebilirsiniz. Ancak bu, testleriniz arasındaki izolasyonu 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

Testleri çalıştırmayı kolaylaştırmak 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 işlem, geçerli dizindeki .test.js ile biten tüm dosyaları ç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ği için bunu yapmamız gerekir. 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: Mevcut durumu doğrulama

Uzantı beklendiği gibi davranmıyorsa testimizin başarısız olması için bir şey beyan edelim. Pop-up'ımızın yakın zamanda ziyaret edilen sayfaları göstermesi gerektiğini biliyoruz. Bu nedenle, bir pop-up 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 seçeneğini kullanın. Testinizin geçtiğini belirten bir çıkış görürsünüz.

Projenin tamamını chrome-extensions-samples deposunda görebilirsiniz.

Sonraki Adımlar

Temel bilgilere hakim olduktan sonra kendi uzantınız için bir test paketi oluşturmayı deneyin. Puppeteer API referansı, neler yapabileceğiniz hakkında daha fazla bilgi içerir. Burada açıklanmayan birçok özellik vardır.