Testowanie rozszerzeń Chrome za pomocą Puppeteer

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

Zanim rozpoczniesz

Skopiuj lub sklonuj repozytorium chrome-extensions-samples. Jako rozszerzenie testowe użyjemy wersji demonstracyjnej interfejsu History API w wersji api-samples/history/showHistory.

Musisz też zainstalować Node.JS, czyli środowisko wykonawcze, na którym działa Puppeteer.

Pisanie testu

Krok 1. Utwórz projekt Node.js

Musimy skonfigurować podstawowy projekt Node.js. W nowym folderze utwórz plik package.json z tymi elementami:

pacakge.json:

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

Podobnie jak w przypadku pliku manifest.json rozszerzenia, ten plik jest wymagany przez wszystkie projekty węzłów.

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 my użyjemy narzędzia do uruchamiania testów Jest, aby nadać naszemu kodowi dodatkową strukturę.

Krok 3. Utwórz punkt wejścia

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

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

Krok 4. Uruchom przeglądarkę

Zaktualizuj beforeEach i afterEach, aby uruchomić i zamknąć przeglądarkę. Jeśli chcesz przeprowadzić wiele testów, rozważ użycie tej samej przeglądarki. Nie zalecamy jednak stosowania tej metody, ponieważ zmniejsza ona 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,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

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

Krok 5. Dodaj alias

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

package.json:

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

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

Krok 6. Otwórz wyskakujące okienko

Dodamy podstawowy test, który otwiera wyskakujące okienko na nowej stronie. Musimy to zrobić, ponieważ Puppeteer nie obsługuje uzyskiwania dostępu do wyskakującego okienka rozszerzenia z wyskakującego okienka. Dodaj ten kod:

index.test.js:

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

Krok 7. Zapisz bieżący stan

Spróbujmy coś zadeklarować, aby nasz test zakończył się niepowodzeniem, jeśli rozszerzenie nie działa zgodnie z oczekiwaniami. Wiemy, że wyskakujące okienko powinno wyświetlać ostatnio odwiedzone strony, więc sprawdźmy, czy tak się dzieje:

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

Krok 8. Przeprowadź test

Aby przeprowadzić test, użyj npm start. Powinien pojawić się komunikat o powodzeniu testu.

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

Następne kroki

Gdy opanujesz podstawy, spróbuj utworzyć zestaw testów dla swojego rozszerzenia. Więcej informacji o możliwościach korzystania z Puppeteer znajdziesz w dokumentacji API. Opisane są w niej tylko niektóre z dostępnych funkcji.