Identificación de objetos por CSS Selector

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 simplesimple, fácil y fácilmuy útil de identificar objetos en HTML (identificando uno o muchos elementos) y muy útil..

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 necesitenecesite.

(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:

InEn thiseste specificcaso case,concreto, thereexiste is anun ID. ItSuele isser usuallyla theforma easiestmás wayfácil tode ensuregarantizar anuna uniqueidentificación identification,única, sopor anylo ofque these followingsupone areque supposedcualquiera tode findlos thesiguientes elementpuede withoutencontrar problems:el elemento sin problemas:

The last

three

Los are,tres inúltimos thisson, case,en unnecessary,este duecaso, toinnecesarios, thereya areque no morehay elementsmás withelementos thecon “el ID "lst-ib”ib". ID.Aun Evenasí, so,es itposible isañadir possibletanta toinformación addcomo assea muchnecesaria infoa asla needed to the sentence.frase.

InEn casecaso thede objectque hadel objeto no tuviera un ID determined,determinado, itsería wouldposible beconcatenar possibletantos toatributos concatenatecomo ascreamos manysuficientes attributespara as we think are enough for identifyingidentificar onlysólo theel desiredobjeto object:deseado:

 

AsComo asegundo secondejemplo, example,en inla theimagen imagede atla thederecha, righthay side,otra therecaptura isde anotherpantalla screenshot where can finddonde no se encuentra ningún atributo ID attributepara for theel <div> “Deutschland”"Deutschland". ThisEste ises anun elementelemento thatque hastiene una clase "logo-subtext". El usuario puede enfrentarse a classdos “logo-subtext”escenarios (esta clase representa unívocamente al elemento o no). TheRespecto useral canprimer faceescenario, twoalgunas scenariosposibilidades (this class represents univocally the element or not). Regarding the first scenario, some possibilities would be:serían:

If the

case is not as said before, we can join more than one attribute or condition, in order to make the identification possible. Since this element has

Si no morees attributes,el thecaso useranterior, canpodemos getunir advantagemás ofde theun nestatributo functionalityo ofcondició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:Selector :

 

As is

seen

Como inse theve firsten image,la thereprimera isimagen, aexiste possibilityla toposibilidad getde directlyobtener adirectamente CSSun Selector byCSS choosingeligiendo theel elementelemento andy seeingviendo (notno possiblees toposible copy)copiar) theel codecódigo inen thela veryparte rightinferior bottomderecha ofde thela image.imagen. IfSi usingse utiliza Google Chrome, ittambién alsoes possibleposible tohacer clickclic withcon theel rightbotón buttonderecho inen theel elementelemento neededdeseado andy clickhacer onclic “Copyen selector”"Copiar selector".

 

 

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