Selenium IDE'deki Konumlandırıcılar: CSS Seçici - DOM - XPath - İD

Konum Belirleyiciler nedir?

Konumlandırıcı, Selenium IDE'ye hangi GUI öğelerinin (örneğin Metin Kutusu, Düğmeler, Onay Kutuları vb.) Üzerinde çalışması gerektiğini söyleyen bir komuttur. Doğru GUI öğelerinin tanımlanması, bir otomasyon komut dosyası oluşturmanın ön koşuludur. Ancak GUI öğelerinin doğru tanımlanması göründüğünden daha zordur. Bazen, hatalı GUI öğeleriyle veya hiç öğe olmadan çalışıyorsunuz! Bu nedenle Selenium, bir GUI öğesini tam olarak bulmak için bir dizi Konumlandırıcı sağlar.

Selenium IDE'deki farklı CSS Bulucu türleri

Konum belirleyiciye ihtiyaç duymayan komutlar vardır ("aç" komutu gibi). Ancak, çoğunun Selenium webdriver'da element Locator'lara ihtiyacı vardır.

Konum belirleyici seçimi büyük ölçüde Test Edilen Uygulamanıza bağlıdır . Bu eğitimde, Facebook, yeni turlar arasında geçiş yapacağız. Demoaut, bu uygulamaların desteklediği konum belirleyicilere göre. Aynı şekilde Test projenizde, uygulama desteğinize bağlı olarak Selenium webdriver'da yukarıda listelenen öğe konumlandırıcılardan herhangi birini seçeceksiniz.

Kimliğe göre bulma

Kimliklerin her öğe için benzersiz olması gerektiğinden, öğeleri bulmanın en yaygın yolu budur.

Hedef Biçimi: id = öğenin kimliği

Bu örnek için, Mercury Tours kimlik özelliklerini kullanmadığından test uygulamamız olarak Facebook'u kullanacağız.

Adım 1. Bu eğitim oluşturulduğundan beri Facebook, Giriş Sayfası Tasarımını değiştirdi. Test için http://demo.guru99.com/test/facebook.html bu demo sayfasını kullanın. Firebug kullanarak "E-posta veya Telefon" metin kutusunu inceleyin ve kimliğini not edin. Bu durumda kimlik "e-posta" dır.

Adım 2. Selenium IDE'yi başlatın ve Hedef kutusuna "id = email" yazın. Bul düğmesini tıklayın ve "E-posta veya Telefon" metin kutusunun sarı ile vurgulandığına ve yeşille sınırlandığına dikkat edin, bu Selenium IDE'nin bu öğeyi doğru bir şekilde bulabildiği anlamına gelir.

İsme Göre Yer Bulma

Öğelerin isme göre konumlandırılması, kimliğe göre bulmaya çok benzer, tek farkı bunun yerine "isim =" önekini kullanmamızdır.

Hedef Biçimi: ad = öğenin adı

Aşağıdaki gösterimde, şimdi Mercury Tours'u kullanacağız çünkü tüm önemli unsurların isimleri var.

Adım 1. http://demo.guru99.com/test/newtours/ adresine gidin ve "Kullanıcı Adı" metin kutusunu incelemek için Firebug'ı kullanın. İsim niteliğine dikkat edin.

Burada elemanın adının "userName" olduğunu görüyoruz.

Adım 2. Selenium IDE'de, Hedef kutusuna "name = userName" yazın ve Bul düğmesini tıklayın. Selenium IDE, Kullanıcı Adı metin kutusunu vurgulayarak bulabilmelidir.

Filtreleri Kullanarak İsme Göre Yer Bulma

Birden çok öğe aynı ada sahip olduğunda filtreler kullanılabilir. Filtreler, aynı ada sahip öğeleri ayırt etmek için kullanılan ek özelliklerdir.

Hedef Biçimi : name = name_of_the_element filtresi = value_of_filter

Bir örnek görelim -

1. Adım . Kullanıcı adı ve parola olarak "öğretici" yi kullanarak Mercury Tours'da oturum açın. Sizi aşağıda gösterilen Uçuş Bulucu sayfasına götürmelidir.

Adım 2. Firebug'ı kullanarak Gidiş Dönüş ve Tek Yön radyo düğmelerinin aynı "tripType" adına sahip olduğuna dikkat edin. Ancak, farklı VALUE özniteliklerine sahip oldukları için her birini filtremiz olarak kullanabiliriz.

Aşama 3.

• Önce Tek Yön radyo düğmesine erişeceğiz. Editördeki ilk satırı tıklayın.
• Selenium IDE'nin Komut kutusuna "tıklama" komutunu girin.
• Hedef kutusuna "ad = geziTürü değer = tek yol" girin. "Değer = tek yönlü" kısmı filtremizdir.

4. adım . Bul düğmesini tıklayın ve Selenium IDE'nin Tek Yönlü radyo düğmesini yeşil ile vurgulayabildiğine dikkat edin - bu, öğeye VALUE özelliğini kullanarak başarıyla erişebildiğimiz anlamına gelir.

Adım 5. Bu tıklama komutunu yürütmek için klavyenizdeki "X" tuşuna basın. Tek Yön radyo düğmesinin seçildiğine dikkat edin.

Aynı şeyi Gidiş Dönüş radyo düğmesiyle, bu sefer hedef olarak "name = tripType value = roundtrip" kullanarak da yapabilirsiniz.

Bağlantı Metnine Göre Konum Bulma

Selenium'daki bu tür CSS bulucu yalnızca köprü metinleri için geçerlidir. Bağlantıya, hedefimizin önüne "link =" ve ardından köprü metni ekleyerek erişiriz.

Hedef Biçimi : link = link_text

Bu örnekte, Mercury Tours ana sayfasında bulunan "KAYDOL" bağlantısına erişeceğiz.

Aşama 1.

• Öncelikle, Mercury Tours'dan çıkış yaptığınızdan emin olun.
• Mercury Tours ana sayfasına gidin.

2. Adım .

• Firebug kullanarak "KAYDET" bağlantısını inceleyin. Bağlantı metni ve etiketleri arasında bulunur.
• Bu durumda, bağlantı metnimiz "KAYIT" şeklindedir. Bağlantı metnini kopyalayın.

3. Adım . Bağlantı metnini Firebug'a kopyalayın ve Selenium IDE'nin Hedef kutusuna yapıştırın. Bunun önüne "link =" ekleyin.

Adım 4. Bul düğmesine tıklayın ve Selenium IDE'nin REGISTER bağlantısını doğru şekilde vurgulayabildiğine dikkat edin.

Adım 5. Daha fazla doğrulamak için, Komut kutusuna "clickAndWait" yazın ve çalıştırın. Selenium IDE, bu KAYIT bağlantısına başarılı bir şekilde tıklayabilmeli ve sizi aşağıda gösterilen Kayıt sayfasına götürmelidir.

CSS Seçiciye göre bulma

Selenium'daki CSS Seçiciler, bir öğeyi HTML etiketi, kimlik, sınıf ve niteliklerin bir kombinasyonuna dayalı olarak tanımlamak için kullanılan dize desenleridir. Selenium'da CSS Seçiciler ile konumlandırma önceki yöntemlerden daha karmaşıktır, ancak gelişmiş Selenium kullanıcılarının en yaygın konum bulma stratejisidir çünkü kimliği veya adı olmayan öğelere bile erişebilir.

Selenium'daki CSS Seçicilerinin birçok biçimi vardır, ancak biz yalnızca en yaygın olanlara odaklanacağız.

• Etiket ve kimlik
• Etiket ve sınıf
• Etiket ve nitelik
• Etiket, sınıf ve öznitelik
• İç metin

Bu stratejiyi kullanırken, aşağıdaki örneklerde gösterileceği gibi, Hedef kutusunun başına her zaman "css =" ekliyoruz.

CSS Seçici ile Bulma - Etiket ve Kimlik

Yine, bu örnekte Facebook'un E-posta metin kutusunu kullanacağız. Hatırlayacağınız gibi, bir "e-posta" kimliğine sahip ve biz buna "Kimliğe göre Konumlandırma" bölümünden zaten erişmiştik. Bu sefer, aynı öğeye erişmek için ID'li bir Selenium CSS Seçici kullanacağız.

Sözdizimi	Açıklama
css = tag # id	tag = erişilen öğenin HTML etiketi # = karma işareti. Kimliğe sahip bir Selenium CSS Seçici kullanırken bu her zaman mevcut olmalıdır id = erişilen öğenin kimliği

Kimliğin önünde her zaman bir kare işareti (#) bulunduğunu unutmayın.

Adım 1. www.facebook.com adresine gidin. Firebug'ı kullanarak "E-posta veya Telefon" metin kutusunu inceleyin.

Bu noktada, HTML etiketinin "girdi" ve kimliğinin "e-posta" olduğunu unutmayın. Dolayısıyla sözdizimimiz "css = input # email" olacaktır.

Adım 2. Selenium IDE'nin Hedef kutusuna "css = input # email" yazın ve Bul düğmesini tıklayın. Selenium IDE bu öğeyi vurgulayabilmelidir.

CSS Seçiciye Göre Konum Bulma - Etiket ve Sınıf

Bir HTML etiketi ve bir sınıf adı kullanarak Selenium'da CSS Seçici ile konumlandırma, bir etiket ve kimlik kullanmaya benzer, ancak bu durumda, karma işareti yerine bir nokta (.) Kullanılır.

Sözdizimi	Açıklama
css = etiket. sınıf	tag = erişilen öğenin HTML etiketi . = nokta işareti. Bu, sınıfla birlikte bir CSS Seçici kullanırken her zaman mevcut olmalıdır sınıf = erişilen öğenin sınıfı

Adım 1. http://demo.guru99.com/test/facebook.html demo sayfasına gidin ve "E-posta veya Telefon" metin kutusunu incelemek için Firebug'ı kullanın. HTML etiketinin "input" ve sınıfının "inputtext" olduğuna dikkat edin.

Adım 2. Selenium IDE'de, Hedef kutusuna "css = input.inputtext" yazın ve Bul'a tıklayın. Selenium IDE, E-posta veya Telefon metin kutusunu tanıyabilmelidir.

Birden çok öğe aynı HTML etiketine ve adına sahip olduğunda, yalnızca kaynak koddaki ilk öğenin tanınacağını unutmayın . Firebug'ı kullanarak Facebook'taki Parola metin kutusunu inceleyin ve E-posta veya Telefon metin kutusuyla aynı ada sahip olduğuna dikkat edin.

Önceki resimde yalnızca E-posta veya Telefon metin kutusunun vurgulanmasının nedeni, Facebook'un sayfa kaynağında ilk sırada yer almasıdır.

CSS Seçiciye Göre Konum Bulma - Etiket ve Öznitelik

Bu strateji, HTML etiketini ve erişilecek öğenin belirli bir niteliğini kullanır.

Sözdizimi	Açıklama
css = etiket [öznitelik = değer]	tag = erişilen öğenin HTML etiketi [ve] = belirli bir özelliğin ve ona karşılık gelen değerin yerleştirileceği köşeli parantezler öznitelik = kullanılacak öznitelik. Ad veya kimlik gibi öğeye özgü bir öznitelik kullanılması önerilir. değer = seçilen özelliğin karşılık gelen değeri.

Adım 1. Mercury Tours'un Kayıt sayfasına (http://demo.guru99.com/test/newtours/register.php) gidin ve "Soyadı" metin kutusunu inceleyin. HTML etiketini (bu durumda "input") ve adını ("lastName") not alın.

Adım 2. Selenium IDE'de, Hedef kutusuna "css = input [name = lastName]" yazın ve Bul'a tıklayın. Selenium IDE, Soyadı kutusuna başarıyla erişebilmelidir.

Birden çok öğe aynı HTML etiketine ve niteliğine sahip olduğunda, yalnızca ilki tanınır . Bu davranış, aynı etiket ve sınıfa sahip CSS seçicileri kullanan öğeleri bulmaya benzer.

CSS Seçiciye göre bulma - etiket, sınıf ve nitelik

Sözdizimi

Açıklama

css = tag.class [öznitelik = değer]

tag = erişilen öğenin HTML etiketi . = nokta işareti. Bu, sınıfla birlikte bir CSS Seçici kullanırken her zaman mevcut olmalıdır sınıf = erişilen öğenin sınıfı [ve] = belirli bir özelliğin ve ona karşılık gelen değerin yerleştirileceği köşeli parantezler öznitelik = kullanılacak öznitelik. Ad veya kimlik gibi öğeye özgü bir öznitelik kullanılması önerilir. değer = seçilen özelliğin karşılık gelen değeri.

Adım 1. http://demo.guru99.com/test/facebook.html demo sayfasına gidin ve 'E-posta veya Telefon' ve 'Şifre' giriş kutularını incelemek için Firebug'ı kullanın. HTML etiketlerini, sınıflarını ve niteliklerini not edin. Bu örnek için, 'tabindex' özelliklerini seçeceğiz.

Adım 2. Önce 'E-posta veya Telefon' metin kutusuna erişeceğiz. Bu nedenle, 1'lik bir tabindex değeri kullanacağız. Selenium IDE'nin Hedef kutusuna "css = input.inputtext [tabindex = 1]" girin ve Bul'a tıklayın. 'E-posta veya Telefon' giriş kutusu vurgulanmalıdır.

Adım 3. Parola giriş kutusuna erişmek için, tabindex özniteliğinin değerini değiştirmeniz yeterlidir. Hedef kutusuna "css = input.inputtext [tabindex = 2]" yazın ve Bul düğmesini tıklayın. Selenium IDE, Parola metin kutusunu başarıyla tanımlayabilmelidir.

CSS Seçiciye göre yerleştirme - iç metin

Fark etmiş olabileceğiniz gibi, HTML etiketlerine nadiren id, ad veya sınıf özellikleri verilir. Peki onlara nasıl erişeceğiz? Cevap, onların iç metinlerinin kullanılmasıdır. İç metinler, HTML etiketinin sayfada gösterdiği gerçek dize modelleridir.

Sözdizimi	Açıklama
css = tag: contains ("iç metin")	tag = erişilen öğenin HTML etiketi iç metin = öğenin iç metni

Adım 1. Mercury Tours ana sayfasına (http://demo.guru99.com/test/newtours/) gidin ve "Parola" etiketini araştırmak için Firebug'ı kullanın. HTML etiketini (bu durumda "yazı tipi" olan) bir yere not edin ve sınıf, kimlik veya isim özniteliklerinin bulunmadığına dikkat edin.

Adım 2. Tip css = font: ( "Parola:") içeren Selenyum IDE Hedef kutuya ve Bul tıklayın. Selenium IDE, aşağıdaki resimde gösterildiği gibi Parola etiketine erişebilmelidir.

3. Adım. Bu sefer, Hedefinizin artık "css = font: contains (" Boston ")" olması için iç metni "Boston" ile değiştirin. Bul'u tıklayın. "Boston'dan San Francisco'ya" etiketinin vurgulandığını fark etmelisiniz. Bu size Selenium IDE'nin iç metninin ilk kelimesini göstermiş olsanız bile uzun bir etikete erişebileceğini gösterir.

DOM (Belge Nesne Modeli) ile Konumlandırma

Belge Nesne Modeli (DOM), basit bir ifadeyle, HTML öğelerinin yapılandırılma yöntemidir. Selenium IDE, sayfa öğelerine erişimde DOM'u kullanabilir. Bu yöntemi kullanırsak, Hedef kutumuz her zaman "dom = document…" ile başlayacaktır; ancak "dom =" öneki normalde kaldırılır çünkü Selenium IDE "document" anahtar kelimesiyle başlayan her şeyi Selenium'daki DOM içinde bir yol olarak otomatik olarak yorumlayabilir.

Selenium'da DOM aracılığıyla bir öğeyi bulmanın dört temel yolu vardır:

• getElementById
• getElementsByName
• dom: ad (yalnızca adlandırılmış bir formdaki öğeler için geçerlidir)
• dom: dizin

DOM'a göre bulma - getElementById

Selenium'da DOM'un getElementById yöntemini kullanarak ilk yönteme odaklanalım. Sözdizimi şöyle olacaktır:

Sözdizimi	Açıklama
document.getElementById ("öğenin kimliği")	id of the element = bu, erişilecek elemanın ID özniteliğinin değeridir. Bu değer her zaman bir çift parantez ("") içine alınmalıdır.

Adım 1. Bu demo sayfasını kullanın http://demo.guru99.com/test/facebook.html Buraya gidin ve "Oturumumu açık tut" onay kutusunu incelemek için Firebug'ı kullanın. Kimliğini not edin.

Kullanmamız gereken ID'nin "persist_box" olduğunu görebiliriz.

Adım 2. Selenium IDE'yi açın ve Hedef kutusuna "document.getElementById (" persist_box ")" yazın ve Bul'a tıklayın. Selenium IDE, "Oturumumu açık tut" onay kutusunu bulabilmelidir. Selenium IDE, onay kutusunun içini vurgulayamasa da, öğeyi aşağıda gösterildiği gibi parlak yeşil bir kenarlıkla çevreleyebilir.

DOM'a göre bulma - getElementsByName

GetElementById yöntemi aynı anda yalnızca bir öğeye erişebilir ve bu, belirttiğiniz kimliğe sahip öğedir. GetElementsByName yöntemi farklıdır. Belirttiğiniz ada sahip bir dizi öğe toplar. 0'dan başlayan bir dizin kullanarak tek tek öğelere erişirsiniz.

	getElementById Sizin için sadece bir element alacak. Bu öğe, getElementById () öğesinin parantezleri içinde belirttiğiniz kimliği taşır.
		getElementsByName İsimleri aynı olan öğelerden oluşan bir koleksiyon alacaktır. Her eleman, tıpkı bir dizi gibi 0'dan başlayan bir sayı ile dizine alınır. Aşağıdaki getElementsByName sözdiziminde dizin numarasını köşeli parantez içine koyarak hangi öğeye erişmek istediğinizi belirtirsiniz.

Sözdizimi	Açıklama
document.getElementsByName ("ad") [dizin]	name = 'name' özniteliğiyle tanımlandığı şekliyle elemanın adı index = getElementsByName dizisindeki hangi elemanın kullanılacağını gösteren bir tamsayı.

Adım 1. Mercury Tours Ana Sayfasına gidin ve kullanıcı adı ve parola olarak "öğretici" yi kullanarak oturum açın. Firefox sizi Uçuş Bulucu ekranına götürmelidir.

Adım 2. Firebug'ı kullanarak sayfanın alt kısmındaki üç radyo düğmesini (Ekonomi sınıfı, İşletme sınıfı ve Birinci sınıf radyo düğmeleri) inceleyin. Hepsinin aynı adı taşıyan "servClass" olduğuna dikkat edin.

Adım 3. Önce "Ekonomi sınıfı" radyo düğmesine erişelim. Tüm bu üç radyo düğmesinden önce bu öğe gelir, dolayısıyla 0 dizinine sahiptir. Selenium IDE'de "document.getElementsByName (" servClass ") [0]" yazın ve Bul düğmesini tıklayın. Selenium IDE, Ekonomi sınıfı radyo düğmesini doğru bir şekilde tanımlayabilmelidir.

Adım 4. Hedefinizin artık document.getElementsByName ("servClass") [1] olması için dizin numarasını 1 olarak değiştirin. Bul düğmesini tıkladığınızda Selenium IDE, aşağıda gösterildiği gibi "İşletme sınıfı" radyo düğmesini vurgulayabilmelidir.

DOM'a göre bulma - dom: name

Daha önce de belirtildiği gibi, bu yöntem yalnızca eriştiğiniz öğe adlandırılmış bir formda yer alıyorsa geçerli olacaktır.

Sözdizimi	Açıklama
document.forms ["formun adı"] .elements ["öğenin adı"]	formun adı = erişmek istediğiniz öğeyi içeren form etiketinin ad özniteliğinin değeri öğenin adı = erişmek istediğiniz öğenin ad özniteliğinin değeri

Adım 1. Mercury Tours ana sayfasına (http://demo.guru99.com/test/newtours/) gidin ve Kullanıcı Adı metin kutusunu incelemek için Firebug'ı kullanın. "Ev" adlı bir formda bulunduğuna dikkat edin.

Adım 2. Selenium IDE'de "document.forms [" home "]. Elements [" userName "]" yazın ve Find düğmesini tıklayın. Selenium IDE, elemana başarılı bir şekilde erişebilmelidir.

DOM'a göre bulma - dom: dizin

Bu yöntem, öğe adlandırılmış bir form içinde olmadığında bile geçerlidir çünkü adını değil, formun dizinini kullanır.

Sözdizimi	Açıklama
document.forms [formun dizini] .elements [öğenin dizini]	formun dizini = tüm sayfaya göre formun dizin numarası (0'dan başlar) öğenin dizini = öğeyi içeren tüm forma göre öğenin dizin numarası (0'dan başlar)

Mercury Tours Kayıt sayfasındaki "Telefon" metin kutusuna erişeceğiz. O sayfadaki formun adı ve kimliği yoktur, bu yüzden bu iyi bir örnek olacaktır.

Adım 1. Mercury Tours Kayıt sayfasına gidin ve Telefon metin kutusunu inceleyin. Onu içeren formda kimlik ve ad öznitelikleri olmadığına dikkat edin.

Adım 2. Selenium IDE'nin Hedef kutusuna "document.forms [0] .elements [3]" yazın ve Bul düğmesini tıklayın. Selenium IDE, Telefon metin kutusuna doğru bir şekilde erişebilmelidir.

Adım 3. Alternatif olarak, öğenin dizini yerine adını kullanabilir ve aynı sonucu elde edebilirsiniz. Selenium IDE'nin Hedef kutusuna "document.forms [0] .elements [" phone "]" yazın. Telefon metin kutusu yine de vurgulanmalıdır.

XPath ile konum belirleme

XPath, XML (Genişletilebilir Biçimlendirme Dili) düğümlerini bulurken kullanılan dildir. HTML, XML'in bir uygulaması olarak düşünülebildiği için, HTML öğelerini bulmak için XPath de kullanabiliriz.

Avantaj: Sınıfı, adı veya kimliği olmayanlar dahil hemen hemen her öğeye erişebilir.

Dezavantaj: Çok fazla farklı kural ve değerlendirme nedeniyle öğeleri tanımlamanın en karmaşık yöntemidir.

Neyse ki, Firebug otomatik olarak XPath Selenium bulucuları oluşturabilir. Aşağıdaki örnekte, daha önce tartıştığımız yöntemlerle erişilmesi mümkün olmayan bir görüntüye erişeceğiz.

Adım 1. Mercury Tours Ana Sayfasına gidin ve sarı "Bağlantılar" kutusunun sağındaki turuncu dikdörtgeni incelemek için Firebug'ı kullanın. Aşağıdaki resme bakın.

2. Adım . Öğenin HTML kodunu sağ tıklayın ve ardından "XPath Kopyala" seçeneğini seçin.

Adım 3. Selenium IDE'de, Hedef kutusuna bir eğik çizgi "/" yazın ve ardından önceki adımda kopyaladığımız XPath'i yapıştırın. Hedef kutunuzdaki giriş şimdi iki eğik çizgi "//" ile başlamalıdır.

4. adım . Bul düğmesine tıklayın. Selenium IDE, aşağıda gösterildiği gibi turuncu kutuyu vurgulayabilmelidir.

Özet

Konumlandırıcı Kullanımı için Sözdizimi

Yöntem	Hedef Sözdizimi	Misal
Kimliğe göre	id = id_of_the_element	id = email
İsimle	name = name_of_the_element	name = userName
Filtreleri Kullanarak Ada Göre	name = name_of_the_element filtresi = value_of_filter	isim = tripType değer = tek yönlü
Bağlantı Metnine Göre	link = link_text	link = KAYIT
Etiket ve kimlik	css = tag # id	css = giriş # e-posta
Etiket ve Sınıf	css = etiket. sınıf	css = input.inputtext
Etiket ve Öznitelik	css = etiket [öznitelik = değer]	css = input [ad = soyad]
Etiket, Sınıf ve Nitelik	css = etiket. sınıf [öznitelik = değer]	css = input.inputtext [tabindex = 1]