Testowanie Komponentów

Dzięki Przeglądarkowemu Runnerowi WebdriverIO możesz uruchamiać testy w rzeczywistej przeglądarce stacjonarnej lub mobilnej, używając WebdriverIO i protokołu WebDriver do automatyzacji i interakcji z tym, co jest renderowane na stronie. To podejście ma wiele zalet w porównaniu do innych frameworków testowych, które pozwalają testować tylko z użyciem JSDOM.

Jak to działa?

Browser Runner używa Vite do renderowania strony testowej i inicjalizacji frameworka testowego, aby uruchamiać testy w przeglądarce. Obecnie obsługuje tylko Mochę, ale Jasmine i Cucumber są w planach. Umożliwia to testowanie dowolnych komponentów, nawet dla projektów, które nie używają Vite.

Serwer Vite jest uruchamiany przez testrunner WebdriverIO i skonfigurowany tak, aby można było używać wszystkich reporterów i usług, których używasz do normalnych testów e2e. Ponadto inicjalizuje instancję browser, która pozwala na dostęp do podzbioru API WebdriverIO w celu interakcji z dowolnymi elementami na stronie. Podobnie jak w testach e2e, możesz uzyskać dostęp do tej instancji poprzez zmienną browser dołączoną do globalnego zakresu lub importując ją z @wdio/globals, w zależności od ustawienia injectGlobals.

WebdriverIO ma wbudowane wsparcie dla następujących frameworków:

• Nuxt: Testrunner WebdriverIO wykrywa aplikację Nuxt i automatycznie konfiguruje composables projektu oraz pomaga w mockowaniu backendu Nuxt, więcej informacji znajdziesz w dokumentacji Nuxt
• TailwindCSS: Testrunner WebdriverIO wykrywa, czy używasz TailwindCSS i prawidłowo ładuje środowisko do strony testowej

Konfiguracja

Aby skonfigurować WebdriverIO do testowania jednostkowego lub komponentowego w przeglądarce, zainicjuj nowy projekt WebdriverIO za pomocą:

npm init wdio@latest ./
# lub
yarn create wdio ./

Po uruchomieniu kreatora konfiguracji wybierz browser do uruchamiania testów jednostkowych i komponentowych oraz wybierz jeden z presetów, jeśli chcesz, lub wybierz "Other", jeśli chcesz uruchamiać tylko podstawowe testy jednostkowe. Możesz również skonfigurować niestandardową konfigurację Vite, jeśli już używasz Vite w swoim projekcie. Więcej informacji znajdziesz we wszystkich opcjach runnera.

informacja

Uwaga: WebdriverIO domyślnie uruchamia testy przeglądarkowe w trybie headless w środowisku CI, np. gdy zmienna środowiskowa CI jest ustawiona na '1' lub 'true'. Możesz ręcznie skonfigurować to zachowanie za pomocą opcji headless dla runnera.

Na końcu tego procesu powinieneś znaleźć wdio.conf.js, który zawiera różne konfiguracje WebdriverIO, w tym właściwość runner, np.:

wdio.comp.conf.js

loading...

View on GitHub

Definiując różne capabilities, możesz uruchamiać testy w różnych przeglądarkach, równolegle, jeśli chcesz.

Jeśli nadal nie jesteś pewien, jak wszystko działa, obejrzyj poniższy tutorial o tym, jak rozpocząć Testowanie Komponentów w WebdriverIO:

Test Harness

To całkowicie od ciebie zależy, co chcesz uruchamiać w swoich testach i jak chcesz renderować komponenty. Jednakże zalecamy używanie Testing Library jako frameworka narzędziowego, ponieważ oferuje on wtyczki dla różnych frameworków komponentów, takich jak React, Preact, Svelte i Vue. Jest bardzo przydatny do renderowania komponentów na stronie testowej i automatycznie czyści te komponenty po każdym teście.

Możesz łączyć prymitywy z Testing Library z komendami WebdriverIO według uznania, np.:

component-testing/svelte-example.js

loading...

View on GitHub

Uwaga: używanie metod renderowania z Testing Library pomaga usuwać utworzone komponenty między testami. Jeśli nie używasz Testing Library, upewnij się, że dołączasz swoje komponenty testowe do kontenera, który jest czyszczony między testami.

Skrypty konfiguracyjne

Możesz skonfigurować swoje testy, uruchamiając dowolne skrypty w Node.js lub w przeglądarce, np. wstrzykując style, mockując API przeglądarki lub łącząc się z usługą zewnętrzną. Hooki WebdriverIO mogą być używane do uruchamiania kodu w Node.js, podczas gdy opcja mochaOpts.require pozwala importować skrypty do przeglądarki przed załadowaniem testów, np.:

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // dostarczenie skryptu konfiguracyjnego do uruchomienia w przeglądarce
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // konfiguracja środowiska testowego w Node.js
    }
    // ...
}

Na przykład, jeśli chcesz mockować wszystkie wywołania fetch() w swoim teście z następującym skryptem konfiguracyjnym:

import { fn } from '@wdio/browser-runner'

// uruchom kod przed załadowaniem wszystkich testów
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // uruchom kod po załadowaniu pliku testowego
}

export const mochaGlobalTeardown = () => {
    // uruchom kod po wykonaniu pliku specyfikacji
}

Teraz w swoich testach możesz dostarczyć niestandardowe wartości odpowiedzi dla wszystkich żądań przeglądarki. Przeczytaj więcej o globalnych fixtures w dokumentacji Mocha.

Obserwowanie plików testowych i aplikacji

Istnieje wiele sposobów, w jakie możesz debugować swoje testy przeglądarkowe. Najłatwiejszy to uruchomienie testowykonawcy WebdriverIO z flagą --watch, np.:

$ npx wdio run ./wdio.conf.js --watch

Spowoduje to początkowe uruchomienie wszystkich testów i zatrzymanie po zakończeniu. Następnie możesz wprowadzać zmiany w poszczególnych plikach, które zostaną ponownie uruchomione indywidualnie. Jeśli ustawisz filesToWatch wskazujący na pliki twojej aplikacji, wszystkie testy zostaną ponownie uruchomione, gdy wprowadzisz zmiany w aplikacji.

Debugowanie

Chociaż nie jest (jeszcze) możliwe ustawienie punktów przerwania w twoim IDE i ich rozpoznawanie przez zdalną przeglądarkę, możesz użyć komendy debug, aby zatrzymać test w dowolnym momencie. Pozwala to otworzyć DevTools, aby następnie debugować test, ustawiając punkty przerwania w zakładce źródeł.

Gdy komenda debug zostanie wywołana, otrzymasz również interfejs repl Node.js w swoim terminalu, mówiący:

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

Naciśnij Ctrl lub Command + c lub wprowadź .exit, aby kontynuować test.

Uruchamianie za pomocą Selenium Grid

Jeśli masz skonfigurowany Selenium Grid i uruchamiasz przeglądarkę przez ten grid, musisz ustawić opcję host runnera przeglądarki, aby umożliwić przeglądarce dostęp do odpowiedniego hosta, na którym serwowane są pliki testowe, np.:

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // adres IP sieci maszyny, która uruchamia proces WebdriverIO
        host: 'http://172.168.0.2'
    }]
}

Zapewni to, że przeglądarka poprawnie otworzy odpowiednią instancję serwera hostowaną na instancji, która uruchamia testy WebdriverIO.

Przykłady

Możesz znaleźć różne przykłady testowania komponentów przy użyciu popularnych frameworków komponentów w naszym repozytorium przykładów.