Прыклады селената CSS-селектараў

Размяшчэнне элементаў CSS-селектарамі з'яўляецца пераважным спосабам, бо ён больш хуткі і зручны для чытання, чым XPath.

У гэтым уроку прыведзены прыклады таго, як знайсці вэб-элементы ў Selenium з дапамогай селектараў CSS.



Селектары CSS па атрыбутах

Давайце ўявім, што ў нас ёсць тэг з наступнымі атрыбутамі [ідэнтыфікатар, клас, імя, значэнне]


Агульны спосаб пошуку элементаў па атрыбутах:

css = element_name[='']

Прыклад:


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

Атрыбут Id

У CSS мы можам выкарыстоўваць # абазначэнне для выбару id атрыбут элемента:



Прыклад:

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

Атрыбут класа

Той самы прынцып можа быць выкарыстаны для пошуку элементаў па іх class атрыбут.

Мы выкарыстоўваем . абазначэнне.


driver.findElement(By.cssSelector('input.myForm')); //or driver.findElement(By.cssSelector('.myForm')); нататка:Будзьце асабліва ўважлівыя пры выкарыстанні . абазначэнне, бо ў крыніцы HTML можа быць шмат вэб-элементаў з тым самым атрыбутам класа.

Некалькі атрыбутаў

Часам патрабуецца больш дакладна вызначыцца з крытэрамі выбару, каб знайсці правільны элемент.

Значэнне адлюстравання можа быць 'няма' альбо 'блакаваць' у залежнасці ад выкліку ajax. У гэтай сітуацыі мы павінны знайсці элемент як па класе, так і па стылі.

Прыклад:

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

Атрыбут НЕ ўтрымлівае пэўнага значэння

Як у WebDriver знайсці элементы, атрыбут якіх утрымлівае значэнні, якія вы не хочаце выбіраць? Гэты прыклад селектара CSS паказвае, як НЕ выбіраць па пэўным значэнні атрыбута


Дапусцім, у вас ёсць шмат элементаў, якія маюць адзін і той жа атрыбут і значэнне атрыбута, але некаторыя з гэтых элементаў маюць іншыя зменныя, далучаныя да значэння. напрыклад:

У прыведзеным фрагменце мы хочам выбраць даступны дзень (г.зн. два апошнія div элементы)

Як бачна, усе чатыры дзівы ўтрымліваюць 'каляндарны дзень', але першыя два таксама ўтрымліваюць 'недаступны', чаго мы не хочам.

Селектар CSS для 'Не выбраць першыя два div' - гэта


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

Знаходжанне дзіцячай стыхіі

Каб знайсці тэг выявы, мы выкарыстоўваем:

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

Некалькі дзіцячых элементаў

Бываюць выпадкі, калі ў адным бацькоўскім элеменце ёсць некалькі даччыных элементаў, такіх як элементы спіса


  • Apple

  • Orange

  • Banana

Як бачна, асобныя элементы спісу не маюць ідэнтыфікатара, звязанага з імі. Каб знайсці элемент з тэкстам 'Аранжавы', мы павінны выкарыстаць nth-of-type.

Прыклад:


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

Сапраўды гэтак жа, каб выбраць апошні даччыны элемент, гэта значыць 'Банан', мы выкарыстоўваем:

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

Дынамічна генераваныя ідэнтыфікатары

Мы можам выкарыстоўваць супадзенні радкоў для пошуку элементаў з дынамічна генеруемымі ідэнтыфікатарамі.

У гэтым прыкладзе ўсе тры элементы div ўтрымліваюць слова 'выпадковы'.

Атрыбут пачынаецца з

Для выбару першага div элемент, мы б выкарыстоўвалі ^= што азначае 'пачынаецца з':

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

Атрыбут Заканчваецца з

Для выбару другога div элемент, мы б выкарыстоўвалі $= што азначае 'заканчваецца на':

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

Атрыбут Змяшчае

Для выбару апошняга div элемент, які мы б выкарыстоўвалі *= што азначае 'падрадок'

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

Мы таксама можам выкарыстоўваць contains

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

Далейшае чытанне: