Testy end-to-end
Weryfikowanie pełnych ścieżek użytkownika za pomocą testów end-to-end.
Testy end-to-end to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.
Testowanie jak użytkownik
Testowanie end-to-end obsługuje prawdziwą aplikację w prawdziwej przeglądarce, klikając przyciski i wypełniając formularze dokładnie tak, jak zrobiłby to użytkownik. Weryfikuje, czy wszystko — od interfejsu użytkownika po backend — działa razem.
Dlaczego E2E
Testy jednostkowe sprawdzają poszczególne elementy w izolacji, ale tylko testy e2e potwierdzają pełną ścieżkę: użytkownik może się zalogować, nawigować, wysłać formularz i zobaczyć wynik. Wykrywają luki integracyjne, których nie zauważą żadne inne testy.
Instalowanie Cypress
Cypress to popularny framework e2e z interaktywnym runnerem testów. Należy zainstalować go jako zależność deweloperską i uruchomić jego runner.
npm install -D cypress
npx cypress openStruktura testu Cypress
Test Cypress używa describe do grupowania testów oraz it dla każdego scenariusza, odwzorowując dobrze znaną składnię testów.
describe("Login flow", () => {
it("logs in a user", () => {
// steps go here
})
})Otwieranie strony
Należy użyć cy.visit, aby załadować adres URL w przeglądarce — to punkt wyjścia większości testów.
cy.visit("http://localhost:5173/login")Znajdowanie elementów
cy.get wybiera elementy za pomocą selektora CSS. Cypress automatycznie czeka na pojawienie się elementów, ograniczając liczbę niestabilnych testów.
cy.get("input[name=email]")
cy.get("button[type=submit]")Wpisywanie tekstu do pól
Do zaznaczonego pola wejściowego należy dołączyć type, aby zasymulować wpisywanie z klawiatury.
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")Klikanie elementów
Do interakcji z przyciskami i linkami, tak jak zrobiłby to użytkownik, należy użyć click.
cy.get("button[type=submit]").click()Weryfikowanie rezultatu
Po wykonaniu interakcji należy sprawdzić za pomocą should, co użytkownik powinien teraz zobaczyć. Cypress ponawia asercje, dopóki nie zakończą się powodzeniem lub nie upłynie limit czasu.
cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")Kompletny test E2E
Połączenie tych kroków daje czytelny test rzeczywistego przepływu użytkownika.
describe("Login flow", () => {
it("logs in successfully", () => {
cy.visit("/login")
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")
cy.get("button[type=submit]").click()
cy.url().should("include", "/dashboard")
})
})Alternatywa dla Playwright
Playwright to kolejne zaawansowane narzędzie e2e o podobnych założeniach: uruchamia przeglądarkę, nawiguje, wykonuje interakcje i przeprowadza asercje. API jest inne, ale sposób myślenia o testowaniu pozostaje taki sam.
// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)Szybki test
Sprawdź swoją wiedzę na temat testów e2e.
Podsumowanie
Testy end-to-end uruchamiają rzeczywistą aplikację w przeglądarce. W przypadku Cypress testy należy organizować za pomocą describe/it, strony ładować za pomocą cy.visit, elementy wyszukiwać za pomocą cy.get, wykonywać interakcje za pomocą type i click, a wynik weryfikować za pomocą should. Playwright opiera się na tych samych założeniach. W następnym kroku zoptymalizują Państwo build i opublikują go.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Testy end-to-end” jest bezpłatna?
Tak — pełny tekst „Testy end-to-end” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Testy end-to-end”?
Weryfikowanie pełnych ścieżek użytkownika za pomocą testów end-to-end. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Testy end-to-end”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.