Umístění prvků pomocí selektorů CSS je upřednostňovaným způsobem, protože je rychlejší a čitelnější než XPath.
Tento kurz poskytuje příklady toho, jak vyhledat webové prvky v selenu pomocí selektorů CSS.
Představme si, že máme značku s následujícími atributy [id, class, name, value]
Obecný způsob vyhledání prvků podle atributu je:
css = element_name[='']
Příklad:
WebElement firstName = driver.findElement(By.cssSelector('input[name='first_name']'));
V CSS můžeme použít #
notace pro výběr id
atribut prvku:
Příklad:
driver.findElement(By.cssSelector('input#firstname')); //or driver.findElement(By.cssSelector('#firstname'));
Stejný princip lze použít k vyhledání prvků podle jejich class
atribut.
Používáme .
notace.
driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm'));
Poznámka:Při používání . notace, protože na zdroji HTML může být mnoho webových prvků se stejným atributem třídy.Aby bylo možné najít správný prvek, je někdy třeba upřesnit kritéria výběru.
Hodnota displeje může být buď „none“, nebo „block“ v závislosti na volání ajax. V této situaci musíme prvek najít jak podle třídy, tak podle stylu.
Příklad:
driver.findElement(By.cssSelector('div[class='ajax_enabled'] [style='display:block']'));
Jak ve WebDriveru najdete prvky, jejichž atribut obsahuje hodnoty, které nechcete vybrat? Tento příklad selektoru CSS ukazuje, jak NEVYBRAT podle konkrétní hodnoty atributu
Předpokládejme, že máte mnoho prvků, které sdílejí stejný atribut a hodnotu atributu, ale u některých z těchto prvků jsou k hodnotě připojeny další proměnné. např:
Ve výše uvedeném fragmentu chceme vybrat dostupný den (tj. Dva poslední div
prvky)
Jak je vidět, všechny čtyři divy obsahují „kalendářní den-“, ale první dva také obsahují „nedostupné“, což nechceme.
Selektor CSS pro Nevybrat první dva divy je
driver.findElement(By.cssSelector('div[class*=calendar-day-]:not([class*='unavailable'])'));'
K vyhledání značky obrázku používáme:
driver.findElement(By.cssSelector('div#logo img'));
Existují příležitosti, kdy ve stejném nadřazeném prvku existuje více podřízených prvků, jako jsou například prvky seznamu
- Apple
- Orange
- Banana
Jak je vidět, jednotlivé prvky seznamu nemají k sobě přidružené žádné ID. K vyhledání prvku s textem „Orange“ musíme použít nth-of-type
.
Příklad:
driver.findElement(By.cssSelector('ul#fruit li:nth-of-type(2)'));
Podobně k výběru posledního podřízeného prvku, tj. Banán, používáme:
driver.findElement(By.cssSelector('ul#fruit li:last-child'));
Můžeme použít vyhledávače řetězců k vyhledání prvků s dynamicky generovanými ID.
V tomto příkladu obsahují všechny tři prvky div slovo „random“.
Chcete-li vybrat první div
prvek, použili bychom ^=
což znamená „začíná na“:
driver.findElement(By.cssSelector('div[id^='123']'));
Výběr druhého div
prvek, použili bychom $=
což znamená „končí na“:
driver.findElement(By.cssSelector('div[id$='456']'));
Výběr posledního div
prvek, který bychom použili *=
což znamená „podřetězec“
driver.findElement(By.cssSelector('div[id*='_pattern_']'));
Můžeme také použít contains
driver.findElement(By.cssSelector('div:contains('_pattern_')'));
Další čtení: