Chrome uzantılarını Puppeteer ile test etme

Puppeteer, web sitelerinin otomatik testlerini oluşturmak için bir çerçeve sağlar. Bu çerçeve, Chrome uzantılarını test etme özelliğini de içerir. Bunlar, nihai ürüne entegre edildikten sonra bir web sitesinin veya uzantının işlevselliğini test eden üst düzey uçtan uca testlerdir. Bu eğitimde, örnekler depomuzdaki bir uzantı için temel bir testi nasıl yazacağımızı gösteriyoruz.

Başlamadan önce

chrome-extensions-samples deposunu klonlayın veya indirin. Test uzantımız olarak api-samples/history/showHistory bölümündeki geçmiş API'si demosunu kullanacağız.

Ayrıca, Puppeteer'ın üzerinde oluşturulduğu ç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:

package.json:

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

Uzantıların manifest.json dosyasına benzer şekilde, bu dosya tüm Node 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 öğeler, package.json dosyanıza otomatik olarak eklenir.

Bağımsız Puppeteer testleri yazmak mümkündür ancak kodumuza biraz daha yapı kazandırmak için Jest'i test çalıştırıcı olarak 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';

let browser;
let worker;

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 tuşlarını kullanın. Çok sayıda test çalıştırırken aynı tarayıcıyı kullanmayı düşünebilirsiniz. Ancak bu durum, testleriniz arasındaki izolasyonu azalttığı ve bir testin sonucunu etkileyebileceği için genellikle önerilmez.

index.test.js:

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

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

5. adım: Uzantı hizmeti çalışanını bekleyin

Pop-up'ı daha sonra açmak için uzantı hizmeti çalışanının başlatılmasını beklememiz gerekir. beforeEach işlevinizi aşağıdaki kodla güncelleyin:

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

6. 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": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

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

7. adım: Pop-up'ı açın

Temel bir test ekleyin. Tarayıcı geçmişinde bir öğe olması için önce yeni bir sayfa açacağız. Ardından, geçmiş içeriklerini görmek için pop-up'ı açacağız. Aşağıdaki kodu ekleyin:

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

8. adım: Geçerli durumu onaylayın

Uzantı beklendiği gibi çalışmıyorsa testin başarısız olması için bir şeyleri onaylayın. Pop-up'ımızın yakın zamanda ziyaret edilen sayfaları göstermesi gerektiğini biliyoruz. Bu nedenle, pop-up'ta bir sayfa gösterilip gösterilmediğini kontrol edin:

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

9. adım: Testinizi çalıştırın

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

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

Sonraki Adımlar

Temel bilgileri öğrendikten sonra kendi uzantınız için bir test paketi oluşturmayı deneyin. Puppeteer API referansında, yapabilecekleriniz hakkında daha fazla bilgi yer almaktadır. Burada açıklanmayan birçok özellik vardır.