Identificación de objetos por CSS Selector

English

Esta página no está en español en la antigua dokuwiki, preguntar a Ana, ¿si la hemos quitado  por algún motivo? o no está por otro.

Como se dijo en Identificación de Objetos, CSS Selector es una forma simple, fácil y muy útil de identificar objetos en HTML (identificando uno o muchos elementos).

Cuando se selecciona un objeto, en las pruebas, es necesario ser específico, y para ello, el uso de CSS tiende a conducir a selectores como span[name='coches'] en lugar de la forma XPath.

 bodydiv/spn/span/table/tr/tr/tr/td/td/td/td/span[@name='cars'].

CSS Selector se basa en definir el tipo de elemento añadido a la definición de uno o varios atributos. También es posible definir sólo el tipo de elemento (esto tiende a ser inexacto) o sólo los atributos (uno o más). Al final de la página, algunos ejemplos muestran la forma de hacerlo.

Formula

La formulación de CSS Selector puede definirse de dos maneras:

• • La parte del elemento será qué tipo de elemento necesita ser seleccionado.
  • La parte del atributo será el atributo que el usuario está seleccionando.
  • La parte (*|^|$|~) es un operador de comparación opcional dependiendo de lo que se necesite.

(Por ejemplo: Igual a ( = ); Empieza por ( ^= ); Termina por ( $= ); Contiene ( *= ); Contiene en una lista ( ~= )).

• (sym) representa el acceso directo creado para los dos atributos más utilizados (ID y clase).

En caso de que el usuario desee especificar más de un atributo para reconocer el elemento, esto también es posible concatenando más de una especificación, una justo después de la otra. De esta forma, buscamos el elemento que cumpla ambas condiciones, como en la sentencia elementtype[atributo1(*|^|$|~)='valor1'][atributo2(*|^|$|~)='valor2']. El elemento tiene que ser un elemento "elementtype", con el "valor1" en el "atributo1" y el "valor2" en el "atributo2".

También sería posible utilizar el selector [attribute(*|^|$|~)='value'] pero de esta forma el selector se ejecutaría sobre todos los elementos, y no sólo sobre los que coinciden con el tipo de elemento que buscamos, por lo que es muy recomendable utilizar el tipo de elemento para agilizar el proceso.

Para algunos de los atributos más utilizados, hay algunos atajos que se pueden utilizar para facilitar el trabajo del probador o tester. Funcionan como la siguiente sentencia element(sym)'value' donde la parte element representa el tipo de elemento seleccionado y (sym) es el símbolo necesario. Los símbolos son # para los ID (element#idvalue o #idvalue) y . para las clases (element.classvalue o .classvalue).

El usuario también puede unir estas dos formas, para crear una sentencia similar a element(sym)'value'[attribute='value'].

También existe la posibilidad de anidar los elementos (es decir, hacer referencia a un elemento en función del elemento padre). Se hace con el símbolo > como en la sentencia parentelement[attribute=attrvalue]>element[attribute=attrvalue] o cualquiera de las otras posibilidades dichas antes en su lugar.

Ejemplos:

Las imágenes siguientes muestran, por ejemplo, algunas formas diferentes de identificar un objeto:

En este caso concreto, existe un ID. Suele ser la forma más fácil de garantizar una identificación única, por lo que se supone que cualquiera de los siguientes puede encontrar el elemento sin problemas:

Los tres últimos son, en este caso, innecesarios, ya que no hay más elementos con el ID "lst-ib". Aun así, es posible añadir tanta información como sea necesaria a la frase.

En caso de que el objeto no tuviera un ID determinado, sería posible concatenar tantos atributos como creamos suficientes para identificar sólo el objeto deseado:

• input[title='Suche'][aria-label=“suche”][name='q']

Como segundo ejemplo, en la imagen de la derecha, hay otra captura de pantalla donde no se encuentra ningún atributo ID para el <div> "Deutschland". Este es un elemento que tiene una clase "logo-subtext". El usuario puede enfrentarse a dos escenarios (esta clase representa unívocamente al elemento o no). Respecto al primer escenario, algunas posibilidades serían:

Si no es el caso anterior, podemos unir más de un atributo o condición, para hacer posible la identificación. Como este elemento no tiene más atributos, el usuario puede aprovechar la funcionalidad de anidamiento de CSS Selector :

Como se ve en la primera imagen, existe la posibilidad de obtener directamente un Selector CSS eligiendo el elemento y viendo (no es posible copiar) el código en la parte inferior derecha de la imagen. Si se utiliza Google Chrome, también es posible hacer clic con el botón derecho en el elemento deseado y hacer clic en "Copiar selector".

Para más información sobre el selector CSS pulsamos aquí.