¿Cómo se puede identificar un elemento usando un selector CSS o XPath?

Para determinar un elemento mediante un selector CSS, se utilizan diferentes métodos basados en la estructura y atributos del HTML:

• Por etiqueta: div, input, button, etc.
• Por clase: .nombreClase (por ejemplo, .btn-primary)
• Por identificador: #idElemento
• Por atributos: [type='text'], [name='usuario']
• Combinaciones: div.nombreClase, ul > li:first-child

Ejemplo de selector CSS:

input[type='submit'].btn

XPath permite encontrar elementos de manera más flexible y precisa, usando rutas en el DOM y condiciones:

• Por etiqueta: //div
• Por atributo: //input[@type='text']
• Por texto: //button[text()='Enviar']
• Por índice: (//li)[3] — tercer elemento li
• Relación con otros elementos: //div[@id='principal']//a[@class='enlace']

Ejemplo de XPath:

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

Por lo tanto, la elección entre CSS y XPath depende de la tarea y la estructura de la página. CSS es más simple y rápido, XPath es más potente para condiciones complejas.