Hogyan lehet egy elemet meghatározni CSS vagy XPath szelektor segítségével?

A CSS-szelektor segítségével egy elem meghatározásához különböző módszereket alkalmaznak, amelyek az HTML szerkezetén és attribútumain alapulnak:

• Címke szerint: div, input, button stb.
• Osztály szerint: .osztályNév (pl. .btn-primary)
• Azonosító szerint: #elemAzonosító
• Attribútum szerint: [type='text'], [name='felhasználónév']
• Kombinációk: div.osztályNév, ul > li:first-child

CSS-szelektor példája:

input[type='submit'].btn

Az XPath lehetővé teszi, hogy rugalmasabban és pontosabban találjunk elemeket, a DOM útvonal és feltételek használatával:

• Címke szerint: //div
• Attribútum szerint: //input[@type='text']
• Szöveg szerint: //button[text()='Küldés']
• Index szerint: (//li)[3] — a harmadik li elem
• Más elemekhez viszonyítva: //div[@id='fő']//a[@class='link']

Példa XPath:

//input[@name='felhasználónév' and @type='text']

Így a CSS és XPath közötti választás a feladattól és az oldal szerkezetétől függ. A CSS egyszerűbb és gyorsabb, az XPath erősebb összetettebb feltételek esetén.