Testowanie rozszerzeń Chrome za pomocą Puppeteer

Puppeteer zapewnia platformę do tworzenia automatycznych testów witryn, która obejmuje też możliwość testowania rozszerzeń do Chrome. Są to kompleksowe testy, które służą do sprawdzania funkcjonalności witryny lub rozszerzenia po wbudowaniu ich do produktu końcowego. W tym samouczku pokazujemy, jak napisać podstawowy test rozszerzenia z naszego repozytorium przykładów.

Zanim zaczniesz

Skopiuj lub pobierz repozytorium chrome-extensions-samples. Jako rozszerzenia do testów użyjemy wersji demonstracyjnej historii interfejsu API w api-samples/history/showHistory.

Musisz też zainstalować Node.JS – środowisko wykonawcze Puppeteer.

Pisanie testu

Krok 1. Uruchom projekt Node.JS

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

pacakge.json:

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

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

Krok 2. Zainstaluj Puppeteer i Jestem

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

Możesz napisać samodzielne testy Puppeteer, ale użyjemy Jesta jako narzędzia do uruchamiania testów, aby zapewnić dodatkową strukturę kodu.

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ę. Przeprowadzając wiele testów, możesz użyć tej samej przeglądarki. Nie zalecamy jednak tego rozwiązania, ponieważ zmniejsza to izolację między testami i może powodować wpływ jednego testu na wynik drugiego.

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ć przeprowadzanie testów, dodaj alias do pliku package.json:

package.json:

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

Spowoduje to uruchomienie wszystkich plików z końcówką .test.js w bieżącym katalogu.

Krok 6. Otwórz wyskakujące okienko

Dodajmy podstawowy test, który otwiera wyskakujące okienko na nowej stronie. Musimy to zrobić, ponieważ Puppeteer nie umożliwia dostępu do wyskakującego okienka rozszerzenia. 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. Potwierdź bieżący stan

Zajmijmy się czymś, co pozwoli nam zakończyć test, jeśli rozszerzenie nie będzie działać zgodnie z oczekiwaniami. Wiemy, że w wyskakującym okienku powinny się znajdować ostatnio odwiedzone strony, sprawdźmy więc, czy jest jedna:

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. Uruchom test

Aby uruchomić test, użyj polecenia npm start. Powinny się wyświetlić dane wyjściowe z informacją, że test zaliczony.

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

Dalsze kroki

Gdy już opanujesz podstawy, spróbuj utworzyć pakiet testowy dla własnego rozszerzenia. Dokumentacja interfejsu API Puppeteer zawiera więcej informacji o dostępnych możliwościach, które nie zostały tu opisane.