Vietnes selēnā IDE: CSS selektors - DOM - XPath - ID

Kas ir lokatori?

Locator ir komanda, kas norāda Selenium IDE, kuriem GUI elementiem (piemēram, Tekstlodziņš, Pogas, Atzīmēšanas rūtiņas utt.) Ir nepieciešams darboties. Pareizu GUI elementu identifikācija ir priekšnoteikums, lai izveidotu automatizācijas skriptu. Bet precīzi identificēt GUI elementus ir grūtāk, nekā izklausās. Dažreiz jūs strādājat ar nepareiziem GUI elementiem vai vispār bez elementiem! Tādējādi Selenium nodrošina vairākus lokatorus, lai precīzi atrastu GUI elementu

Dažādi CSS lokatora veidi Selenium IDE

Ir komandas, kurām nav nepieciešams lokators (piemēram, komanda "atvērt"). Tomēr lielākajai daļai no tām Selenium tīmekļa draiverī ir nepieciešami elementu lokatori.

Lokatora izvēle lielā mērā ir atkarīga no pārbaudāmās lietojumprogrammas . Šajā apmācībā mēs pārslēgsim Facebook, jaunas tours.demoaut, pamatojoties uz lokatoriem, kurus šīs lietojumprogrammas atbalsta. Tāpat savā testēšanas projektā jūs atlasīsit jebkuru no iepriekš uzskaitītajiem elementu lokatoriem Selenium tīmekļa draiverī, pamatojoties uz lietojumprogrammu atbalstu.

Atrašanās vieta pēc ID

Tas ir visizplatītākais elementu atrašanas veids, jo ID ir domājami unikāli katram elementam.

Mērķa formāts: id = elementa id

Šajā piemērā mēs kā testēšanas lietotni izmantosim Facebook, jo Mercury Tours neizmanto ID atribūtus.

Solis 1. Tā tika izveidota šī apmācība, Facebook ir mainījusi savu pieteikšanās lapu dizains. Testēšanai izmantojiet šo demonstrācijas lapu http://demo.guru99.com/test/facebook.html. Izmantojot Firebug, pārbaudiet tekstlodziņu "E-pasts vai tālrunis" un ņemiet vērā tā ID. Šajā gadījumā ID ir "e-pasts".

2. solis. Palaidiet Selenium IDE un lodziņā Mērķis ievadiet “id = email”. Noklikšķiniet uz pogas Atrast un pamaniet, ka tekstlodziņš "E-pasts vai tālrunis" tiek iezīmēts ar dzeltenu un apvilkts ar zaļu, kas nozīmē, ka Selenium IDE spēja pareizi atrast šo elementu.

Atrašanās vieta pēc nosaukuma

Elementu atrašana pēc nosaukuma ir ļoti līdzīga lokalizācijai pēc ID, izņemot to, ka tā vietā mēs izmantojam prefiksu "name =" .

Mērķa formāts: nosaukums = elementa nosaukums

Turpmākajā demonstrācijā mēs tagad izmantosim Mercury Tours, jo visiem nozīmīgajiem elementiem ir nosaukumi.

1. darbība. Pārejiet uz vietni http://demo.guru99.com/test/newtours/ un izmantojiet Firebug, lai pārbaudītu tekstlodziņu “Lietotāja vārds”. Ņem vērā tā nosaukuma atribūtu.

Šeit mēs redzam, ka elementa nosaukums ir "userName".

2. solis . Selenium IDE lodziņā Mērķis ievadiet “name = userName” un noklikšķiniet uz pogas Atrast. Selenium IDE jāspēj atrast tekstlodziņš Lietotājvārds, to iezīmējot.

Atrašanās atrašana pēc nosaukuma, izmantojot filtrus

Filtrus var izmantot, ja vairākiem elementiem ir viens nosaukums. Filtri ir papildu atribūti, ko izmanto, lai atšķirtu elementus ar tādu pašu nosaukumu.

Mērķa formāts : nosaukums = nosaukums_elementa filtrs = vērtība_filtram

Apskatīsim piemēru -

1. solis . Piesakieties vietnē Mercury Tours, izmantojot "apmācību" kā lietotājvārdu un paroli. Tam vajadzētu nokļūt zemāk redzamajā Flight Finder lapā.

2. solis. Izmantojot Firebug, ievērojiet, ka radio pogām “Round Trip” un “One Way” ir vienāds nosaukums “tripType”. Tomēr tiem ir atšķirīgi VALUE atribūti, tāpēc katru no tiem mēs varam izmantot kā filtru.

3. solis.

  • Vispirms mēs piekļūsim radio pogai One Way. Redaktorā noklikšķiniet uz pirmās rindiņas.
  • Selenium IDE komandu lodziņā ievadiet komandu "noklikšķiniet".
  • Lodziņā Mērķis ievadiet “name = tripType value = oneway”. Daļa “value = oneway” ir mūsu filtrs.

4. solis . Noklikšķiniet uz pogas Atrast un ievērojiet, ka Selenium IDE spēj iezīmēt radio pogu Vienvirziena ar zaļu - tas nozīmē, ka mēs varam veiksmīgi piekļūt elementam, izmantojot tā atribūtu VALUE.

5. solis. Nospiediet tastatūras taustiņu "X", lai izpildītu šo klikšķa komandu. Ievērojiet, ka tika atlasīta radiopoga Vienvirziena.

Jūs varat darīt tieši to pašu, izmantojot radiopogu Round Trip, šoreiz kā mērķi atlasot “name = tripType value = roundtrip”.

Atrašanās vieta pēc saites teksta

Šis CSS lokatora veids Selenium attiecas tikai uz hipersaites tekstiem. Mēs piekļūstam saitei, pirms mērķa pievienojot "link =" un pēc tam sekojot hipersaites tekstam.

Mērķa formāts : link = link_text

Šajā piemērā mēs piekļūsim saitei “REĢISTRĒT”, kas atrodama Mercury Tours mājaslapā.

1. solis.

  • Vispirms pārliecinieties, ka esat pieteicies no Mercury Tours.
  • Dodieties uz Mercury Tours mājas lapu.

2. solis .

  • Izmantojot Firebug, pārbaudiet saiti "REĢISTRĒT". Saites teksts ir atrodams starp un tagiem.
  • Šajā gadījumā mūsu saites teksts ir "REĢISTRĒT". Kopējiet saites tekstu.

3. solis . Nokopējiet saites tekstu Firebug un ielīmējiet to Selenium IDE lodziņā Mērķis. Prefiksējiet to ar "link =".

4. solis. Noklikšķiniet uz pogas Atrast un pamaniet, ka Selenium IDE spēja pareizi izcelt saiti REGISTRĒT.

5. solis. Lai pārbaudītu tālāk, lodziņā Komanda ievadiet “clickAndWait” un izpildiet to. Selenium IDE jāspēj veiksmīgi noklikšķināt uz saites Reģistrēties un aizvest uz zemāk redzamo reģistrācijas lapu.

Atrašanās vieta, izmantojot CSS selektoru

CSS selektori selenijā ir virkņu modeļi, ko izmanto, lai identificētu elementu, pamatojoties uz HTML taga, id, klases un atribūtu kombināciju. Selensā CSS selektoru atrašana ir sarežģītāka nekā iepriekšējās metodes, taču tā ir visizplatītākā pieredzējušo selēna lietotāju lokalizācijas stratēģija, jo tā var piekļūt pat tiem elementiem, kuriem nav ID vai nosaukuma.

CSS selektoriem Selenium ir daudz formātu, taču mēs koncentrēsimies tikai uz visbiežāk izmantotajiem.

  • Tagi un ID
  • Tag un klase
  • Tagi un atribūts
  • Tagi, klase un atribūts
  • Iekšējais teksts

Izmantojot šo stratēģiju, mēs vienmēr pievienojam lodziņam Mērķis vārdu "css =", kā parādīts turpmākajos piemēros.

Atrašanās vieta pēc CSS selektora - tags un ID

Arī šajā piemērā mēs izmantosim Facebook teksta lodziņu E-pasts. Kā jūs atceraties, tam ir “e-pasta” ID, un mēs tam jau esam piekļuvuši sadaļā “Atrašanās vietas noteikšana pēc ID”. Šoreiz mēs izmantosim Selenium CSS selektoru ar ID, lai piekļūtu šim pašam elementam.

Sintakse

Apraksts

css = tag # id
  • tag = tā elementa HTML tags, kuram tiek piekļūts
  • # = jaukšanas zīme. Tam vienmēr jābūt klāt, izmantojot Selenium CSS Selector ar ID
  • id = piekļūstamā elementa ID

Paturiet prātā, ka pirms ID vienmēr ir jaukšanas zīme (#).

1. solis. Virzieties uz www.facebook.com. Izmantojot Firebug, pārbaudiet tekstlodziņu "E-pasts vai tālrunis".

Šajā brīdī ņemiet vērā, ka HTML tags ir "ievade" un tā ID ir "e-pasts". Tātad mūsu sintakse būs "css = input # email".

2. solis . Selenium IDE lodziņā Mērķis ievadiet "css = input # email" un noklikšķiniet uz pogas Atrast. Selēna IDE jāspēj izcelt šo elementu.

Atrašanās vieta pēc CSS selektora - tags un klase

Atrašanās atrašana, izmantojot CSS atlasītāju Selenium, izmantojot HTML tagu un klases nosaukumu, ir līdzīga taga un ID lietošanai, taču šajā gadījumā hash zīmes vietā tiek izmantots punkts (.).

Sintakse

Apraksts

css = tags. klasē
  • tag = tā elementa HTML tags, kuram tiek piekļūts
  • . = punkta zīme. Tam vienmēr jābūt klāt, izmantojot CSS selektoru ar klasi
  • class = piekļūstamā elementa klase

1. solis. Atveriet demonstrācijas lapu http://demo.guru99.com/test/facebook.html un izmantojiet Firebug, lai pārbaudītu tekstlodziņu “E-pasts vai tālrunis”. Ievērojiet, ka tā HTML tags ir "ievade" un tā klase ir "ievades teksts".

2. solis . Selenium IDE lodziņā Mērķis ievadiet “css = input.inputtext” un noklikšķiniet uz Atrast. Selenium IDE jāspēj atpazīt tekstlodziņš E-pasts vai Tālrunis.

Ņemiet vērā, ka tad, kad vairākiem elementiem ir viens un tas pats HTML tags un nosaukums, tiks atpazīts tikai pirmais avota koda elements . Izmantojot Firebug, pārbaudiet Facebook tekstlodziņu Parole un ievērojiet, ka tam ir tāds pats nosaukums kā tekstlodziņam E-pasts vai Tālrunis.

Iemesls, kāpēc iepriekšējā ilustrācijā tika izcelts tikai tekstlodziņš E-pasts vai Tālrunis, ir tas, ka tas ir pirmais Facebook lapas avotā.

Atrašanās vieta pēc CSS selektora - tags un atribūts

Šī stratēģija izmanto HTML tagu un konkrētu elementa atribūtu, kuram jāpiekļūst.

Sintakse

Apraksts

css = tag [atribūts = vērtība]
  • tag = tā elementa HTML tags, kuram tiek piekļūts
  • [un] = kvadrātiekavas, kurās tiks ievietots noteikts atribūts un tam atbilstošā vērtība
  • atribūts = izmantojamais atribūts. Ieteicams izmantot atribūtu, kas ir unikāls elementam, piemēram, nosaukums vai ID.
  • vērtība = atbilstošā izvēlētā atribūta vērtība.

1. solis. Pārejiet uz Mercury Tours reģistrācijas lapu (http://demo.guru99.com/test/newtours/register.php) un pārbaudiet tekstlodziņu "Uzvārds". Ņem vērā tā HTML tagu (šajā gadījumā "ievade") un vārdu ("uzvārds").

2. solis . Selenium IDE lodziņā Mērķis ievadiet “css = input [name = lastName]” un noklikšķiniet uz Atrast. Selenium IDE vajadzētu būt iespējai veiksmīgi piekļūt lodziņam Uzvārds.

Ja vairākiem elementiem ir viens un tas pats HTML tags un atribūts, tiks atpazīts tikai pirmais . Šī darbība ir līdzīga elementu atrašanai, izmantojot CSS selektorus ar tādu pašu tagu un klasi.

Atrašanās vieta pēc CSS selektora - tags, klase un atribūts

Sintakse Apraksts
css = tag.class [atribūts = vērtība]
  • tag = tā elementa HTML tags, kuram tiek piekļūts
  • . = punkta zīme. Tam vienmēr jābūt klāt, izmantojot CSS selektoru ar klasi
  • class = piekļūstamā elementa klase
  • [un] = kvadrātiekavas, kurās tiks ievietots noteikts atribūts un tam atbilstošā vērtība
  • atribūts = izmantojamais atribūts. Ieteicams izmantot atribūtu, kas ir unikāls elementam, piemēram, nosaukums vai ID.
  • vērtība = atbilstošā izvēlētā atribūta vērtība.

1. solis. Atveriet demonstrācijas lapu http://demo.guru99.com/test/facebook.html un izmantojiet Firebug, lai pārbaudītu ievades lodziņus “E-pasts vai tālrunis” un “Parole”. Ņem vērā viņu HTML tagu, klasi un atribūtus. Šajā piemērā mēs atlasīsim viņu atribūtus tabindex.

2. solis. Mēs vispirms piekļūsim tekstlodziņam “E-pasts vai tālrunis”. Tādējādi mēs izmantosim tabindex vērtību 1. Ievadiet “css = input.inputtext [tabindex = 1]” lodziņā Selenium IDE un atlasiet Atrast. Jāizceļ ievades lodziņš “E-pasts vai tālrunis”.

3. solis. Lai piekļūtu ievades lodziņam Parole, vienkārši nomainiet tabindex atribūta vērtību. Lodziņā Mērķis ievadiet “css = input.inputtext [tabindex = 2]” un noklikšķiniet uz pogas Atrast. Selenium IDE jāspēj veiksmīgi identificēt tekstlodziņu Parole.

Atrašanās vieta pēc CSS selektora - iekšējais teksts

Kā jūs, iespējams, pamanījāt, HTML etiķetēm reti tiek piešķirti ID, nosaukuma vai klases atribūti. Tātad, kā mēs viņiem piekļūstam? Atbilde ir viņu iekšējo tekstu izmantošana. Iekšējie teksti ir faktiskie virkņu modeļi, kurus HTML etiķete parāda lapā.

Sintakse

Apraksts

css = tag: satur ("iekšējais teksts")
  • tag = tā elementa HTML tags, kuram tiek piekļūts
  • iekšējais teksts = elementa iekšējais teksts

1. solis. Pārejiet uz Mercury Tours mājas lapu (http://demo.guru99.com/test/newtours/) un izmantojiet Firebug, lai izpētītu etiķeti “Parole”. Ņem vērā tā HTML tagu (kas šajā gadījumā ir "fonts") un ievēro, ka tam nav klases, id vai nosaukuma atribūtu.

Solis 2. tips css = fonts: satur ( "Parole:") vērā selēns IDE ir Target lodziņā un noklikšķiniet uz Atrast. Selenium IDE jāspēj piekļūt paroles etiķetei, kā parādīts zemāk esošajā attēlā.

3. solis. Šoreiz nomainiet iekšējo tekstu ar “Boston”, lai jūsu mērķis tagad kļūtu “css = font: satur (“ Boston ”)”. Noklikšķiniet uz Atrast. Jums vajadzētu pamanīt, ka etiķete "No Bostonas uz Sanfrancisko" tiek izcelta. Tas parāda, ka Selenium IDE var piekļūt garai etiķetei, pat ja jūs tikko norādījāt tās iekšējā teksta pirmo vārdu.

Atrašana pēc DOM (dokumenta objekta modelis)

Dokumenta objekta modelis (DOM) vienkāršā izteiksmē ir veids, kā tiek strukturēti HTML elementi. Selenium IDE var izmantot DOM, piekļūstot lapas elementiem. Ja izmantosim šo metodi, mūsu mērķa lodziņš vienmēr sāksies ar “dom = document…”; tomēr prefikss "dom =" parasti tiek noņemts, jo Selenium IDE jebkurā gadījumā var automātiski interpretēt visu, kas sākas ar atslēgvārdu "document", par ceļu Selenium DOM.

Ir četri galvenie veidi, kā atrast elementu, izmantojot DOM Selenium:

  • getElementById
  • getElementsByName
  • dom: nosaukums (attiecas tikai uz elementiem nosauktajā formā)
  • dom: indekss

Atrašana pēc DOM - getElementById

Koncentrēsimies uz pirmo metodi - izmantojot selektīvā DOM getElementById metodi. Sintakse būtu šāda:

Sintakse

Apraksts

document.getElementById ("elementa id")

elementa id = šī ir piekļūstamā elementa ID atribūta vērtība. Šī vērtība vienmēr jāiekļauj iekavās ("").

1. solis. Izmantojiet šo demonstrācijas lapu http://demo.guru99.com/test/facebook.html Pārejiet uz to un izmantojiet Firebug, lai pārbaudītu izvēles rūtiņu "Saglabāt mani pieteikšanos". Ņem vērā tā ID.

Mēs varam redzēt, ka ID, kas mums jāizmanto, ir “persist_box”.

2. solis. Atveriet Selenium IDE un lodziņā Mērķis ievadiet “document.getElementById (“ persist_box ”) un noklikšķiniet uz Atrast. Selenium IDE vajadzētu būt iespējai atrast izvēles rūtiņu "Turēt mani pieteicies". Lai gan tas nevar izcelt izvēles rūtiņas interjeru, Selenium IDE tomēr var ieskaut elementu ar spilgti zaļu apmali, kā parādīts zemāk.

Atrašana pēc DOM - getElementsByName

Metode getElementById vienlaikus var piekļūt tikai vienam elementam, un tas ir elements ar jūsu norādīto ID. GetElementsByName metode ir atšķirīga. Tas apkopo elementu masīvu, kuram ir jūsu norādītais nosaukums. Jūs piekļūstat atsevišķiem elementiem, izmantojot indeksu, kas sākas ar 0.

getElementById

  • Tas jums iegūs tikai vienu elementu.
  • Šim elementam ir ID, ko norādījāt getElementById () iekavās.

getElementsByName

  • Tas iegūs elementu kolekciju, kuru nosaukumi ir vienādi.
  • Katrs elements tiek indeksēts ar skaitli, sākot no 0, tāpat kā masīvs
  • Jūs norādāt, kuram elementam vēlaties piekļūt, ievietojot tā indeksa numuru kvadrātiekavās zemāk esošajā getElementsByName sintaksē.

Sintakse

Apraksts

document.getElementsByName ("nosaukums") [rādītājs]
  • name = elementa nosaukums, kā definēts tā atribūtā 'name'
  • indekss = vesels skaitlis, kas norāda, kurš elements no getElementsByName masīva tiks izmantots.

1. solis. Virzieties uz Mercury Tours mājas lapu un piesakieties, izmantojot “pamācību” kā lietotājvārdu un paroli. Firefox vajadzētu novirzīt jūs uz Flight Finder ekrānu.

2. solis. Izmantojot Firebug, pārbaudiet trīs radio pogas lapas apakšdaļā (ekonomiskās klases, biznesa klases un pirmās klases radio pogas). Ievērojiet, ka viņiem visiem ir tāds pats nosaukums kā "servClass".

3. solis. Vispirms piekļūsim pogai “Ekonomiskā klase”. No visām šīm trim radiopogām šis elements ir pirmais, tāpēc tā indekss ir 0. Selenium IDE ierakstiet "document.getElementsByName (" servClass ") [0]" un noklikšķiniet uz pogas Atrast. Selenium IDE jāspēj pareizi identificēt ekonomiskās klases radio pogu.

4. solis. Mainiet indeksa numuru uz 1, lai jūsu mērķis tagad kļūtu document.getElementsByName ("servClass") [1]. Noklikšķiniet uz pogas Atrast, un Selenium IDE jāspēj izcelt radio pogu "Biznesa klase", kā parādīts zemāk.

Atrašanās vieta pēc DOM - dom: nosaukums

Kā minēts iepriekš, šī metode tiks piemērota tikai tad, ja elements, kuram piekļūstat, ir nosauktajā formā.

Sintakse

Apraksts

document.forms ["formas nosaukums"] .elements ["elementa nosaukums"]
  • formas nosaukums = formas taga taga nosaukuma atribūta vērtība, kurā ir elements, kuram vēlaties piekļūt
  • elementa nosaukums = tā elementa nosaukuma atribūta vērtība, kuram vēlaties piekļūt

1. darbība. Pārejiet uz Mercury Tours mājas lapu (http://demo.guru99.com/test/newtours/) un izmantojiet Firebug, lai pārbaudītu tekstlodziņu Lietotājvārds. Ievērojiet, ka tas ir ietverts formā ar nosaukumu "mājas".

2. solis . Selenium IDE ierakstiet "document.forms [" home "]. Elements [" userName "]" un noklikšķiniet uz pogas Atrast. Selenium IDE jāspēj veiksmīgi piekļūt elementam.

Atrašanās vieta pēc DOM - dom: index

Šī metode tiek piemērota pat tad, ja elements nav nosauktajā formā, jo tas izmanto formas indeksu, nevis tā nosaukumu.

Sintakse

Apraksts

document.forms [formas rādītājs] .elements [elementa indekss]
  • veidlapas indekss = formas indeksa numurs (sākot ar 0) attiecībā pret visu lapu
  • elementa indekss = elementa indeksa numurs (sākot ar 0) attiecībā pret visu veidlapu, kurā tas atrodas

Mēs piekļūsim tekstlodziņam "Tālrunis" Mercury Tours reģistrācijas lapā. Formai šajā lapā nav nosaukuma un ID atribūta, tāpēc tas būs labs piemērs.

1. solis. Virzieties uz Mercury Tours reģistrācijas lapu un pārbaudiet tekstlodziņu Tālrunis. Ievērojiet, ka veidlapai ar to nav ID un nosaukuma atribūtu.

2. solis . Selenium IDE lodziņā Mērķis ievadiet "document.forms [0] .elements [3]" un noklikšķiniet uz pogas Atrast. Selenium IDE vajadzētu būt iespējai pareizi piekļūt tekstlodziņam Tālrunis.

3. solis. Varat arī izmantot elementa nosaukumu tā indeksa vietā un iegūt tādu pašu rezultātu. Selenium IDE lodziņā Mērķis ievadiet "document.forms [0] .elements [" tālrunis "]. Teksta lodziņam Tālrunis joprojām jābūt iezīmētam.

Atrašanās vieta pēc XPath

XPath ir valoda, ko izmanto, atrodot XML (paplašināmās iezīmēšanas valodas) mezglus. Tā kā HTML var uzskatīt par XML ieviešanu, HTML elementu atrašanā mēs varam izmantot arī XPath.

Priekšrocība: tā var piekļūt gandrīz jebkuram elementam, pat tiem, kuriem nav klases, nosaukuma vai ID atribūtu.

Trūkums: tā ir vissarežģītākā elementu identificēšanas metode pārāk daudz dažādu noteikumu un apsvērumu dēļ.

Par laimi, Firebug var automātiski ģenerēt XPath Selenium lokatorus. Šajā piemērā mēs piekļūsim attēlam, kuram, iespējams, nevar piekļūt, izmantojot iepriekš apspriestās metodes.

1. solis. Virzieties uz Mercury Tours mājas lapu un izmantojiet Firebug, lai pārbaudītu oranžo taisnstūri pa labi no dzeltenās lodziņa “Saites”. Skatiet attēlu zemāk.

2. solis . Ar peles labo pogu noklikšķiniet uz elementa HTML koda un pēc tam atlasiet opciju "Kopēt XPath".

3. solis . Selenium IDE lodziņā Mērķis ierakstiet vienu uz priekšu slīpsvītru "/", pēc tam ielīmējiet XPath, kuru mēs nokopējām iepriekšējā solī. Ierakstam lodziņā Mērķis tagad jāsākas ar divām slīpsvītrām uz priekšu "//".

4. solis . Noklikšķiniet uz pogas Atrast. Selenium IDE jāspēj izcelt oranžo lodziņu, kā parādīts zemāk.

Kopsavilkums

Lokatora lietošanas sintakse

Metode

Mērķa sintakse

Piemērs
Pēc personas apliecības id = id_of_the_element id = e-pasts
Pēc nosaukuma name = elementa nosaukums name = userName
Pēc nosaukuma, izmantojot filtrus name = name_of_the_element filter = value_of_filter nosaukums = tripType vērtība = vienvirziena
Pēc saites teksta saite = saite_teksts saite = REĢISTRĒT
Tagi un ID css = tag # id css = ievadiet # e-pastu
Tag un klase css = tags. klasē css = input.inputtext
Tag un atribūts css = tag [atribūts = vērtība] css = ievade [vārds = uzvārds]
Tagi, klase un atribūts css = tags. klase [atribūts = vērtība] css = input.inputtext [tabindex = 1]

Interesanti raksti...