Selenium CSS Selektors Foarbylden

Eleminten lokalisearje troch CSS-seleksjes is de foarkar, om't it rapper en lêsberder is dan XPath.

Dizze tutorial biedt foarbylden fan hoe web-eleminten yn Selenium te finen mei CSS-seleksjes.



CSS-kiezers op attribút

Litte wy ús yntinke dat wy in tag hawwe mei de folgjende attributen [id, klasse, namme, wearde]


De generike manier om eleminten te finen op attribút is:

css = element_name[='']

Foarbyld:


WebElement firstName = driver.findElement(By.cssSelector('input[name='first_name']'));

Id Attribute

Yn CSS kinne wy ​​# brûke notaasje om de id te selektearjen attribút fan in elemint:

Foarbyld:

driver.findElement(By.cssSelector('input#firstname')); //or driver.findElement(By.cssSelector('#firstname'));

Klasse attribút

Itselde prinsipe kin brûkt wurde om eleminten te finen troch har class attribút.

Wy brûke de . notaasje.


driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm')); Noat:Nim ekstra soarch by it brûken fan de , notaasje, om't d'r in soad web-eleminten op 'e HTML-boarne kinne wêze mei itselde klasse-attribút.

Meardere attributen

Somtiden is d'r needsaak om spesifiker te wêzen mei de seleksjekritearia om it juste elemint te finen.

De wearde fan it skerm kin of wêze 'gjin' of 'blokkearje' ôfhinklik fan 'e ajax-oprop. Yn dizze situaasje moatte wy it elemint lokalisearje troch sawol klasse as styl.

Foarbyld:

driver.findElement(By.cssSelector('div[class='ajax_enabled'] [style='display:block']'));

Attribút befettet NET in spesifike wearde

Hoe kinne jo yn WebDriver eleminten fine wêrfan it attribút wearden befettet dy't jo net wolle selektearje? Dit CSS-seleksjefoarbyld lit sjen hoe NET te selektearjen op spesifike attribútwearde


Stel dat jo in protte eleminten hawwe dy't itselde attribút en attribútwearde diele, mar guon fan dy eleminten hawwe oare fariabelen dy't binne tafoege oan 'e wearde. bgl:

Yn it boppesteande knipsel wolle wy in beskikbere dei selektearje (dus de twa lêste div eleminten)

Sa't te sjen is, befetsje alle fjouwer divs 'kalinder-dei-', mar de earste twa befetsje ek 'net beskikber' wat wy net wolle.

De CSS-selektor foar Net selektearje de earste twa divs is


driver.findElement(By.cssSelector('div[class*=calendar-day-]:not([class*='unavailable'])'));'

Bernelemint lokalisearje

Om de ôfbylding tag te finen, brûke wy:

driver.findElement(By.cssSelector('div#logo img'));

Meardere berneleminten

D'r binne gelegenheden dat d'r meardere berneleminten binne binnen itselde âlder-elemint lykas listeleminten


  • Apple

  • Orange

  • Banana

Sa't te sjen is, hawwe de yndividuele listeleminten gjin id dy't assosjeare is. Om it elemint mei tekst 'Oranje' te finen, moatte wy nth-of-type brûke.

Foarbyld:


driver.findElement(By.cssSelector('ul#fruit li:nth-of-type(2)'));

Likegoed brûke wy om it lêste bernelemint te selektearjen, dus 'Banaan':

driver.findElement(By.cssSelector('ul#fruit li:last-child'));

Dynamysk generearre id's

Wy kinne stringmatchers brûke om eleminten te finen mei dynamysk generearre Ids.

Yn dit foarbyld befetsje alle trije div-eleminten it wurd 'willekeurich'.

Attribút Begjint mei

Om de earste div te selektearjen elemint, soene wy ​​^= brûke wat 'begjint mei' betsjut:

driver.findElement(By.cssSelector('div[id^='123']'));

Attribút einiget mei

Om de twadde div te selektearjen elemint, soene wy ​​$= brûke wat 'einiget mei' betsjut:

driver.findElement(By.cssSelector('div[id$='456']'));

Attribút befettet

Om de lêste div te selektearjen elemint dat wy soene brûke *= wat 'sub-string' betsjut

driver.findElement(By.cssSelector('div[id*='_pattern_']'));

Wy kinne ek de contains brûke

driver.findElement(By.cssSelector('div:contains('_pattern_')'));

Fierder lêze: