Testowanie rozszerzeń do Chrome za pomocą Puppeteer

Puppeteer to platforma do tworzenia automatycznych testów stron internetowych, która umożliwia też testowanie rozszerzeń do Chrome. Są to kompleksowe testy wysokiego poziomu, które sprawdzają funkcjonalność witryny lub rozszerzenia po wbudowaniu ich w produkt końcowy. W tym samouczku pokażemy, jak napisać podstawowy test rozszerzenia z naszego repozytorium przykładów.

Zanim rozpoczniesz

Skopiuj lub pobierz repozytorium chrome-extensions-samples. Jako rozszerzenia testowego użyjemy wersji demonstracyjnej interfejsu History API w api-samples/history/showHistory.

Musisz też zainstalować Node.JS, czyli środowisko wykonawcze, na którym opiera się Puppeteer.

Pisanie testu

Krok 1. Rozpocznij projekt Node.JS

Musimy skonfigurować podstawowy projekt Node.JS. W nowym folderze utwórz plik package.json o tej zawartości:

package.json:

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

Podobnie jak plik manifest.json rozszerzenia, ten plik jest wymagany we wszystkich projektach Node.

Krok 2. Zainstaluj Puppeteer i Jest

Uruchom npm install puppeteer jest, aby dodać Puppeteer i Jest jako zależności. Zostaną one automatycznie dodane do pliku package.json.

Można pisać samodzielne testy Puppeteer, ale użyjemy Jest jako narzędzia do uruchamiania testów, aby nadać naszemu kodowi dodatkową strukturę.

Krok 3. Utwórz punkt wejścia

Utwórz nowy plik o nazwie index.test.js i dodaj ten kod:

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

Krok 4. Uruchom przeglądarkę

Zaktualizuj beforeEach i afterEach, aby uruchamiać i zamykać przeglądarkę. Jeśli przeprowadzasz wiele testów, możesz używać tej samej przeglądarki. Nie jest to jednak zalecane, ponieważ zmniejsza izolację między testami i może spowodować, że jeden test wpłynie na wynik innego.

index.test.js:

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

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

Krok 5. Poczekaj na proces roboczy rozszerzenia

Musimy poczekać na uruchomienie procesu roboczego rozszerzenia, aby móc go później użyć do otwarcia wyskakującego okienka. Zaktualizuj funkcję beforeEach tym kodem:

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

Krok 6. Dodaj alias

Aby ułatwić przeprowadzanie testów, dodaj alias do pliku package.json:

package.json:

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

Spowoduje to uruchomienie wszystkich plików kończących się na .test.js w bieżącym katalogu.

Krok 7. Otwórz wyskakujące okienko

Dodaj podstawowy test. Najpierw otworzymy nową stronę, aby w historii przeglądarki pojawił się element. Następnie otworzymy wyskakujące okienko, aby wyświetlić zawartość historii. Dodaj ten kod:

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

Krok 8. Sprawdź bieżący stan

Sprawdź coś, aby test mógł się nie powieść, jeśli rozszerzenie nie działa zgodnie z oczekiwaniami. Wiemy, że w wyskakującym okienku powinny się wyświetlać ostatnio odwiedzone strony, więc sprawdź, czy widzisz jedną z nich:

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

Krok 9. Przeprowadź test

Aby uruchomić test, użyj polecenia npm start. Powinny się wyświetlić dane wyjściowe wskazujące, że test zakończył się powodzeniem.

Pełny projekt znajdziesz w naszym repozytorium chrome-extensions-samples.

Następne kroki

Po opanowaniu podstaw spróbuj utworzyć zestaw testów dla własnego rozszerzenia. Więcej informacji o możliwościach Puppeteer znajdziesz w dokumentacji API. Jest tam wiele funkcji, które nie zostały opisane w tym artykule.