selenium ئارقىلىق توربەتنى ئاپتۇماتلاشتۇرغان ۋاقىتتا توربەت ئېلىمىنتلارنى تېپىشنىڭ 8 خىل ئۇسۇلىنى سۆزلەپ ئۆتكەن ئىدۇق. شۇ ئۇسۇللاردىن بىرسى بولسا css selector ئىدى.css selector بولسا css خاسلىقى ئارقىلىق توربەت ئېلىمىتنى تېپىش ئۇسۇلى بولۇپ، بۇ ئۇسۇل باشقا ئۇسۇللارغا قارىغاندا تېز، ھەتتا Xpath كە قارىغاندىمۇ تېز بولدىغانلىقىنى ئېيتىپ كەلمەكتە. بىز بۇ يازمىمىزدا بولسا css selector نى قانداق يېزىش توغۇرسىدا سۆزلەپ ئۆتمەكچى. 

1. خاسلىق ئارقىلىق css Selector يېزىش

مەسىلەن : id,class,name,value ئارقىلىق يېزىلغان مەلۇم بىر HTML ئېلىمىنىت بار دەپ ئويلايلى.

<input type="text" id="fistname" name="first_name" class="myForm">

بۇ input ئېلىمىتنى تېپىشتا دائىم ئىشلىتىدىغان ئۇسۇل بولسا تۆۋەندىكىدەك:

css = element_name[<attribute_name>='<value>']

مەسىلەن:

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

id خاسلىقىدا بىز # بەلگىسىنى ئىشلىتىش ئارقىلىق مەلۇم بىر ئېلمىنىتنى تاپىمىز، مەسىلەن تۆۋەندىكىدەك:

driver.findElement(By.cssSelector("input#firstname"));

//ياكى

driver.findElement(By.cssSelector("#firstname"));

class خاسلىقىدا بىر .( چېكىت) نى ئىشلىتىش ئارقىلىق ئېلمىنىتنى تاپىمىز، مەسىلەن تۆۋەندىكىدەك:

driver.findElement(By.cssSelector("input.myForm"));

//ياكى

driver.findElement(By.cssSelector(".myForm"));

كۆپ خاسلىقنى ئىشلىتىپ ئېلمىنىت تېپىش

بەزىدە ئېلمىنىت تاپقاندا تېخىمۇ ئىنچىكە نوقتىلارنى تۇتۇپ ئېلمىنىتنى تېز ھەم توغرا تېپىشقا توغرا كىلىدۇ، بىزبۇ ۋاقىتتا مەزكور ئېلمىنىتنىڭ بىر قانچە خاسلىقىنى ئىشلىتىپ ئېلمىنىت تاپىمىز. مەسىلەن تۆۋەندىكى HTML كودىغا قاراپ باقايلى.

<div class="ajax_enabled" style="display:block">

بۇ كودتا ئېلمىنىتنىڭ كۆرسىتىش شەكلى بەزىدە block ۋە بەزىدە none بولۇش ئېھتىمالىقى بار، بۇ پەقەت ajax ھۆججىتىنى قانداق چاقىرىشىغا باغلىق. بىز بۇ ئەھۋالدا بىردىن كۆپ خاسلىقنى ئىشلىتىش ئارقىلىق مەزكور ئېلمىنىتنى تاپساق بولىدۇ، مەسىلەن تۆۋەندىكىدەك:

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

WebDriver دا ، خاسلىقى سىز تاللىمايدىغان قىممەتلەرنى ئۆز ئىچىگە ئالغان ئېلېمېنتلارنى قانداق تاپىسىز؟ بۇ CSS تاللىغۇچ مىسالى قانداق قىلىپ خاسلىق قىممىتى ئارقىلىق تاللىمايدىغانلىقىنى كۆرسىتىپ بېرىدۇ.

ئ‍وخشاش بىر خاسلىق ۋە خاسلىق قىممىتىگە ئىگە نۇرغۇن ئېلېمېنتلار بار دەپ پەرەز قىلايلى ، ئەمما بۇ ئېلېمېنتلارنىڭ بەزىلىرىنىڭ باشقا ئۆزگەرگۈچى مىقدارلىرى بار. مەسىلەن:

<div class="day past calendar-day-2017-02-13 calendar-dow-1 unavailable">
<div class="day today calendar-day-2017-02-14 calendar-dow-2 unavailable">
<div class="day calendar-day-2017-02-15 calendar-dow-3">
<div class="day calendar-day-2017-02-16 calendar-dow-4">

يۇقارقى ئۈزۈندە ، بىز بار بولغان بىر كۈننى تاللىماقچىمىز (يەنى ئەڭ ئاخىرقى ئىككى div ئېلېمېنتى) كۆرۈۋېلىشقا بولىدۇكى ، تۆت بۆلەكنىڭ ھەممىسىدە «كالېندار كۈنى-» بار ، ئەمما ئالدىنقى ئىككىسىدە بىز خالىمايدىغان «ئىشلەتكىلى بولمايدىغان» مەزمۇنلار بار. ئالدىنقى ئىككى بۆلەكنى تاللىماسلىق ئۈچۈن CSS تاللىغۇچ تۆۋەندىكىدەك يېزىلىدۇ.

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

بالىلار ئېلېمېنتىنى تېپىش

<div id="logo">
    <img src="./logo.png" />
</div>

يۇقارىقى كودتىكى img ئېلمىنىتىنى تېپىش ئۈچۈن css تاللىغۇچىنى تۆۋەندىكىدەك يازساق بولىدۇ.

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

كۆپ خىل بالا ئېلېمېنتلىرىنى تېپىش

ئوخشاش بىر ئېلېمېنتنىڭ ئىچىدە تىزىملىك ​​ئېلېمېنتى قاتارلىق بىر نەچچە بالا ئېلېمېنتى بولغان ئەھۋاللار بار، مەسىلەن تۆۋەندىكىدەك:

<ul id="fruit">
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
</ul>

كۆرۈۋېلىشقا بولىدۇكى ، يەككە تىزىملىك ​​ئېلېمېنتلىرىنىڭ ئۇلار بىلەن مۇناسىۋەتلىك ھېچقانداق id يوق. «ئاپېلسىن» تېكىستى بىلەن ئېلېمېنتنى تېپىش ئۈچۈن ، بىز nth- تىپنى ئىشلىتىشىمىز كېرەك. مەسىلەن تۆۋەندىكىدەك:

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

ئوخشاشلا ، ئەڭ ئاخىرقى بالا ئېلېمېنتىنى يەنى «بانان» نى تاللاش ئۈچۈن ، بىز كودنى تۆۋەندىكىدەك يازالايمىز:

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

ئۆزگىرىشچان ( Dynamically ) ھاسىل بولغان  id لار

ئۆزگىرىشچان ( Dynamically ) ھاسىل قىلىنغان Ids ئارقىلىق ئېلېمېنتلارنى تېپىش ئۈچۈن تىزما ماسلاشتۇرغۇچ ئىشلىتەلەيمىز. بۇ مىسالدا ، ئۈچ بۆلەك ئېلېمېنتنىڭ ھەممىسىدە «random» دېگەن سۆز بار.

<div id="123_randomId">
<div id="randomId_456">
<div id="123_pattern_randomId">

باشلىنىش خاسلىقى

بىرىنچى div ئېلېمېنتىنى تاللاش ئۈچۈن ، بىز ^ = نى ئىشلىتىمىز ، يەنى بىلەن باشلىنىدۇ دىگەن مەنىدە. مەسىلەن تۆۋەندىكىدەك:

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

ئاخىرلىشىش خاسلىقى

ئىككىنچى div ئېلېمېنتىنى تاللاش ئۈچۈن ، بىز $ = نى ئىشلىتىمىز ، يەنى بىلەن ئاخىرلىشىدۇ. مەسىلەن تۆۋەندىكىدەك:

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

ئ‍ۆز ئىچىگە ئېلىش خاسلىقى، يەنى contains

ئەڭ ئاخىرقى div ئېلېمېنتىنى تاللاش ئۈچۈن بىز * = نى ئىشلىتىمىز. يەنى ئ‍ۆز ئىچىگە ئالىدۇ ياكى بۇ خاسلىقنىڭ ئىچىدە بار دىگەن مەنىدە. مەسىلەن تۆۋەندىكىدەك:

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

بىز يەنە contains نى ئىشلىتىش ئارقىلىقمۇ بۇ ئېلمىنىتنى تاپالايمىز، مەسىلەن تۆۋەندىكىدەك:

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