Selector e asserzioni
Individuare gli elementi e verificare lo stato
Selector e asserzioni è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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 Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Buoni selettori producono test stabili
Il modo in cui trovate gli elementi determina la solidità dei test. I selettori legati alle classi CSS o alla struttura del DOM si rompono a ogni redesign. I locator semantici rivolti all'utente resistono ai refactoring perché riflettono ciò che gli utenti percepiscono realmente.
getByRole: il locator preferito
getByRole trova gli elementi in base al ruolo di accessibilità e al nome accessibile. È il locator più resistente e funge anche da verifica dell'accessibilità.
page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });getByLabel e getByPlaceholder
Per i campi dei moduli, cercateli tramite l'etichetta associata o il placeholder, proprio come farebbe un utente.
page.getByLabel('Email address');
page.getByPlaceholder('Search products');getByText e getByTestId
getByText individua il testo visibile. Quando non esiste un riferimento semantico, usate come alternativa getByTestId, che legge un attributo data-testid aggiunto intenzionalmente.
page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">Evitare i selettori CSS fragili
Potete comunque usare page.locator('.css-selector'), ma consideratelo l'ultima risorsa. I nomi delle classi e la nidificazione cambiano spesso; ruoli ed etichette molto più raramente.
// Fragile, avoid when possible:
page.locator('div.row > button.primary');Asserzioni web-first
L'expect di Playwright per i locator segue il principio web-first: riprova automaticamente finché la condizione non viene soddisfatta o scade il timeout. Questa è la chiave per ottenere asserzioni non instabili.
await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();Matcher comuni per le asserzioni
Il matcher descrive lo stato previsto di un elemento o di una pagina.
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);Verificare il numero di elementi nelle liste
Per verificare elementi ripetuti, individuate tutti gli elementi e verificatene il numero. Il locator corrisponde a ogni elemento e toHaveCount riprova finché il risultato non è stabile.
const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');Asserzioni negative
Usate .not per verificare che qualcosa sia assente o nascosto, ad esempio dopo l'eliminazione di un elemento.
await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();Filtrare e concatenare i locator
Affinate un locator con filter oppure concatenatelo per limitare la ricerca all'interno di un elemento padre, mantenendo precise le asserzioni.
const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();Perché il web-first è migliore del polling manuale
Le asserzioni web-first riprovano l'intera espressione, non si limitano a rileggere uno snapshot obsoleto. Di conseguenza await expect(loc).toHaveText('Done') attende che il testo venga visualizzato, eliminando le condizioni di gara che affliggono le attese scritte manualmente.
Verifica rapida
Scegliete il locator più resistente.
Riepilogo
Preferite i locator semantici: getByRole, getByLabel, getByText, usando getByTestId come alternativa. Eseguite le asserzioni con matcher web-first (toBeVisible, toHaveText, toHaveCount, toHaveURL) che riprovano automaticamente, e usate .not e filter per mantenere la precisione.
Domande Frequenti
La lezione «Selector e asserzioni» è gratuita?
Sì — il testo completo di «Selector e asserzioni» è 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 Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Selector e asserzioni»?
Individuare gli elementi e verificare lo stato Eserciti Angular 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 Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular 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 4.
Quanto tempo richiede la lezione «Selector e asserzioni»?
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 Angular Academy?
Sì. Ogni lezione Angular 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
- Panoramica dei test E2E
- Scrivere test con Playwright
- Selector e asserzioni
- Integrazione con la CI