Tryb przeglądarki eksperymentalny

Ta strona opisuje eksperymentalną funkcję trybu przeglądarki w Vitest API, która umożliwia natywne uruchamianie testów w przeglądarce i dostęp do globalnych obiektów, takich jak window i document. Funkcja ta jest wciąż w fazie rozwoju, a jej API może ulec zmianom w przyszłości.

Kompatybilność z przeglądarkami

Vitest używa serwera deweloperskiego Vite do uruchamiania testów, dlatego obsługujemy tylko funkcje określone w opcji esbuild.target (domyślnie esnext).

Domyślnie Vite celuje w przeglądarki, które obsługują natywne moduły ES, natywny dynamiczny import ESM i import.meta. Ponadto używamy BroadcastChannel do komunikacji między elementami iframe:

• Chrome >=87
• Firefox >=78
• Safari >=15.4
• Edge >=88

Motywacja

Stworzyliśmy tryb przeglądarki Vitest, aby ulepszyć proces testowania i uzyskać dokładniejsze oraz bardziej wiarygodne wyniki. To eksperymentalne rozszerzenie API testowania pozwala programistom uruchamiać testy natywnie w przeglądarce. W tej sekcji omówimy motywacje stojące za tą funkcją i korzyści, jakie oferuje w testowaniu.

Różne podejścia do testowania

Istnieją różne sposoby testowania kodu JavaScript. Niektóre frameworki testowe symulują środowiska przeglądarki w Node.js, podczas gdy inne uruchamiają testy w prawdziwych przeglądarkach. W tym kontekście, jsdom symuluje środowisko przeglądarki i jest używany z narzędziami do uruchamiania testów, takimi jak Jest lub Vitest. Z kolei WebdriverIO i Cypress umożliwiają testowanie aplikacji w prawdziwej przeglądarce. Playwright dostarcza silnik przeglądarki.

Ostrzeżenie dotyczące symulacji

Testowanie programów JavaScript w symulowanych środowiskach, takich jak jsdom lub happy-dom, uprościło konfigurację testów i zapewniło łatwe w użyciu API, dzięki czemu są one odpowiednie dla wielu projektów i zwiększają zaufanie do wyników testów. Należy jednak pamiętać, że te narzędzia symulują środowisko przeglądarki, co może prowadzić do rozbieżności z rzeczywistym zachowaniem przeglądarki. Dlatego mogą wystąpić wyniki fałszywie pozytywne lub negatywne.

Aby osiągnąć najwyższy poziom zaufania do testów, kluczowe jest testowanie w prawdziwej przeglądarce. Dlatego opracowaliśmy tryb przeglądarki w Vitest, umożliwiając programistom natywne uruchamianie testów w przeglądarce i uzyskanie dokładniejszych oraz bardziej wiarygodnych wyników. Testowanie w przeglądarce daje programistom większą pewność, że aplikacja będzie działać zgodnie z oczekiwaniami.

Ograniczenia

Podczas korzystania z trybu przeglądarki Vitest należy wziąć pod uwagę następujące ograniczenia:

Wczesna faza rozwoju

Tryb przeglądarki Vitest jest wciąż w fazie rozwoju. W związku z tym może nie być jeszcze w pełni zoptymalizowany i mogą występować błędy lub problemy, które nie zostały jeszcze rozwiązane. Zaleca się uzupełnienie testów w trybie przeglądarki Vitest o testy z wykorzystaniem samodzielnych narzędzi, takich jak WebdriverIO, Cypress lub Playwright.

Dłuższa inicjalizacja

Tryb przeglądarki Vitest wymaga uruchomienia dostawcy i przeglądarki podczas procesu inicjalizacji, co może zająć więcej czasu. To może wydłużyć czas inicjalizacji w porównaniu z innymi metodami testowania.

Konfiguracja

Aby włączyć tryb przeglądarki w Vitest, użyj flagi --browser lub ustaw browser.enabled na true w pliku konfiguracyjnym Vitest. Oto przykładowa konfiguracja z użyciem pola browser:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // nazwa przeglądarki jest wymagana
    },
  },
});

Typy opcji przeglądarki:

Opcje przeglądarki w Vitest zależą od dostawcy. Vitest zgłosi błąd, jeśli użyjesz --browser bez określenia nazwy przeglądarki w konfiguracji. Dostępne opcje:

• webdriverio (domyślnie) obsługuje następujące przeglądarki:
  • firefox
  • chrome
  • edge
  • safari
• playwright obsługuje następujące przeglądarki:
  • firefox
  • webkit
  • chromium

Testowanie międzyprzeglądarkowe:

Po określeniu nazwy przeglądarki w opcji browser, Vitest spróbuje uruchomić określoną przeglądarkę za pomocą WebdriverIO (domyślnie), a następnie uruchomić tam testy. Ta funkcja ułatwia testowanie międzyprzeglądarkowe i konfigurację w środowiskach takich jak CI (Continuous Integration, Integracja Ciągła). Jeśli nie chcesz używać WebdriverIO, możesz skonfigurować niestandardowego dostawcę przeglądarki za pomocą opcji browser.provider.

Aby określić przeglądarkę za pomocą CLI (Command Line Interface, Interfejs Linii Poleceń), użyj flagi --browser, po której następuje nazwa przeglądarki, w następujący sposób:

npx vitest --browser=chrome

Lub możesz przekazać opcje przeglądarki do CLI za pomocą notacji kropkowej:

npx vitest --browser.name=chrome --browser.headless

NOTE

Podczas korzystania z przeglądarki Safari z WebdriverIO, safaridriver musi zostać aktywowany przez uruchomienie sudo safaridriver --enable na urządzeniu.

Dodatkowo, podczas uruchamiania testów, Vitest spróbuje zainstalować odpowiednie sterowniki dla kompatybilności z safaridriver.

Tryb headless (bez interfejsu graficznego)

Tryb headless to kolejna opcja dostępna w trybie przeglądarki. W trybie headless przeglądarka działa w tle, bez interfejsu użytkownika, co czyni go przydatnym do uruchamiania testów automatycznych. Opcję headless w Vitest można ustawić na wartość boolean, aby włączyć lub wyłączyć tryb headless.

Oto przykładowa konfiguracja włączająca tryb headless:

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  },
});

Możesz także ustawić tryb headless za pomocą flagi --browser.headless w CLI, w następujący sposób:

npx vitest --browser.name=chrome --browser.headless

W takim przypadku Vitest uruchomi się w trybie headless przy użyciu przeglądarki Chrome.

Ograniczenia

Okna dialogowe blokujące wątek

Podczas korzystania z trybu przeglądarki Vitest należy pamiętać, że okna dialogowe blokujące wątek, takie jak alert lub confirm, nie mogą być używane natywnie. Dzieje się tak, ponieważ blokują one stronę internetową, co oznacza, że Vitest nie może kontynuować komunikacji ze stroną, powodując zawieszenie wykonania.

W takich sytuacjach Vitest zapewnia domyślne mocki z domyślnymi wartościami zwracanymi dla tych API. Zapewnia to, że jeśli użytkownik przypadkowo użyje synchronicznych API popup okien, wykonanie nie zawiesi się. Zaleca się jednak, aby użytkownik mockował te API dla lepszego doświadczenia użytkownika. Przeczytaj więcej w Mocking.