Test end-to-end di form e flussi utente
Automatizzi l'invio di form a più passaggi e i flussi di navigazione con gli oggetti pagina di Playwright.
Test end-to-end di form e flussi utente è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. 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 React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Strategia per test E2E dei moduli
I test E2E dei moduli simulano l'intero percorso dell'utente: accedere alla pagina, compilare i campi, inviare il modulo, gestire gli errori di convalida e verificare l'esito positivo.
Page Object Model
Il Page Object Model (POM) incapsula in una classe i selettori e le interazioni di una pagina, rendendo i test più leggibili e riducendo la duplicazione.
class LoginPage {
constructor(private page: Page) {}
async goto() { await this.page.goto('/login'); }
async fillEmail(email: string) { await this.page.getByLabel('Email').fill(email); }
async fillPassword(pw: string) { await this.page.getByLabel('Password').fill(pw); }
async submit() { await this.page.getByRole('button', { name: /log in/i }).click(); }
async getError() { return this.page.getByRole('alert').textContent(); }
}Utilizzare il Page Object nei test
Utilizzando i page object, i test diventano descrizioni delle azioni dell'utente a livello di intenzione: sono facili da leggere e da mantenere.
test('successful login redirects to dashboard', async ({ page }) => {
const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.fillEmail('alice@example.com');
await loginPage.fillPassword('password123');
await loginPage.submit();
await expect(page).toHaveURL('/dashboard');
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});Testare gli errori di convalida
Invii dati non validi o vuoti e verifichi i messaggi di errore visualizzati dall'interfaccia.
test('shows validation errors on empty submit', async ({ page }) => {
await page.goto('/register');
await page.getByRole('button', { name: 'Create account' }).click();
await expect(page.getByText('Email is required')).toBeVisible();
await expect(page.getByText('Password must be at least 8 characters')).toBeVisible();
});Test dei moduli a più passaggi
Per i wizard a più passaggi, avanzi attraverso ogni passaggio verificando che il modulo proceda e conservi i dati inseriti in precedenza.
test('completes 3-step signup', async ({ page }) => {
await page.goto('/signup');
// Step 1
await page.getByLabel('First Name').fill('Alice');
await page.getByRole('button', { name: 'Next' }).click();
// Step 2
await page.getByLabel('Plan').selectOption('pro');
await page.getByRole('button', { name: 'Next' }).click();
// Step 3
await page.getByLabel('Card Number').fill('4242424242424242');
await page.getByRole('button', { name: 'Complete' }).click();
await expect(page.getByText('Welcome, Alice!')).toBeVisible();
});Simulare le API in Playwright
Utilizzi page.route() per intercettare le chiamate API e restituire risposte simulate: è utile per testare i casi limite senza un backend reale.
await page.route('/api/register', async route => {
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ token: 'fake-token' }),
});
});
await page.goto('/register');
// ...fill and submit form
await expect(page).toHaveURL('/dashboard');Testare il caricamento di file
Utilizzi setInputFiles() per simulare il caricamento di un file in Playwright.
test('uploads a profile photo', async ({ page }) => {
await page.goto('/profile');
const fileInput = page.getByLabel('Profile photo');
await fileInput.setInputFiles('./fixtures/avatar.png');
await page.getByRole('button', { name: 'Upload' }).click();
await expect(page.getByAltText('Profile photo')).toBeVisible();
});Riutilizzare lo stato di autenticazione
Acceda una volta, salvi lo stato di archiviazione del browser e lo riutilizzi tra i test per evitare di ripetere i flussi di accesso.
// auth.setup.ts
test('authenticate', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').fill('alice@example.com');
await page.getByLabel('Password').fill('password');
await page.getByRole('button', { name: 'Log in' }).click();
await page.context().storageState({ path: 'e2e/.auth/user.json' });
});
// playwright.config.ts — use storageState in other tests
use: { storageState: 'e2e/.auth/user.json' }Testare il recupero dagli errori
Simuli i malfunzionamenti di rete e verifichi che l'utente possa riprovare o visualizzi un messaggio di errore utile.
await page.route('/api/submit', route => route.abort());
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Network error. Please try again.')).toBeVisible();
await page.unroute('/api/submit');
// Now the real request goes through
await page.getByRole('button', { name: 'Retry' }).click();Testare la navigazione da tastiera
Verifichi che i moduli siano completamente accessibili da tastiera spostandosi tra i campi con il tasto Tab e inviandoli con Invio.
test('submits form with keyboard only', async ({ page }) => {
await page.goto('/contact');
await page.keyboard.press('Tab'); // focus name
await page.keyboard.type('Alice');
await page.keyboard.press('Tab'); // focus email
await page.keyboard.type('alice@example.com');
await page.keyboard.press('Tab'); // focus submit
await page.keyboard.press('Enter');
await expect(page.getByText('Message sent!')).toBeVisible();
});Fixture per i dati di test
Utilizzi le fixture di Playwright per condividere in modo ordinato la logica di configurazione, ad esempio la creazione di un utente di test, tra più test.
// fixtures.ts
const test = base.extend<{ testUser: User }>({
testUser: async ({}, use) => {
const user = await createTestUser();
await use(user);
await deleteTestUser(user.id);
},
});
// In a test file:
test('edits profile', async ({ page, testUser }) => {
await page.goto(`/users/${testUser.id}/edit`);
});Esecuzione parallela dei test
Playwright esegue i test in parallelo per impostazione predefinita, distribuendoli tra più worker. Utilizzi test.describe.serial solo per i test che devono essere eseguiti in ordine.
Verifica rapida
Qual è il principale vantaggio del Page Object Model (POM) nei test E2E?
Riepilogo
I test E2E dei moduli utilizzano i Page Object per la manutenibilità, page.route() per simulare le API, setInputFiles() per i caricamenti e lo stato di archiviazione per riutilizzare le sessioni di autenticazione. Testi la convalida, i flussi a più passaggi e la navigazione da tastiera per coprire i percorsi reali degli utenti.
Domande Frequenti
La lezione «Test end-to-end di form e flussi utente» è gratuita?
Sì — il testo completo di «Test end-to-end di form e flussi utente» è 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 React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Test end-to-end di form e flussi utente»?
Automatizzi l'invio di form a più passaggi e i flussi di navigazione con gli oggetti pagina di Playwright. Eserciti React 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 React Academy?
Non è richiesta alcuna esperienza precedente. React 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 4 di 4.
Quanto tempo richiede la lezione «Test end-to-end di form e flussi utente»?
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 React Academy?
Sì. Ogni lezione React 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.
Tutte le lezioni di questo corso
- Integration testing con React Testing Library
- Test di UI asincrone e chiamate API con MSW
- Introduzione a Playwright per React
- Test end-to-end di form e flussi utente