Hoe kan een element worden geïdentificeerd met behulp van een CSS- of XPath-selector?

Om een element te bepalen met behulp van een CSS-selector, worden verschillende methoden gebruikt die gebaseerd zijn op de structuur en attributen van HTML:

• Op tag: div, input, button, enz.
• Op klasse: .klassenNaam (bijvoorbeeld .btn-primary)
• Op identificator: #elementId
• Op attributen: [type='text'], [name='gebruikersnaam']
• Combinaties: div.klassenNaam, ul > li:first-child

Voorbeeld van CSS-selector:

input[type='submit'].btn

XPath maakt het mogelijk om elementen flexibeler en preciezer te vinden door gebruik te maken van het pad in de DOM en voorwaarden:

• Op tag: //div
• Op attribuut: //input[@type='text']
• Op tekst: //button[text()='Verzenden']
• Op index: (//li)[3] — derde li-element
• Relatief aan andere elementen: //div[@id='hoofd']//a[@class='link']

Voorbeeld XPath:

//input[@name='gebruikersnaam' and @type='text']

De keuze tussen CSS en XPath hangt dus af van de taak en de structuur van de pagina. CSS is eenvoudiger en sneller, XPath is krachtiger voor complexe voorwaarden.