Co to jest testowanie front-endu?

Co to jest testowanie front-endu?

Testowanie front-endu jest techniką testową, w której Graficzny interfejs użytkownika (GUI), funkcjonalność i użyteczność Aplikacja internetowa są testowane. Celem jest potwierdzenie, że warstwa prezentacji pozostaje wolna od błędów w kolejnych aktualizacjach.

Na przykład, jeśli wpiszesz swoje imię i nazwisko w polu formularza, cyfry nie powinny być akceptowane. Sprawdzanie wyrównania elementów interfejsu graficznego to kolejny codzienny problem.

Oprócz tego przeprowadzane są testy front-end:

• Testowanie regresji CSS: drobne zmiany CSS, które psują wygląd front-endu.
• JavaZmiany w skrypcie które powodują, że front-end staje się niefunkcjonalny.
• Kontrole wydajności od tego, jak szybko interfejs staje się użyteczny.

Jak stworzyć plan testowania witryny frontendowej?

Utworzenie planu testów front-end to prosty, czteroetapowy proces.

Krok 1) Znajdź narzędzia do zarządzania planem testów.

Krok 2) Określ budżet na testy front-end.

Krok 3) Ustaw harmonogram całego procesu.

Krok 4) Określ zakres projektu. Zakres obejmuje:

• Operasystemy i przeglądarki używane przez Twoich użytkowników
• Popularne urządzenia używane przez odbiorców
• Umiejętności techniczne publiczności
• Prędkość połączenia internetowego odbiorców

Dlaczego warto stworzyć plan testów front-end?

Poniższy diagram przedstawia dwa wymiary, które musi uwzględniać plan.

Plan określa, które przeglądarki i system operacyjny Projekt musi obejmować. Możliwości kombinacji są niezliczone, więc plan pozwala ograniczyć zarówno nakład pracy, jak i koszty.

Plan ten niesie ze sobą dwie wyraźne korzyści:

• Daje całkowitą przejrzystość co do zakresu projektu.
• Daje pewność, gdy projekt jest wdrażany.

Wskazówki dotyczące lepszego testowania front-endu

Wskazówki dotyczące tworzenia lepszego planu testów front-end:

• Rozsądnie przygotuj budżet, zasoby i czas.
• Użyj przeglądarki bez interfejsu graficznego, aby testy wykonywały się szybciej.
• Zmniejsz ilość renderowania DOM w testach, aby przyspieszyć wykonanie.
• Izoluj przypadki testowe, aby szybko znaleźć przyczynę błędu i aby cykl usuwania usterek był krótki.
• Umożliw ponowne wykorzystanie skryptów testowych, aby przyspieszyć cykle regresji.
• Stosuj spójną konwencję nazewnictwa dla skryptów testowych.
• Zawiąż każdy walizka testowa do jednego widocznego zachowania.

Narzędzia do testowania front-endu

Nie ma pojedynczego narzędzia obejmującego skrypty, arkusze stylów i elementy wizualne, dlatego zespoły łączą kilka.

Narzędzie do testowania JS: Jasmine

Jaśmin jest środowiskiem programistycznym opartym na zachowaniu, służącym do testowania JAVASCRIPT Koncentruje się na wartości biznesowej, a nie na szczegółach technicznych, ma przejrzystą składnię i nie jest zależny od żadnego innego frameworka. Opiera się na frameworkach do testów jednostkowych, takich jak JSSpec, ScrewUnit, JSpec i RSpec. Jest i Vitest to obecnie powszechnie stosowane alternatywy.

Narzędzie do testowania funkcjonalnego: Selenium

Selenium przeprowadza kompleksowe testy w różnych przeglądarkach i na różnych platformach, takich jak Windows, macOS i Linux, i umożliwia pisanie testów w Java, Python, C# i inne języki. Selenium IDE dodaje nagrywanie i odtwarzanie, więc pierwszy skrypt nie wymaga żadnego kodu. Cypress i Playwright poruszają ten sam obszar z wbudowanym oczekiwaniem i tracing.

CSS i narzędzia wizualne: CSSLint i BackstopJS

CSSLint jest otwartym kodem źródłowym napisanym w JavaSkrypt uruchamiany w przeglądarce i z wiersza poleceń. Nie jest już aktywnie utrzymywany, dlatego zespoły teraz sprawdzają arkusze stylów za pomocą Stylelint lub obsługi CSS w ESLint.

BackstopJS Obsługuje wizualne testy regresyjne. Renderuje strony w przeglądarce Chrome bez interfejsu graficznego, porównuje każdy zrzut ekranu z zatwierdzonym obrazem referencyjnym i umożliwia konfigurację rozmiarów okienek podglądu oraz warunków zaliczenia/niezaliczenia.

Dwa wyzwania dotyczą każdego narzędzia do testowania front-end:

• Automatyzacja testów wymaga dużego wysiłku na etapie początkowym.
• Narzędzia mogą mieć problemy ze zgodnością z niektórymi systemami operacyjnymi i wersjami przeglądarek.

Optymalizacja wydajności front-endu

Testowanie wydajności front-endu odpowiada na jedno pytanie: jak szybko strona się ładuje i staje się użyteczna? Dobrą praktyką jest dostrojenie jej do pojedynczego użytkownika, zanim aplikacja osiągnie wysokie obciążenie. test wydajności.

Dlaczego optymalizacja wydajności front-endu jest ważna?

Kiedyś optymalizacja wydajności oznaczała dostrajanie serwera, ponieważ większość stron internetowych była statyczna, a przetwarzanie odbywało się po stronie serwera.

Wraz ze wzrostem dynamiki aplikacji internetowych, znacznie więcej pracy przeniosło się do przeglądarki: kod frameworka, skrypty zewnętrzne, obrazy i czcionki. Kod po stronie klienta stał się wąskim gardłem.

Jaka jest korzyść z optymalizacji wydajności front-endu?

• Problemy po stronie klienta negatywnie wpływają na komfort użytkowania tak samo bezpośrednio jak wąskie gardła serwera, dlatego oba te czynniki zasługują na uwagę.
• Większa część oczekiwania użytkownika następuje po odpowiedzi serwera — pobraniu, przeanalizowaniu i wyrenderowaniu — dlatego praca front-endu często przynosi większy widoczny zysk.
• Rozwiązania takie jak kompresja obrazów, wstrzymanie wykonywania skryptów i rezerwowanie miejsca na multimedia są tańsze niż przebudowa zaplecza.
• Podstawowe wskaźniki internetowe — największe malowanie treści, interakcja z następnym malowaniem i skumulowany układ Shift — udostępnij wyniki w formie wspólnej tablicy wyników.

Narzędzia do testowania wydajności frontonu

1. Statystyki PageSpeed

PageSpeed ​​Insights is GoogleBezpłatna usługa analizy stron. Przeprowadza audyt Lighthouse, raportuje wskaźniki Core Web Vitals i wyświetla sugestie dotyczące skrócenia czasu ładowania. Lighthouse jest również dostępny w Chrome DevTools.

2. Pingdom

Pingdom to usługa monitorowania stron internetowych i ich wydajności. Informuje klientów o spowolnieniu działania strony lub jej wyłączeniu, dzięki czemu problemy pojawiają się, zanim użytkownicy je zgłoszą.

Cechy:

• Sprawdza wszystkie części strony internetowej
• Zapewnia przegląd wydajności
• Traces twoja historia wyników
• Umożliwia testowanie z wielu lokalizacji

FAQ