Selettore CSS

Un selettore CSS è lo stesso pattern che un foglio di stile usa per decidere a quali elementi si applica una regola. Gli strumenti di test lo riutilizzano per trovare gli elementi: Selenium tramite By.cssSelector, Playwright tramite page.locator(), Cypress tramite cy.get(). I selettori sono valutati nativamente dal browser, di solito sono più corti dell’XPath equivalente e la maggior parte degli sviluppatori front-end sa leggerli.

Esempio

#email                          id
.alert.alert-error              element with both classes
button[type="submit"]           tag plus attribute
[data-testid="checkout"]        dedicated test attribute
form.login > button             direct child
ul.results li:nth-child(2)      second list item
a[href^="/invoices/"]           attribute starts with
input:not([disabled])           negation

driver.findElement(By.cssSelector("[data-testid='checkout']")).click();

await page.locator('[data-testid="checkout"]').click();

Differenze rispetto a XPath

• Ricerca per testo. Il CSS standard non può selezionare in base al contenuto testuale. XPath sì, e Playwright aggiunge i propri motori di testo (getByText e la pseudo-classe :has-text() dentro page.locator()), ma sono estensioni di Playwright, non CSS.
• Direzione. Per anni il CSS poteva muoversi solo verso il basso. La pseudo-classe :has(), ora supportata dai browser attuali, permette di trovare un genitore in base ai suoi figli (tr:has(td.overdue)), colmando gran parte del divario.
• Leggibilità. Per la ricerca per id, classe e attributo, il CSS è più corto e più chiaro.

Errori comuni

• Usare classi di stile come locator. .btn-blue cambia quando cambia il design. I framework a utility class peggiorano la situazione.
• Lunghe catene strutturali. div > div > div:nth-child(3) span codifica il layout e si rompe appena viene aggiunto un contenitore.
• Confondere :nth-child con :nth-of-type. li:nth-child(2) significa “un li che è il secondo figlio del proprio genitore”, non “il secondo li”.

Quando controlli il markup, un attributo data-testid concordato con gli sviluppatori è il locator CSS più stabile. Quando non lo controlli, preferisci i locator basati sui ruoli, se il framework li offre.