Menú

Com s'utilitza el selector CSS per identificar elements web per als scripts Selenium - Tutorial Selenium núm. 6

how use css selector

Proveu El Nostre Instrument Per Eliminar Problemes

En la nostra tutorial anterior de Selenium , hem après diferents tipus de localitzadors. També vam aprendre a utilitzar: identificadors, ClassName, Name, Link Text i XPath localitzadors per identificar elements web en una pàgina web.

Continuant amb això, avui aprendrem com utilitzar CSS Selector com a localitzador . Aquest és el nostre 6è tutorial al nostre sèrie de formació gratuïta Selenium .

Ús de CSS Selector com a localitzador:

El selector CSS és la combinació d’un selector d’elements i un valor de selector que identifica l’element web dins d’una pàgina web. El compost d'un selector d'elements i el valor del selector es coneix com a patró de selecció.

Selector CSS Selenium Locator

El patró de selecció es construeix mitjançant etiquetes HTML, atributs i els seus valors. El tema central darrere del procediment per crear CSS Selector i Xpath són molt similars subjacents a l'única diferència en el seu protocol de construcció.

Igual que Xpath, el selector CSS també pot localitzar elements web sense identificador, classe o nom.

Preguntes i respostes de l'entrevista de consulta sql per a pdf amb experiència

Per tant, ara anem avançant, anem a parlar dels tipus primitius de selectors CSS:

Ús de CSS Selector com a localitzador

Què aprendreu:

Selector CSS: identificador

En aquest exemple, accediríem al quadre de text 'Correu electrònic' que hi ha al formulari d'inici de sessió a Gmail.com.

El quadre de text Correu electrònic té un atribut d'identificador el valor del qual es defineix com a 'Correu electrònic'. Per tant, l'atribut ID i el seu valor es poden utilitzar per crear CSS Selector per accedir al quadre de text del correu electrònic.

Creació del selector CSS per a l'element web

Pas 1 : Localitzeu / inspeccioneu l'element web (quadre de text 'Correu electrònic' en el nostre cas) i observeu que l'etiqueta HTML és 'entrada' i el valor de l'atribut ID és 'Correu electrònic' i que tots dos fan una referència col·lectiva al quadre de text 'Correu electrònic'. Per tant, les dades anteriors s’utilitzarien per crear CSS Selector.

Ús de CSS Selector com a localitzador 2

Verifiqueu el valor del localitzador

Pas 1 : Escriviu 'css = input # Email', és a dir, el valor del localitzador al quadre de destinació de l'IDE Selenium i feu clic al botó Cerca. Tingueu en compte que es ressaltarà el quadre de text del correu electrònic.

Ús de CSS Selector com a localitzador 3

Sintaxi

css =

  • Etiqueta HTML - És l'etiqueta que s'utilitza per indicar l'element web al qual volem accedir.
  • # - El signe hash s'utilitza per simbolitzar l'atribut ID. És obligatori utilitzar el signe hash si s’utilitza l’atribut ID per crear el selector CSS.
  • Valor de l'atribut ID - És el valor d'un atribut d'ID al qual s'accedeix.
  • El valor de l'ID sempre va precedit d'un signe de hash.

Nota: També s'aplica a altres tipus de selectors CSS

  • Mentre especifiqueu el selector CSS al quadre de text de destinació de Selenium IDE, recordeu-vos sempre de posar-lo amb 'css ='.
  • La seqüència dels artefactes anteriors és inalterable.
  • Si dos o més elements web tenen el mateix valor d'etiqueta i atribut HTML, s'identificarà el primer element marcat a l'origen de la pàgina.

Selector CSS: classe

En aquest exemple, accediríem a la casella de selecció 'Mantingueu la sessió iniciada' que hi ha a sota del formulari d'inici de sessió a gmail.com.

La casella de selecció 'Mantingueu la sessió iniciada' té un atribut Class el valor del qual es defineix com a 'recorda'. Així, l'atribut Class i el seu valor es poden utilitzar per crear un selector CSS per accedir a l'element web designat.

Localitzar un element mitjançant Class com a selector CSS és molt similar a l’ús d’ID, la diferència única rau en la seva formació de sintaxi.

Creació d'un selector CSS per a l'element web

Pas 1 : Localitzeu / inspeccioneu l'element web (casella de selecció 'Mantingueu la sessió iniciada' en el nostre cas) i observeu que l'etiqueta HTML és 'etiqueta' i el valor de l'atribut ID és 'recordeu' i que tots dos fan una referència col·lectiva a la secció 'Seguiu signats' a la casella de selecció ”.

Verifiqueu el valor del localitzador

Pas 1 : Escriviu 'css = label.remember', és a dir, el valor del localitzador al quadre de destinació de l'IDE Selenium i feu clic al botó Cerca. Tingueu en compte que es ressaltarà la casella de selecció 'Mantingueu la sessió iniciada'.

Ús del selector CSS com a localitzador 4

Sintaxi

css =

  • . - El signe de punt s'utilitza per simbolitzar l'atribut de classe. És obligatori fer servir el signe de punt si s’utilitza un atribut Class per crear un selector CSS.
  • El valor de la classe sempre va precedit d'un signe de punt.

Selector CSS: atribut

En aquest exemple, accediríem al botó 'Inici de sessió' que hi ha a sota del formulari d'inici de sessió a gmail.com.

El botó 'Inicia la sessió' té un atribut type el valor del qual es defineix com a 'enviar'. Per tant, escriviu atribut i el seu valor per crear un selector CSS per accedir a l'element web designat.

Creació d'un selector CSS per a l'element web

Pas 1 : Localitzeu / inspeccioneu l'element web (botó 'Iniciar sessió' en el nostre cas) i observeu que l'etiqueta HTML és 'entrada', l'atribut és de tipus i el valor de l'atribut de tipus són 'enviar' i tots ells fan referència el botó 'Inicia la sessió'.

Verifiqueu el valor del localitzador

Pas 1 : Escriviu 'css = input (type = 'submit')', és a dir, el valor del localitzador al quadre de destinació de l'IDE Selenium i feu clic al botó Cerca. Tingueu en compte que es ressaltarà el botó 'Inicia la sessió'.

Ús del selector CSS com a localitzador 5

Sintaxi

css =

  • Atribut - És l'atribut que volem utilitzar per crear el selector CSS. Pot valorar, escriure, anomenar, etc. Es recomana triar un atribut el valor del qual identifiqui de forma única l'element web.
  • Valor de l'atribut - És el valor d'un atribut al qual s'està accedint.

Selector CSS: identificador / classe i atribut

En aquest exemple, accediríem al quadre de text 'Contrasenya' que hi ha al formulari d'inici de sessió a gmail.com.

El quadre de text 'Contrasenya' té un atribut ID el valor del qual es defineix com a 'Passwd', escriviu un atribut el valor del qual es defineix com a 'contrasenya'. Per tant, l'atribut ID, l'atribut type i els seus valors es poden utilitzar per crear CSS Selector per accedir a l'element web designat.

què pot obrir un fitxer json

Creació d'un selector CSS per a l'element web

Pas 1 : Localitzeu / inspeccioneu l'element web (quadre de text 'Contrasenya' en el nostre cas) i observeu que l'etiqueta HTML és 'entrada', els atributs són ID i tipus i els valors corresponents són 'Passwd' i 'contrasenya' i tots junts. feu una referència al quadre de text 'Contrasenya'.

Verifiqueu el valor del localitzador

Pas 1 : Escriviu 'css = input # Passwd (name = 'Passwd')', és a dir, el valor de localització al quadre de destinació de l'IDE Selenium i feu clic al botó Cerca. Tingueu en compte que es ressaltarà el quadre de text 'Contrasenya'.

Ús del selector CSS com a localitzador 5

Sintaxi

css =

També es poden proporcionar dos o més atributs a la sintaxi.Per exemple, 'Css = input # Passwd (type = 'password') (name = 'Passwd')'.

Selector CSS: subcadena

CSS a Selenium permet fer coincidir una cadena parcial i, per tant, obtenir una característica molt interessant per crear Selectors CSS utilitzant subcadenes. Hi ha tres maneres en què es poden crear Selectors CSS basats en el mecanisme utilitzat per fer coincidir la subcadena.

Tipus de mecanismes

Tots els mecanismes inferiors tenen una importància simbòlica.

  • Feu coincidir un prefix
  • Feu coincidir un sufix
  • Coincideix amb una subcadena

Analitzem-los detalladament.

Feu coincidir un prefix

S'utilitza per correspondre a la cadena amb l'ajut d'un prefix coincident.

Sintaxi

css =

  • ^ - Notació simbòlica per fer coincidir una cadena amb el prefix.
  • Prefix - És la cadena en funció de la qual es realitza l'operació de coincidència. S'espera que la cadena probable comenci amb la cadena especificada.

Per exemple: Considerem 'quadre de text de contrasenya', de manera que el selector CSS corresponent seria:

css = input # Passwd (name ^ = 'Passa')

Feu coincidir un sufix

S'utilitza per correspondre a la cadena amb l'ajut d'un sufix coincident.

Sintaxi

css =

  • # - Notació simbòlica per fer coincidir una cadena amb sufix.
  • El sufix - És la cadena en funció de la qual es realitza l'operació de coincidència. S'espera que la cadena probable acabi amb la cadena especificada.

Per exemple,Tornem a considerar 'Quadre de text de contrasenya', de manera que el selector CSS corresponent seria:

css = entrada # Passwd (nom $ = 'wd')

Coincideix amb una subcadena

S'utilitza per correspondre a la cadena amb l'ajut d'una subcadena que coincideix.

Sintaxi

css =

  • * - Notació simbòlica per fer coincidir una cadena amb subcadena.
  • Subcadenes - És la cadena en funció de la qual es realitza l'operació de coincidència. S'espera que la cadena probable tingui el patró de cadena especificat.

Per exemple,considerem de nou 'Quadre de text de contrasenya', de manera que el selector CSS corresponent seria:

css = entrada # Passwd (nom $ = 'wd')

Selector CSS: text intern

El text intern ens ajuda a identificar i crear CSS Selector mitjançant un patró de cadena que l'etiqueta HTML manifesta a la pàgina web.

Penseu en 'Necessiteu ajuda?' hi ha un hiperenllaç a sota del formulari d’inici de sessió a gmail.com.

L'etiqueta d'ancoratge que representa l'hiperenllaç té un text inclòs. Per tant, aquest text es pot utilitzar per crear un selector CSS per accedir a l'element web designat.

Sintaxi:

css =

  • : - El signe de punts s'utilitza per simbolitzar el mètode conté
  • Conté: és el valor d'un atribut de classe al qual s'està accedint.
  • Text: el text que es mostra a qualsevol lloc de la pàgina web independentment de la seva ubicació.

Aquesta és una de les estratègies més freqüents per localitzar elements web a causa de la seva sintaxi simplificada.

A causa del fet que crear CSS Selector i Xpath requereix molts esforços i pràctica, el procés només és exercit per usuaris més sofisticats i formats.

Pròxim tutorial núm. 7 : Continuant amb el nostre següent tutorial, aprofitarem per presentar-vos una extensió d'estratègies de localització. Així, en el següent tutorial, estudiaríem el mecanisme per localitzar elements web a Google Chrome i Internet Explorer.

com puc convertir-me en un provador de productes

Estem tractant Selenium Locators amb més detalls, ja que és una part important de la creació de Selenium Script.

Feu-nos saber les vostres consultes / comentaris a continuació.

Lectura recomanada

^