Selenium CSS Selectors များနမူနာများ

element တွေကို CSS selector များဖြင့်ရှာဖွေခြင်းသည် XPath ထက်ပိုမိုမြန်ဆန်။ ပိုမိုဖတ်လို့လွယ်သောနည်းလမ်းတစ်ခုဖြစ်သည်။

ဤသင်ခန်းစာသည် CSS selectors ကို အသုံးပြု၍ Selenium တွင်ဝဘ် element များကိုမည်သို့ရှာဖွေရမည်ကိုဥပမာပေးသည်။



Attribute ဖြင့် CSS Selectors

ကျွန်ုပ်တို့တွင်အောက်ပါ attribute တွေပါတဲ့ tag ရှိတယ်လို့မြင်ယောင်ကြည့်ပါ။ [id, class, name, value]


attribute က element တွေကိုရှာရန်ယေဘူယျနည်းလမ်းမှာ -

css = element_name[='']

ဥပမာ -


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

Id Attribute

CSS တွင်ကျွန်ုပ်တို့သည် _ _ _ _ ကိုသုံးနိုင်သည် ရွေးရန်သင်္ကေတ # element တစ်ခုရဲ့ attribute:

ဥပမာ -

id

Class Attribute

တူညီတဲ့နိယာမကို Element များ | | + + အားဖြင့်နေရာချထားရန်အသုံးပြုနိုင်သည် ဂုဏ်ရည်။

driver.findElement(By.cssSelector('input#firstname')); //or driver.findElement(By.cssSelector('#firstname')); ကိုအသုံးပြုသည် သင်္ကြန်။


classမှတ်စု:အသုံးပြုသည့်အခါအပိုဂရုစိုက်ပါ HTML element တွင် class attribute တူညီသော web element များများစွာရှိနိုင်သည်။

မျိုးစုံ Attributes

တခါတရံမှန်ကန်သောဒြပ်စင်ကိုနေရာချထားရန်ရွေးချယ်ရေးစံများနှင့်ပိုမိုတိကျစွာဖော်ပြရန်လိုအပ်သည်။

.

Ajax ခေါ်ဆိုမှုပေါ် မူတည်၍ display ၏တန်ဖိုးသည်“ none” သို့မဟုတ်“ block” ဖြစ်နိုင်သည်။ ဒီအခြေအနေမှာ၊ element ကို class နဲ့ style နှစ်မျိုးလုံးကိုရှာဖို့လိုတယ်။

ဥပမာ -

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

Attribute မှာသီးခြားတန်ဖိုးတစ်ခုမပါ ၀ င်ပါ

WebDriver တွင်၊ attribute တွင်သင်ရွေးချယ်လိုသောတန်ဖိုးများပါ ၀ င်သော element များကိုသင်မည်သို့ရှာရမည်နည်း။ ဤ CSS selector ဥပမာသည်တိကျသော attribute တန်ဖိုးဖြင့်မည်သို့ရွေးချယ်ရမည်ကိုပြသည်


သင့်တွင်တူညီသော attribute နှင့် attribute တန်ဖိုးတူသော element များစွာရှိသည်ဆိုပါစို့၊ အချို့ element များတွင်မူတန်ဖိုးနှင့်တွဲဖက်ထားသောအခြား variable များရှိသည်။ ဥပမာ -

အထက်ပါအတိုအထွာတွင်ကျွန်ုပ်တို့သည်ရနိုင်သောနေ့ကိုရွေးလိုကြသည် (ဆိုလိုသည်မှာနောက်ဆုံးနှစ်ခုဖြစ်သော _ + _ | element)

တွေ့မြင်ရသည့်အတိုင်း divs လေးခုလုံးတွင်ပြက္ခဒိန်ရက် - ပါ ၀ င်သော်လည်းပထမနှစ်ခုတွင်“ မရရှိနိုင်” သောအရာများပါ ၀ င်သည်။

ပထမနှစ်ခု divs များကိုမရွေးခြင်းအတွက် CSS selector သည်


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

ကလေး Element တည်နေရာ

image tag တည်နေရာကိုရှာရန်၊

div

မျိုးစုံကလေး Element တွေကို

list element များကဲ့သို့တူညီသော parent element တစ်ခုတွင် child element မျိုးစုံရှိသည့်အခါများရှိသည်

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

မြင်နိုင်သည်အတိုင်း, တစ် ဦး ချင်းစီစာရင်း element တွေကိုသူတို့နှင့်ဆက်စပ်မဆိုအိုင်ဒီရှိသည်မဟုတ်ကြဘူး။ စာသား 'လိမ္မော်ရောင်' ဖြင့်စာသားကိုရှာရန်ကျွန်ုပ်တို့သည် _ _ _ _ ကိုအသုံးပြုရမည်။

ဥပမာ -


ထိုနည်းတူစွာပင်နောက်ဆုံးကလေး element ကိုရွေးရန် Banana ကိုသုံးသည်။

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

dynamic Generated အိုင်ဒီ

ကျွန်ုပ်တို့သည်ဒြပ်ထုဖြစ်ပေါ်သောအိုင်ဒီများနှင့်ဒြပ်စင်များကိုနေရာချထားရန် string matchers ကိုသုံးနိုင်သည်။

ဤဥပမာတွင် div element သုံးမျိုးလုံးသည် 'random' ဟူသောစကားလုံးပါ ၀ င်သည်။


  • Apple

  • Orange

  • Banana

Attribute ကနေစပါတယ်

ပထမဆုံးရွေးချယ်ရန် nth-of-type element ကိုငါတို့သုံးလိမ့်မယ် driver.findElement(By.cssSelector('ul#fruit li:nth-of-type(2)')); ဆိုလိုသည်မှာ 'နှင့်စတင်သည်'

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

Attribute ဖြင့်အဆုံးသတ်ထားသည်

ဒုတိယရွေးချယ်ရန် element ကိုငါတို့သုံးလိမ့်မယ် div ဆိုလိုသည်မှာ 'နှင့်အဆုံးသတ်သည်' ကိုဆိုလိုသည်

^=

Attribute ပါ ၀ င်ပါတယ်

နောက်ဆုံးရွေးရန် _ _ _ _ _ + _ | ကိုအသုံးပြုမည် ဆိုလိုတာက 'Sub-string'

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

div ကိုလည်းကျွန်ုပ်တို့သုံးနိုင်သည်

$=

နောက်ထပ်ဖတ်ရန်:

စိတ်ဝင်စားစရာဆောင်းပါးများ