CSS Seçici Selenium

CSS Seçici nedir?

CSS Seçiciler Selenium HTML etiketi, kimlik, sınıf ve niteliklerin birleşimine dayalı olarak bir öğeyi tanımlamak için kullanılan dize kalıplarıdır. CSS Seçicileri ile Konumlandırma Selenium Önceki yöntemlere göre daha karmaşıktır ancak gelişmişlerin en yaygın yer belirleme stratejisidir. Selenium kullanıcılar çünkü kimliği veya adı olmayan öğelere bile erişebilir.

CSS Seçiciler Selenium birçok format var, ancak yalnızca en yaygın olanlara odaklanacağız. Farklı CSS Bulucu türleri Selenium IDE

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

Bu stratejiyi kullanırken her zaman önek koyarız Target Aşağıdaki örneklerde gösterildiği gibi “css=" içeren bir kutu.

etiket ve kimlik – CSS Seçici

Yine bu örnekte Facebook'un E-posta metin kutusunu kullanacağız. Hatırlayacağınız üzere, "e-posta" kimliğine sahip ve biz buna zaten "Kimliğe Göre Konumlandırma" bölümünden eriştik. Bu sefer, bir Selenium Aynı öğeye erişmede kimlikli CSS Seçici.

Sözdizimi

css=tag#id

• tag = erişilen öğenin HTML etiketi
• # = karma işareti. Kullanırken bu her zaman mevcut olmalıdır. Selenium Kimlikli CSS Seçici
• id = erişilen öğenin kimliği

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

) 1 Adım Şu yöne rotayı ayarla www.facebook.comFirebug'ı kullanarak “E-posta veya Telefon” metin kutusunu inceleyin.

Bu noktada, HTML etiketinin “input” ve kimliğinin “email” olduğunu unutmayın. Yani sözdizimimiz “css=input#email” olacaktır.

) 2 Adım “css=input#email” girin Target kutusu Selenium IDE'yi seçin ve Bul düğmesine tıklayın. Selenium IDE bu öğeyi vurgulayabilmelidir.

etiket ve sınıf – CSS Seçici

CSS Seçici Selenium HTML etiketi ve sınıf adı kullanmak, etiket ve kimlik kullanmaya benzer ancak bu durumda karma işareti yerine nokta (.) kullanılır.

Sözdizimi

css=tag.class

• tag = erişilen öğenin HTML etiketi
• . = nokta işareti. Class ile bir CSS Seçici kullanıldığında bu her zaman mevcut olmalıdır.
• class = erişilen öğenin sınıfı

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

) 2 Adım In Selenium IDE'ye “css=input.inputtext” yazın Target kutusuna tıklayın ve Bul'a tıklayın. Selenium IDE, E-posta veya Telefon metin kutusunu tanıyabilmelidir.

Birden fazla öğe aynı HTML etiketine ve adına sahip olduğunda kaynak kodundaki yalnızca ilk öğenin tanınacağını unutmayın.Firebug'ı kullanarak Facebook'taki Şifre metin kutusunu inceleyin ve E-posta veya Telefon metin kutusuyla aynı isme sahip olduğunu fark edin.

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

etiket ve özellik – CSS Seçici

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

Sözdizimi

css=tag[attribute=value]

• tag = erişilen öğenin HTML etiketi
• [ ve ] = belirli bir niteliğin ve ona karşılık gelen değerin yerleştirileceği köşeli parantezler
• özellik = kullanılacak özellik. Ad veya kimlik gibi öğeye özgü benzersiz bir özelliğin kullanılması tavsiye edilir.
• değer = seçilen özelliğin karşılık gelen değeri.

) 1 Adım Şu yöne rotayı ayarla Mercury Turların Kayıt sayfası http://demo.guru99.com/test/newtours/register.php ve "Soyadı" metin kutusunu inceleyin. HTML etiketini (bu durumda "girdi") ve adını ("soyadı") not edin.

) 2 Adım In Selenium IDE'ye “css=input[name=soyadı]” yazın. Target kutusuna tıklayın ve Bul'a tıklayın. Selenium IDE'nin Soyadı kutusuna başarıyla erişebilmesi gerekir.

Birden fazla öğe aynı HTML etiketine ve özelliğine sahip olduğunda yalnızca ilki tanınacaktır. Bu davranış, aynı etiket ve sınıfa sahip CSS seçicileri kullanarak öğelerin yerini bulmaya benzer.

etiket, sınıf ve nitelik – CSS Seçici

Sözdizimi

css=tag.class[attribute=value]

• tag = erişilen öğenin HTML etiketi
• . = nokta işareti. Class ile bir CSS Seçici kullanıldığında bu her zaman mevcut olmalıdır.
• class = erişilen öğenin sınıfı
• [ ve ] = belirli bir niteliğin ve ona karşılık gelen değerin yerleştirileceği köşeli parantezler
• özellik = kullanılacak özellik. Ad veya kimlik gibi öğeye özgü benzersiz bir özelliğin kullanılması tavsiye edilir.
• değer = seçilen özelliğin karşılık gelen değeri.

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

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

) 3 Adım Parola giriş kutusuna erişmek için, tabindex özniteliğinin değerini değiştirmeniz yeterlidir. "css=input.inputtext[tabindex=2]" girin Target kutusuna tıklayın ve Bul butonuna tıklayın. Selenium IDE'nin Parola metin kutusunu başarıyla tanımlayabilmesi gerekir.

iç metin – CSS Seçici

Fark etmiş olabileceğiniz gibi, HTML etiketlerine nadiren id, name veya class nitelikleri verilir. Peki bunlara nasıl erişeceğiz? Cevap onların iç metinlerinin kullanılmasında yatmaktadır. İç metinler, HTML etiketinin sayfada gösterdiği gerçek dize kalıplarıdır.

Sözdizimi

css=tag:contains("inner text")

• tag = erişilen öğenin HTML etiketi
• iç metin = öğenin iç metni

) 1 Adım Şu yöne rotayı ayarla Mercury Turların ana sayfası http://demo.guru99.com/test/newtours/ ve "Şifre" etiketini araştırmak için Firebug'u kullanın. HTML etiketini (bu durumda “font” anlamına gelir) not edin ve sınıf, kimlik veya ad niteliklerinin bulunmadığına dikkat edin.

) 2 Adım Tip css=font:contains(“Şifre:”) içine Selenium IDE'ler Target kutusuna tıklayın ve Bul'a tıklayın. Selenium IDE aşağıdaki görüntüde gösterildiği gibi Şifre etiketine erişebilmelidir.

) 3 Adım Bu sefer iç metni “Boston” ile değiştirin, böylece Target artık “css=font:contains(“Boston”)” olacak. Bul'a tıklayın. “Boston'dan San Francisco'ya” etiketinin vurgulandığını fark etmelisiniz. Bu size şunu gösterir Selenium IDE, iç metninin ilk kelimesini belirtmiş olsanız bile uzun bir etikete erişebilir.

ÖZET

CSS Seçici Kullanımına Göre Konum Bulma için Sözdizimi

Yöntem	Target Sözdizimi	Örnek E-posta
Etiket ve kimlik	css=etiket#id	css=giriş#e-posta
Etiket ve Sınıf	css=tag.class	css=input.inputtext
Etiket ve Özellik	css=etiket[özellik=değer]	css=giriş[isim=soyadı]
Etiket, Sınıf ve Özellik	css=tag.class[öznitelik=değer]	css=input.inputtext[tabindex=1]