Seletor CSS

Um seletor CSS é o mesmo padrão que uma folha de estilos usa para decidir a quais elementos uma regra se aplica. As ferramentas de teste o reaproveitam para encontrar elementos: o Selenium com By.cssSelector, o Playwright com page.locator(), o Cypress com cy.get(). Os seletores são avaliados nativamente pelo navegador, costumam ser mais curtos que o XPath equivalente e a maioria dos desenvolvedores front-end consegue lê-los.

Exemplo

#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();

Diferença em relação ao XPath

• Busca por texto. O CSS padrão não consegue selecionar pelo conteúdo de texto. O XPath consegue, e o Playwright acrescenta seus próprios mecanismos de texto (getByText e a pseudo-classe :has-text() dentro de page.locator()), mas isso são extensões do Playwright, não CSS.
• Direção. Durante anos o CSS só conseguia descer na árvore. A pseudo-classe :has(), agora suportada nos navegadores atuais, permite encontrar um pai pelos seus filhos (tr:has(td.overdue)), o que fecha boa parte dessa diferença.
• Legibilidade. Para buscar por id, classe e atributo, o CSS é mais curto e mais claro.

Erros comuns

• Usar classes de estilo como locators. .btn-blue muda quando o design muda. Frameworks de classes utilitárias pioram isso.
• Cadeias estruturais longas. div > div > div:nth-child(3) span codifica o layout e quebra quando alguém adiciona um wrapper.
• Confundir :nth-child com :nth-of-type. li:nth-child(2) significa “um li que é o segundo filho do seu pai”, e não “o segundo li”.

Quando você controla o markup, um atributo data-testid combinado com os desenvolvedores é o locator CSS mais estável. Quando não controla, prefira locators baseados em role quando o framework os oferecer.