Selenium locatorlar\u0131 se\u00e7erken, Dev Tools taraf\u0131ndan sa\u011flanan XPath veya CSS Se\u00e7iciyi kullanmaktan ka\u00e7\u0131nmal\u0131y\u0131z. Xpath veya css selector\u2019u geli\u015ftirici ara\u00e7lar\u0131ndan kopyalamak, yap\u0131lmas\u0131 en kolay yoldur, ancak komut dosyalar\u0131n\u0131z\u0131n kararl\u0131l\u0131\u011f\u0131 ve okunabilirli\u011finde sorunlara neden olabilmektedir. Bu de\u011ferleri sa\u011flayan taray\u0131c\u0131 anlaml\u0131 XPath veya CSS konum belirleyicilerini aramaz ve karma\u015f\u0131k olanlar\u0131 verir bu da s\u0131k s\u0131k k\u0131r\u0131lmalara neden olabilir. Bu da otomasyonunuzu \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda ilgili elementin bulunamamas\u0131na neden olabilir. Bu sebeple en sa\u011fl\u0131kl\u0131 y\u00f6ntem a\u015fa\u011f\u0131da anlataca\u011f\u0131m yollarla CSS Selector\u2019u veya Xpath\u2019i kendiniz tan\u0131mlaman\u0131zd\u0131r.<\/p>\n\n\n\n
1)CSS Selector Kullan\u0131mlar\u0131<\/p>\n\n\n\n
Bir elementte ID yada name ile ilgili bir bilgi yoksa veya bunlar de\u011fi\u015fken ise genellikle CSS Selector veya xpath kullan\u0131l\u0131r. xpath ile kar\u015f\u0131la\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda CSS Selector daha h\u0131zl\u0131 \u00e7al\u0131\u015fmaktad\u0131r. Bu nedenle bir engel yoksa \u00f6ncelikle CSS Selector tercih edilir.<\/p>\n\n\n\n
CSS Se\u00e7icileri \u00e7e\u015fitli bi\u00e7imlerde bulunabilir:<\/p>\n\n\n\n
Tag ve ID<\/p>\n\n\n\n
Tag ve Class<\/p>\n\n\n\n
Tag ve Attribute<\/p>\n\n\n\n
Tag, Class ve Attribute<\/p>\n\n\n\n
Matches (Starts with, Ends with, Contains)<\/p>\n\n\n\n
Child elementler<\/p>\n\n\n\n
1.1)Tag ve ID<\/p>\n\n\n\n
Tag ve ID kullanarak \u00f6\u011feyi bulmak i\u00e7in \u00fc\u00e7 bile\u015fen kullan\u0131r\u0131z.<\/p>\n\n\n\n
Syntax: css = (Html \u200b\u200betiketi) (#) (ID\u2019nin de\u011feri)<\/p>\n\n\n\n
1.1.1)Html Etiketi: Bulmak istedi\u011fimiz etiketi sa\u011flamak i\u00e7in kullan\u0131l\u0131r, \u00f6rnek giri\u015f etiketi.<\/p>\n\n\n\n
1.1.2) #: Bu i\u015faret ID de\u011ferini temsil etmek i\u00e7in kullan\u0131l\u0131r. Bir \u00f6\u011feyi CSS se\u00e7ici arac\u0131l\u0131\u011f\u0131yla kimlik yoluyla bulmak istedi\u011finizde, ayn\u0131 \u015fekilde bir # i\u015faretinin olmas\u0131 gerekti\u011fini unutmay\u0131n. Di\u011fer \u00f6zellikler i\u00e7in # i\u015faretini kullanmam\u0131z gerekmez.<\/p>\n\n\n\n
1.1.3) ID: Bulmak istedi\u011fimiz elementin kimlik de\u011ferini temsil eder.<\/p>\n\n\n\n
Tag ve ID Kullan\u0131m\u0131 i\u00e7in Linkedin \u0130\u015f Arama Alan\u0131 \u00d6rne\u011fi<\/p>\n\n\n\n
\u2018Tag ve ID Kullan\u0131m\u0131 i\u00e7in Linkedin \u0130\u015f Arama Alan\u0131 \u00d6rne\u011fi\u2019 g\u00f6rselindeki alan\u0131 Css Selector Tag ve ID ile bulmak i\u00e7in;<\/p>\n\n\n\n
driver.findElement(By.cssSelector(\u201cinput #jobs-search-box-keyword-id-ember458\u201d))<\/p>\n\n\n\n
1.2) Tag ve Class<\/p>\n\n\n\n
Bu locator da ID gibi \u00e7al\u0131\u015f\u0131r tek fark\u0131 syntax\u0131nda # i\u015fareti yerine nokta kullan\u0131l\u0131r.<\/p>\n\n\n\n
Syntax: css = (Html \u200b\u200betiketi) (.) (Class\u2019\u0131n de\u011feri)<\/p>\n\n\n\n
Bunun i\u00e7in de Linkedin \u00f6rne\u011fini kullanal\u0131m.<\/p>\n\n\n\n
Tag ve Class Kullan\u0131m\u0131 i\u00e7in Linkedin \u0130\u015f Arama \u00d6rne\u011fi<\/p>\n\n\n\n
Bu alan\u0131 Tag ve Class ile bulmak i\u00e7in;<\/p>\n\n\n\n
driver.findElement(By.cssSelector(\u201cinput . jobs-search-box__text-input\u201d))<\/p>\n\n\n\n
1.3)Tag ve Attribute<\/p>\n\n\n\n
Bu y\u00f6ntemde de elementin tag name\u2019i ve elemente \u00f6zel olan bir \u00f6zelli\u011fi(type, name vb.) kullan\u0131larak css selectoru yaz\u0131l\u0131r. Birden fazla \u00f6\u011fenin ayn\u0131 etikete ve niteli\u011fe sahip olmas\u0131 durumunda, ilk \u00f6\u011fe se\u00e7ilecektir.<\/p>\n\n\n\n
Syntax: css= (HTML Tag)[Attribute=Value]\n\n\n\n
Tag ve Attribute Kullan\u0131m\u0131 i\u00e7in Pegasus \u2018Ucuz U\u00e7u\u015f Ara\u2019 Butonu<\/p>\n\n\n\n
G\u00f6rseldeki \u2018Ucuz U\u00e7u\u015f Ara\u2019 butonu i\u00e7in Tag ve Attribute kullanarak Css Selector\u2019u yazal\u0131m;<\/p>\n\n\n\n
driver.findElement(By.cssSelector(\u201cbutton [type = \u2018submit\u2019]\u201d))<\/p>\n\n\n\n
1.4)Tag, Class ve Attribute<\/p>\n\n\n\n
Bu locator; Tag, Class ve se\u00e7ilen bir Attribute de\u011ferinin kombini olarak yaz\u0131l\u0131r.<\/p>\n\n\n\n
Syntax: css=(HTML Tag)(.)(Class)([attribute=\u2019Value of attribute\u2019])<\/p>\n\n\n\n
Tag, Class ve Attribute Kullan\u0131m\u0131 i\u00e7in Facebook \u015eifre Alan\u0131<\/p>\n\n\n\n
G\u00f6rseldeki Facebook \u015eifre alan\u0131 Css Selectorunu Tag, Class ve Attribute kullanarak yazal\u0131m.<\/p>\n\n\n\n
driver. findElement(By.cssSelector(\u201cinput. inputtext login_form_input_box [name = \u2018pass\u2019]\u201d))<\/p>\n\n\n\n
1.5) Elementleri E\u015fle\u015fme ile bulma(Matches)<\/p>\n\n\n\n
Elementleri bulmak i\u00e7in her zaman ilgili Attribute de\u011ferinin tamam\u0131n\u0131 yazmaya gerek yoktur. Ba\u015f\u0131n\u0131, sonunu yada i\u00e7erdi\u011fi bir b\u00f6l\u00fcm\u00fc yazarak da css selectorunu olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. Bunu baz\u0131 semboller kullanarak yapabiliriz.<\/p>\n\n\n\n
1.5.1) Starts With (^)<\/p>\n\n\n\n
Syntax: css=(HTML tag)([attribute^=\u2019start of the string\u2019])<\/p>\n\n\n\n
Element \u015fu \u015fekilde tan\u0131mlanm\u0131\u015f olsun;<\/p>\n\n\n\n
<input type=\u201demail\u201d name=\u201demail\u201d value=\u201d\u201d placeholder=\u201dEmail\u201d required=\u201drequired\u201d autofocus=\u201dautofocus\u201d class=\u201dform-control mt-3 form-control-lg\u201d><\/p>\n\n\n\n
Bu elementin Css Selectorunu Starts With y\u00f6ntemiyle yazal\u0131m;<\/p>\n\n\n\n
driver.findElement(By.cssSelector(\u201cinput[name^=\u2019em\u2019]\u201d))<\/p>\n\n\n\n
1.5.2)Ends With ($)<\/p>\n\n\n\n
Syntax: css=(HTML tag)([attribute$=\u2019end of the string\u2019])<\/p>\n\n\n\n
Element \u015fu \u015fekilde tan\u0131mlanm\u0131\u015f olsun;<\/p>\n\n\n\n
<input type=\u201demail\u201d name=\u201demail\u201d value=\u201d\u201d placeholder=\u201dEmail\u201d required=\u201drequired\u201d autofocus=\u201dautofocus\u201d class=\u201dform-control mt-3 form-control-lg\u201d><\/p>\n\n\n\n
Bu elementin Css Selectorunu Ends With y\u00f6ntemiyle yazal\u0131m;<\/p>\n\n\n\n
driver.findElement(By.cssSelector(\u201cinput[name$=\u2019ail\u2019]\u201d))<\/p>\n\n\n\n
1.5.3) Contains (*)<\/p>\n\n\n\n
Syntax: css=(HTML tag)([attribute*=\u2019partial string\u2019])<\/p>\n\n\n\n
Element \u015fu \u015fekilde tan\u0131mlanm\u0131\u015f olsun;<\/p>\n\n\n\n
<input type=\u201demail\u201d name=\u201demail\u201d value=\u201d\u201d placeholder=\u201dEmail\u201d required=\u201drequired\u201d autofocus=\u201dautofocus\u201d class=\u201dform-control mt-3 form-control-lg\u201d><\/p>\n\n\n\n
Bu elementin Css Selectorunu Contains y\u00f6ntemiyle yazal\u0131m;<\/p>\n\n\n\n
driver.findElement(By.cssSelector(\u201cinput[class*=\u2019control\u2019]\u201d))<\/p>\n\n\n\n
1.6) Child Elementler<\/p>\n\n\n\n
Child Elementler, ba\u015fka bir elementin alt\u0131nda tan\u0131mlanan elementlerdir. Genellikle bir liste yada tablonun alt\u0131ndaki verileri ula\u015fmak istedi\u011fimizde kullan\u0131r\u0131z.<\/p>\n\n\n\n
Syntax: Css= tagname . class name li : nth-of-child(child element indexi)<\/p>\n\n\n\n
Kategoriler Listesi g\u00f6rselindeki gibi tan\u0131mlanm\u0131\u015f bir listemiz olsun<\/p>\n\n\n\n
Kategoriler Listesi<\/p>\n\n\n\n
Bu listedeki \u2018Erkek\u2019 kategorisine eri\u015fmek i\u00e7in yaza\u011f\u0131m\u0131z css selector;<\/p>\n\n\n\n
driver.findElement(By.cssSelector(\u201cul. Giyim li:nth-of-child(2)\u201d);<\/p>\n\n\n\n
2)Xpath Kullan\u0131mlar\u0131<\/p>\n\n\n\n
Xpath, XML ifadelerini kullanarak web sayfas\u0131ndaki \u00f6\u011feleri bulmaya yard\u0131mc\u0131 olur.<\/p>\n\n\n\n
Syntax: Xpath= \/\/tagname[@attribute=\u2019value\u2019]\n\n\n\n
tagname= hedefledi\u011finiz elementin etiketi, \u00f6rne\u011fin bir giri\u015f(input) etiketini veya ba\u011flant\u0131(anchor) etiketini, vb. belirtir.<\/p>\n\n\n\n
attribute= \u2018@\u2019 \u00f6n eki ve kar\u015f\u0131l\u0131k gelen de\u011ferleri ile tan\u0131mlan\u0131r. Name, ID, Class vb. olab\u0131l\u0131r.<\/p>\n\n\n\n
Xpath Se\u00e7icileri \u00e7e\u015fitli bi\u00e7imlerde bulunabilir:<\/p>\n\n\n\n
Standard Xpath<\/p>\n\n\n\n
Contains<\/p>\n\n\n\n
AND & OR<\/p>\n\n\n\n
Starts-with<\/p>\n\n\n\n
Text<\/p>\n\n\n\n
2.1)Standard Xpath<\/p>\n\n\n\n
Xpath\u2019in standart syntax\u2019\u0131 ile kullan\u0131m\u0131d\u0131r.<\/p>\n\n\n\n
Bir element \u015f\u00f6yle tan\u0131mlanm\u0131\u015f olsun;<\/p>\n\n\n\n
<input type=\u201demail\u201d name=\u201demail\u201d value=\u201d\u201d placeholder=\u201dEmail\u201d required=\u201drequired\u201d autofocus=\u201dautofocus\u201d class=\u201dform-control mt-3 form-control-lg\u201d><\/p>\n\n\n\n
\u0130lgili xpath\u2019iyle bulmak i\u00e7in;<\/p>\n\n\n\n
driver.findElement(By.xpath(\u201c\/\/input[@name= \u2019email\u2019]\u201d))<\/p>\n\n\n\n
Bu \u00f6rnekte attribute olarak \u2018name\u2019 kullan\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n
2.2)Contains<\/p>\n\n\n\n
CSS Selector\u2019deki Contains ile benzer \u00e7al\u0131\u015f\u0131r. Herhangi bir element de\u011feri dinamik ve k\u0131smen de\u011fi\u015fti\u011finde kullan\u0131labilir.<\/p>\n\n\n\n
Syntax: Xpath= \/\/tagname[contains(@attribute, \u2018partial value of attribute\u2019)]\n\n\n\n
Element \u015fu \u015fekilde verilmi\u015f olsun;<\/p>\n\n\n\n
<input type=\u201dtext\u201d placeholder=\u201dFull Name*\u201d name=\u201dname\u201d value=\u201d\u201d class=\u201dform-control sign-up-input-2 \u201c><\/p>\n\n\n\n
Contains kullanarak xpath\u2019ini yazal\u0131m;<\/p>\n\n\n\n
driver.findElement(By.xpath(\u201c\/\/input[contains(@class, \u2018form-control\u2019)]\u201d))<\/p>\n\n\n\n
2.3) AND ve OR Kullan\u0131m\u0131 ile Xpath<\/p>\n\n\n\n
Bu y\u00f6ntem, bir elementi iki ko\u015ful k\u00fcmesi arac\u0131l\u0131\u011f\u0131yla bulmak istedi\u011fimizde kullan\u0131l\u0131r. \u201cAND\u201d durumunda her iki ko\u015ful da do\u011fru olmal\u0131 ve \u201cOR\u201d i\u00e7in bu ikisinden biri do\u011fru olmal\u0131d\u0131r.<\/p>\n\n\n\n
AND i\u00e7in syntax: Xpath=\/\/input[@id=\u2019value of id\u2019 AND @name=\u2019value of name\u2019]\n\n\n\n
OR i\u00e7in syntax: Xpath=\/\/input[@id=\u2019value of id\u2019 OR @name=\u2019value of name\u2019]\n\n\n\n
Yine ayn\u0131 \u00f6rne\u011fi kullanal\u0131m;<\/p>\n\n\n\n
<input type=\u201demail\u201d name=\u201demail\u201d value=\u201d\u201d placeholder=\u201dEmail\u201d required=\u201drequired\u201d autofocus=\u201dautofocus\u201d class=\u201dform-control mt-3 form-control-lg\u201d><\/p>\n\n\n\n
Elementi ilgili xpath kullan\u0131mlar\u0131yla bulmak i\u00e7in;<\/p>\n\n\n\n
driver.findElement(By.xpath(\u201c\/\/input[@type=\u2019email\u2019 AND @name=\u2019email\u2019]))<\/p>\n\n\n\n
driver.findElement(By.xpath(\u201c\/\/input[@type=\u2019email\u2019 OR @name=\u2019email\u2019]))<\/p>\n\n\n\n
2.4) Starts-With<\/p>\n\n\n\n
Kullan\u0131m\u0131 yine CSS Selector\u2019deki ile benzer \u015fekildedir.<\/p>\n\n\n\n
Syntax: Xpath=\/\/tagname[starts-with(@attribute,\u2019starting name of the attribute value\u2019)]\n\n\n\n
Elementimiz;<\/p>\n\n\n\n
<input type=\u201dpassword\u201d placeholder=\u201dDesired Password*\u201d name=\u201dpassword\u201d class=\u201dform-control sign-up-input-2 \u201d aria-autocomplete=\u201dlist\u201d><\/p>\n\n\n\n
\u0130lgili xpath kullan\u0131m\u0131yla elementi bulmak i\u00e7in;<\/p>\n\n\n\n
driver.findElement(By.xpath(\u201c\/\/input[starts-with(@name,\u2019pass\u2019)]\u201d))<\/p>\n\n\n\n
2.5) Text<\/p>\n\n\n\n
Metin e\u015fle\u015fmesini kullanarak elementi bulmak i\u00e7in kullan\u0131lan bir y\u00f6ntemdir. Bazen elementler id, class gibi \u00f6zelliklere sahip de\u011filken sadece text bar\u0131nd\u0131rabilir. Bu elementleri bulmam\u0131z i\u00e7in text y\u00f6ntemiyle xpathini yazmak bize yard\u0131mc\u0131 olmu\u015f olur.<\/p>\n\n\n\n
Syntax: Xpath=\/\/div[text()=\u2019value of text\u2019]\n\n\n\n
\u00d6rnek elementimiz;<\/p>\n\n\n\n
<p class=\u201dsignup-title\u201d>SIGN UP<\/p><\/p>\n\n\n\n
\u0130lgili xpath kullan\u0131m\u0131yla elementimizi bulmak i\u00e7in;<\/p>\n\n\n\n
driver.findElement(By.xpath(\u201c\/\/p[@text()=\u2019 SIGN UP\u2019]\u201d))<\/p>\n\n\n\n
CSS Selector ve Xpath\u2019i devTools kullanmadan kendimiz yazabilmemiz i\u00e7in y\u00f6ntemleri anlatt\u0131m. Umar\u0131m faydal\u0131 olmu\u015ftur \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Selenium locatorlar\u0131 se\u00e7erken, Dev Tools taraf\u0131ndan sa\u011flanan XPath veya CSS Se\u00e7iciyi kullanmaktan ka\u00e7\u0131nmal\u0131y\u0131z. Xpath veya css selector\u2019u geli\u015ftirici ara\u00e7lar\u0131ndan kopyalamak, yap\u0131lmas\u0131 en kolay yoldur, ancak komut dosyalar\u0131n\u0131z\u0131n kararl\u0131l\u0131\u011f\u0131 ve okunabilirli\u011finde sorunlara neden olabilmektedir. Bu de\u011ferleri sa\u011flayan taray\u0131c\u0131 anlaml\u0131 XPath veya CSS konum belirleyicilerini aramaz ve karma\u015f\u0131k olanlar\u0131 verir bu da s\u0131k s\u0131k k\u0131r\u0131lmalara neden olabilir.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[27],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=\/wp\/v2\/posts\/2244"}],"collection":[{"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2244"}],"version-history":[{"count":1,"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=\/wp\/v2\/posts\/2244\/revisions"}],"predecessor-version":[{"id":2245,"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=\/wp\/v2\/posts\/2244\/revisions\/2245"}],"wp:attachment":[{"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gizemevkuran.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}