Test end-to-end
Verifichi i flussi completi degli utenti con test end-to-end.
Test end-to-end è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.
Testare come un utente
Il testing end-to-end utilizza l'applicazione reale in un browser reale, facendo clic sui pulsanti e compilando i moduli esattamente come farebbe un utente. Verifica che tutto, dall'interfaccia al backend, funzioni insieme.
Perché i test E2E?
I test di unità verificano le singole parti in isolamento, ma solo i test e2e confermano l'intero percorso: un utente può accedere, spostarsi nell'applicazione, inviare un modulo e visualizzare il risultato. Individuano lacune nell'integrazione che nessun altro test riesce a rilevare.
Installare Cypress
Cypress è un framework e2e diffuso, dotato di un test runner interattivo. Lo installi come dipendenza di sviluppo e apra il relativo runner.
npm install -D cypress
npx cypress openStruttura dei test Cypress
Un test Cypress utilizza describe per raggruppare i test e it per ogni scenario, seguendo una sintassi di testing familiare.
describe("Login flow", () => {
it("logs in a user", () => {
// steps go here
})
})Visitare una pagina
Utilizzi cy.visit per caricare un URL nel browser, il punto di partenza della maggior parte dei test.
cy.visit("http://localhost:5173/login")Individuare gli elementi
cy.get seleziona gli elementi utilizzando un selettore CSS. Cypress attende automaticamente che gli elementi compaiano, riducendo i test intermittenti.
cy.get("input[name=email]")
cy.get("button[type=submit]")Digitazione nei campi di input
Concateni type a un campo di input selezionato per simulare la digitazione da tastiera.
cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")Fare clic sugli elementi
Utilizzi click per interagire con pulsanti e link, proprio come farebbe un utente.
cy.get("button[type=submit]").click()Verificare il risultato
Dopo l'interazione, verifichi con should ciò che l'utente dovrebbe ora visualizzare. Cypress ripete le asserzioni finché non hanno esito positivo o non scade il timeout.
cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")Un test E2E completo
Riuniteli, questi passaggi formano un test leggibile di un flusso utente reale.
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")
})
})L'alternativa Playwright
Playwright è un altro valido strumento e2e con concetti simili: avvia un browser, esegue la navigazione, interagisce ed esegue asserzioni. L'API è diversa, ma l'approccio ai test è lo stesso.
// 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/)Verifica rapida
Metta alla prova le Sue conoscenze sui test e2e.
Riepilogo
I test end-to-end eseguono l'app reale in un browser. Con Cypress, strutturi i test con describe/it, carichi le pagine con cy.visit, trovi gli elementi con cy.get, interagisca tramite type e click e verifichi con should. Playwright segue le stesse idee. Ora ottimizzerà e distribuirà la Sua build.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «Test end-to-end» è gratuita?
Sì — il testo completo di «Test end-to-end» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.
Cosa imparerò in «Test end-to-end»?
Verifichi i flussi completi degli utenti con test end-to-end. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «Test end-to-end»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.