Meniu

Cum se folosește Selectorul CSS pentru identificarea elementelor web pentru scripturile Selenium - Tutorial Selenium # 6

how use css selector

Încercați Instrumentul Nostru Pentru Eliminarea Problemelor

În a noastră tutorialul anterior cu Selenium , am învățat diferite tipuri de localizatoare. De asemenea, am învățat cum să folosim: ID, ClassName, Name, Link Text și XPath localizatori pentru identificarea elementelor web pe o pagină web.

În continuare, astăzi vom învăța cum se folosește CSS Selector ca Locator . Acesta este al șaselea tutorial al nostru serie gratuită de Selenium Training .

Utilizarea selectorului CSS ca localizator:

Selectorul CSS este combinația dintre un selector de element și o valoare de selector care identifică elementul web într-o pagină web. Compozitul unui selector de element și a valorii selectorului este cunoscut sub numele de Selector Pattern.

CSS Selector Selenium Locator

Selector Pattern este construit folosind etichete HTML, atribute și valorile acestora. Tema centrală din spatele procedurii de creare a CSS Selector și Xpath sunt foarte similare care stau la baza singurei diferențe în protocolul lor de construcție.

La fel ca Xpath, selectorul CSS poate localiza și elemente web fără ID, clasă sau nume.

care sunt principalii furnizori de e-mail

Deci, acum, orientându-ne înainte, să discutăm despre tipurile primitive de selectoare CSS:

Utilizarea selectorului CSS ca localizator

Ce veți învăța:

Selector CSS: ID

În acest exemplu, vom accesa caseta de text „E-mail” prezentă în formularul de conectare de pe Gmail.com.

Caseta de text E-mail are un atribut ID a cărui valoare este definită ca „E-mail”. Astfel, atributul ID și valoarea acestuia pot fi folosite pentru a crea CSS Selector pentru a accesa caseta de text de e-mail.

Crearea selectorului CSS pentru elementul web

Pasul 1 : Găsiți / inspectați elementul web (caseta de text „E-mail” în cazul nostru) și observați că eticheta HTML este „introdusă” și valoarea atributului ID este „E-mail” și ambele fac o referință colectivă la „Caseta de text e-mail”. Prin urmare, datele de mai sus ar fi utilizate pentru a crea CSS Selector.

Utilizarea selectorului CSS ca localizator 2

Verificați valoarea localizatorului

Pasul 1 : Tastați „css = input # Email”, adică valoarea localizatorului în caseta țintă din Selenium IDE și faceți clic pe butonul Găsiți. Observați că va fi evidențiată caseta de e-mail.

Utilizarea selectorului CSS ca localizator 3

Sintaxă

css =

  • Etichetă HTML - Este eticheta care este utilizată pentru a indica elementul web la care dorim să accesăm.
  • # - Semnul hash este utilizat pentru a simboliza atributul ID. Este obligatoriu să folosiți semnul hash dacă atributul ID este utilizat pentru a crea CSS Selector.
  • Valoarea atributului ID - Este valoarea unui atribut ID care este accesat.
  • Valoarea ID-ului este întotdeauna precedată de un semn hash.

Notă: Aplicabil și pentru alte tipuri de selectoare CSS

  • În timp ce specificați Selector CSS în caseta de text țintă a Selenium IDE, amintiți-vă întotdeauna să îl prefixați cu „css =”.
  • Secvența artefactelor de mai sus este inalterabilă.
  • Dacă două sau mai multe elemente web au aceeași etichetă HTML și aceeași valoare a atributului, va fi identificat primul element marcat în sursa paginii.

Selector CSS: Clasa

În acest eșantion, vom accesa caseta de selectare „Rămâneți conectat” prezentă sub formularul de conectare la gmail.com.

Caseta de selectare „Rămâneți conectat” are un atribut Class a cărui valoare este definită ca „amintește”. Astfel, atributul Class și valoarea acestuia pot fi utilizate pentru a crea un Selector CSS pentru a accesa elementul web desemnat.

Localizarea unui element folosind Class ca selector CSS este foarte asemănătoare cu utilizarea ID-ului, diferența individuală constă în formarea sintaxei lor.

Crearea unui selector CSS pentru elementul web

Pasul 1 : Găsiți / inspectați elementul web (caseta de selectare „Rămâneți conectat” în cazul nostru) și observați că eticheta HTML este „etichetă” și valoarea atributului ID este „țineți minte” și amândoi fac o referință colectivă la „Rămâneți semnat” în casetă de selectare ”.

Verificați valoarea localizatorului

Pasul 1 : Tastați „css = label.remember”, adică valoarea localizatorului în caseta țintă din Selenium IDE și faceți clic pe butonul Căutare. Observați că va fi evidențiată caseta de selectare „Rămâneți conectat”.

Utilizarea selectorului CSS ca localizator 4

Sintaxă

css =

  • . - Semnul punct este folosit pentru a simboliza atributul clasei. Este obligatoriu să utilizați semnul punct dacă un atribut de clasă este utilizat pentru a crea un selector CSS.
  • Valoarea clasei este întotdeauna precedată de un semn punct.

Selector CSS: atribut

În acest eșantion, vom accesa butonul „Conectare” prezent sub formularul de conectare la gmail.com.

Butonul „Conectare” are un atribut tip a cărui valoare este definită ca „trimitere”. Astfel, tastați atributul și valoarea acestuia pot fi utilizate pentru a crea un selector CSS pentru a accesa elementul web desemnat.

Crearea unui selector CSS pentru elementul web

Pasul 1 : Localizați / inspectați elementul web (butonul „Conectați-vă” în cazul nostru) și observați că eticheta HTML este „intrare”, atributul este tipul și valoarea atributului tip sunt „trimitere” și toate împreună fac o referință la butonul „Conectare”.

Verificați valoarea localizatorului

Pasul 1 : Tastați „css = input (type =’ submit ’)”, adică valoarea localizatorului în caseta țintă din Selenium IDE și faceți clic pe butonul Căutare. Observați că butonul „Conectare” va fi evidențiat.

Utilizarea selectorului CSS ca localizator 5

Sintaxă

css =

  • Atribut - Este atributul pe care dorim să îl folosim pentru a crea CSS Selector. Poate valora, tasta, denumi etc. Se recomandă alegerea unui atribut a cărui valoare identifică în mod unic elementul web.
  • Valoarea atributului - Este valoarea unui atribut care este accesat.

Selector CSS: ID / Clasă și atribut

În acest eșantion, vom accesa caseta de text „Parolă” prezentă în formularul de conectare la gmail.com.

Caseta de text „Parolă” are un atribut ID a cărui valoare este definită ca „Passwd”, tastați atributul a cărui valoare este definită ca „parolă”. Astfel, atributul ID, atributul de tip și valorile acestora pot fi folosite pentru a crea CSS Selector pentru a accesa elementul web desemnat.

cum să declarați o matrice multidimensională în java

Crearea unui selector CSS pentru elementul web

Pasul 1 : Localizați / inspectați elementul web (caseta de text „Parolă” în cazul nostru) și observați că eticheta HTML este „introdusă”, atributele sunt ID și tip și valorile lor corespunzătoare sunt „Passwd” și „parolă” și toate împreună faceți o referință la caseta de text „Parolă”.

Verificați valoarea localizatorului

Pasul 1 : Tastați „css = input # Passwd (name =’ Passwd ’)”, adică valoarea localizatorului în caseta țintă din Selenium IDE și faceți clic pe butonul Căutare. Observați că va fi evidențiată caseta de text „Parolă”.

Utilizarea selectorului CSS ca localizator 5

Sintaxă

css =

Două sau mai multe atribute pot fi, de asemenea, furnizate în sintaxă.De exemplu, „Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.

Selector CSS: Sub-șir

CSS în Selenium permite potrivirea unui șir parțial și astfel derivă o caracteristică foarte interesantă pentru a crea selectoare CSS folosind șiruri de caractere. Există trei moduri în care selectorii CSS pot fi creați pe baza mecanismului utilizat pentru a se potrivi cu șirul de caractere.

Tipuri de mecanisme

Toate mecanismele de dedesubt au o semnificație simbolică.

  • Potriviți un prefix
  • Potriviți un sufix
  • Potriviți un șir

Să le discutăm în detaliu.

Potriviți un prefix

Se folosește pentru a corespunde șirului cu ajutorul unui prefix care se potrivește.

Sintaxă

css =

  • ^ - Notare simbolică pentru a se potrivi cu un șir folosind prefixul.
  • Prefix - Este șirul pe baza căruia se efectuează operația de potrivire. Șirul probabil va începe cu șirul specificat.

De exemplu: Să luăm în considerare „Casetă text parolă”, astfel încât selectorul CSS corespunzător ar fi:

css = input # Passwd (name ^ = 'Pass ’)

Potriviți un sufix

Se folosește pentru a corespunde șirului cu ajutorul unui sufix de potrivire.

Sintaxă

css =

  • # - Notare simbolică pentru a se potrivi cu un șir folosind sufixul.
  • Sufixul - Este șirul pe baza căruia se efectuează operația de potrivire. Șirul probabil este de așteptat să se încheie cu șirul specificat.

De exemplu,Să luăm din nou în considerare „Casetă text parolă”, astfel încât selectorul CSS corespunzător ar fi:

css = input # Passwd (nume $ = ’wd’)

Potriviți un șir

Se folosește pentru a corespunde șirului cu ajutorul unui șir de potrivire.

Sintaxă

css =

  • * - Notare simbolică pentru a se potrivi cu un șir folosind un șir secundar.
  • Șir secundar - Este șirul pe baza căruia se efectuează operația de potrivire. Șirul probabil este de așteptat să aibă modelul de șir specificat.

De exemplu,să luăm în considerare din nou „Casetă text parolă”, astfel încât selectorul CSS corespunzător ar fi:

css = input # Passwd (nume $ = ’wd’)

Selector CSS: text interior

Textul interior ne ajută să identificăm și să creăm Selector CSS folosind un șablon pe care Eticheta HTML îl manifestă pe pagina web.

Luați în considerare „Aveți nevoie de ajutor?” hyperlink prezent sub formularul de autentificare la gmail.com.

Eticheta de ancorare care reprezintă hyperlinkul conține un text inclus. Astfel, acest text poate fi folosit pentru a crea un selector CSS pentru a accesa elementul web desemnat.

Sintaxă:

css =

  • : - Semnul punct este folosit pentru a simboliza conține metoda
  • Conține - Este valoarea unui atribut de clasă care este accesat.
  • Text - Textul care este afișat oriunde pe pagina web, indiferent de locația sa.

Aceasta este una dintre cele mai frecvent utilizate strategii pentru localizarea elementului web datorită sintaxei sale simplificate.

Datorită faptului că crearea CSS Selector și Xpath necesită o mulțime de eforturi și practică, procesul este exercitat doar de utilizatori mai sofisticați și instruiți.

Următorul tutorial # 7 : Continuând cu următorul nostru tutorial, vom profita de ocazie pentru a vă prezenta o extensie a strategiilor de localizare. Astfel, în următorul tutorial, am studia mecanism pentru localizarea elementelor web pe Google Chrome și Internet Explorer.

cel mai bun blocator de anunțuri pentru Mac Chrome

Acoperim localizatorii Selenium în mai multe detalii, deoarece este o parte importantă a creației Scriptului Selenium.

Anunțați-ne întrebările / comentariile de mai jos.

Lectură recomandată

^