Menü

Selenium Scriptler için Web Öğelerini Tanımlamak için CSS Seçici Nasıl Kullanılır - Selenium Tutorial # 6

  • Ana
  • Otomasyon Testi
  • Selenium Scriptler için Web Öğelerini Tanımlamak için CSS Seçici Nasıl Kullanılır - Selenium Tutorial # 6

how use css selector

Sorunları Ortadan Kaldırmak Için Enstrümanımızı Deneyin

Bizim önceki Selenyum öğreticisi , farklı yer belirleyicileri öğrendik. Ayrıca bir web sayfasındaki web öğelerini tanımlamak için Kimlik, SınıfAdı, Ad, Bağlantı Metni ve XPath bulucuların nasıl kullanılacağını da öğrendik.

Bunun devamında bugün öğreneceğiz Bulucu olarak CSS Seçici nasıl kullanılır . Bu bizim 6. öğreticimizdir. ücretsiz Selenium Eğitim serisi .

Bulucu olarak CSS Seçiciyi Kullanma:

CSS Seçici, bir web sayfasındaki web öğesini tanımlayan bir öğe seçici ve bir seçici değerin birleşimidir. Bir öğe seçici ve seçici değerin bileşimi, Seçici Modeli olarak bilinir.

CSS Seçici Selenium Bulucu

Seçici Desen, HTML etiketleri, nitelikleri ve değerleri kullanılarak oluşturulur. CSS Seçici ve Xpath oluşturma prosedürünün arkasındaki ana tema, inşaat protokollerindeki tek farkın altında yatan çok benzerdir.

Xpath gibi, CSS seçici de kimliği, sınıfı veya Adı olmayan web öğelerini bulabilir.

Java'da bir dizi nesne bildirmek

Öyleyse şimdi ilerleyelim, CSS Seçicilerinin ilkel türlerini tartışalım:

Bulucu olarak CSS Seçiciyi Kullanma

Ne öğreneceksin:

CSS Seçici: Kimlik

Bu örnekte, Gmail.com'daki giriş formunda bulunan 'E-posta' metin kutusuna erişeceğiz.

E-posta metin kutusu, değeri 'E-posta' olarak tanımlanan bir Kimlik özelliğine sahiptir. Bu nedenle, ID özelliği ve değeri, e-posta metin kutusuna erişmek için CSS Seçici oluşturmak için kullanılabilir.

Web öğesi için CSS Seçici oluşturma

Aşama 1 : Web öğesini bulun / inceleyin (bizim durumumuzda 'E-posta' metin kutusu) ve HTML etiketinin 'girdi' ve kimlik özniteliğinin değerinin 'E-posta' olduğunu ve her ikisinin de toplu olarak 'E-posta Metin Kutusu' na atıfta bulunduğuna dikkat edin. Dolayısıyla, yukarıdaki veriler CSS Seçiciyi oluşturmak için kullanılacaktır.

CSS Seçiciyi Konumlandırıcı Olarak Kullanma 2

Konum belirleyici değerini doğrulayın

Aşama 1 : 'Css = input # Email' yazın, yani Selenium IDE'deki hedef kutusuna konum belirleyici değeri yazın ve Bul düğmesine tıklayın. E-posta Metin kutusunun vurgulanacağına dikkat edin.

CSS Seçiciyi Konum Belirleyici Olarak Kullanma 3

Sözdizimi

css =

  • HTML etiketi - Erişmek istediğimiz web elemanını belirtmek için kullanılan etikettir.
  • # - Hash işareti, ID özniteliğini sembolize etmek için kullanılır. CSS Seçici oluşturmak için ID özniteliği kullanılıyorsa karma işaretinin kullanılması zorunludur.
  • Kimlik özelliği değeri - Erişilmekte olan bir kimlik özniteliğinin değeridir.
  • ID değerinin önünde her zaman bir hash işareti bulunur.

Not: Diğer CSS Seçici türleri için de geçerlidir

  • Selenium IDE'nin hedef metin kutusunda CSS Seçiciyi belirtirken, her zaman önüne “css =” koymayı unutmayın.
  • Yukarıdaki yapay nesnelerin sırası değiştirilemez.
  • İki veya daha fazla web öğesi aynı HTML etiketine ve öznitelik değerine sahipse, sayfa kaynağında işaretlenen ilk öğe tanımlanacaktır.

CSS Seçici: Sınıf

Bu örnekte, gmail.com adresindeki giriş formunun altında bulunan 'Oturum açık kalsın' onay kutusuna erişeceğiz.

'Oturum açık kalsın' onay kutusu, değeri 'hatırla' olarak tanımlanan bir Sınıf özniteliğine sahiptir. Bu nedenle, Sınıf özelliği ve değeri, belirlenen web öğesine erişmek için bir CSS Seçici oluşturmak için kullanılabilir.

Sınıfı CSS Seçici olarak kullanarak bir öğeyi bulmak, kimlik kullanmaya çok benzer; tek fark, sözdizimi oluşumunda yatmaktadır.

Web öğesi için CSS Seçici oluşturma

Aşama 1 : Web öğesini bulun / inceleyin (bizim durumumuzda 'Oturum açık kalsın' onay kutusu) ve HTML etiketinin 'etiket' ve kimlik özniteliğinin değerinin 'hatırla' olduğunu ve her ikisinin toplu olarak 'İmzalı kal onay kutusunda ”.

Konum belirleyici değerini doğrulayın

Aşama 1 : 'Css = label.remember' yazın, yani Selenium IDE'deki hedef kutusuna konum belirleyici değerini yazın ve Bul Düğmesine tıklayın. 'Oturum açık kalsın' onay kutusunun vurgulandığına dikkat edin.

CSS Seçiciyi Konumlandırıcı Olarak Kullanma 4

Sözdizimi

css =

  • . - Nokta işareti, Sınıf özelliğini sembolize etmek için kullanılır. CSS Seçici oluşturmak için Sınıf özniteliği kullanılıyorsa nokta işaretinin kullanılması zorunludur.
  • Sınıf değerinin önünde her zaman bir nokta işareti bulunur.

CSS Seçici: Nitelik

Bu örnekte, gmail.com adresindeki giriş formunun altında bulunan 'Oturum aç' düğmesine erişeceğiz.

'Oturum aç' düğmesi, değeri 'gönder' olarak tanımlanan bir tür özelliğine sahiptir. Bu nedenle, tür niteliği ve değeri, belirlenen web öğesine erişmek için bir CSS Seçici oluşturmak için kullanılabilir.

Web öğesi için CSS Seçici oluşturma

Aşama 1 : Web öğesini bulun / inceleyin (bizim durumumuzda 'Oturum aç' düğmesi) ve HTML etiketinin 'input', özniteliğin type ve type özniteliğinin değerinin 'submit' olduğunu ve hepsinin birlikte 'Oturum aç' düğmesi.

Konum belirleyici değerini doğrulayın

Aşama 1 : “Css = input (type =’ submit ’)” yazın, yani Selenium IDE'deki hedef kutuya yer belirleyici değeri yazın ve Bul Düğmesine tıklayın. 'Oturum aç' düğmesinin vurgulandığına dikkat edin.

CSS Seçiciyi Konumlandırıcı Olarak Kullanma 5

Sözdizimi

css =

  • Öznitelik - CSS Seçici oluşturmak için kullanmak istediğimiz niteliktir. Değer verebilir, tür, ad vb. Olabilir. Değeri web öğesini benzersiz şekilde tanımlayan bir öznitelik seçmeniz önerilir.
  • Özniteliğin değeri - Erişilmekte olan bir özelliğin değeridir.

CSS Seçici: Kimlik / Sınıf ve nitelik

Bu örnekte, gmail.com adresindeki giriş formunda bulunan 'Şifre' metin kutusuna erişeceğiz.

'Parola' metin kutusu, değeri 'Parola' olarak tanımlanan bir kimlik özniteliğine sahiptir, değeri 'parola' olarak tanımlanan özniteliği yazın. Böylelikle ID özniteliği, tür özniteliği ve değerleri, belirlenen web öğesine erişmek için CSS Seçici oluşturmak için kullanılabilir.

android için en iyi müzik indirici uygulaması

Web öğesi için CSS Seçici oluşturma

Aşama 1 : Web öğesini bulun / inceleyin (bizim durumumuzda 'Parola' metin kutusu) ve HTML etiketinin 'girdi', özniteliklerin kimlik ve tür olduğunu ve karşılık gelen değerlerinin 'Passwd' ve 'password' olduğunu ve hepsinin birlikte 'Şifre' metin kutusuna bir referans yapın.

Konum belirleyici değerini doğrulayın

Aşama 1 : “Css = input # Passwd (name = 'Passwd’) ”yazın, yani Selenium IDE'deki hedef kutusundaki konum belirleyici değeri ve Bul Düğmesine tıklayın. 'Parola' metin kutusunun vurgulanacağına dikkat edin.

CSS Seçiciyi Konumlandırıcı Olarak Kullanma 5

Sözdizimi

css =

Sözdiziminde iki veya daha fazla nitelik de sunulabilir.Örneğin, “Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.

CSS Seçici: Alt dize

Selenium'daki CSS, kısmi bir dizeyi eşleştirmeye ve böylece alt dizeleri kullanarak CSS Seçicileri oluşturmak için çok ilginç bir özellik türetmeye izin verir. Alt dizeyi eşleştirmek için kullanılan mekanizmaya göre CSS Seçicilerinin oluşturulmasının üç yolu vardır.

Mekanizma türleri

Alttaki tüm mekanizmalar sembolik öneme sahiptir.

  • Bir önekle eşleştirin
  • Bir son ekle eşleştirin
  • Bir alt dizeyle eşleş

Bunları detaylı olarak tartışalım.

Bir önekle eşleştirin

Eşleşen bir önek yardımıyla dizeye karşılık gelmek için kullanılır.

Sözdizimi

css =

  • ^ - Önek kullanarak bir dizeyle eşleşecek sembolik gösterim.
  • Önek - Eşleştirme işleminin gerçekleştirildiği dizgedir. Muhtemel dizenin belirtilen dizeyle başlaması bekleniyor.

Örneğin: 'Şifre metin kutusu' nu ele alalım, böylece karşılık gelen CSS Seçici şöyle olacaktır:

css = input # Passwd (isim ^ = 'Geçiş')

Bir son ekle eşleştirin

Eşleşen bir sonek yardımıyla dizgeye karşılık gelmek için kullanılır.

Sözdizimi

css =

  • # - Sonek kullanılarak bir dizeyle eşleşecek sembolik gösterim.
  • Son ek - Eşleştirme işleminin gerçekleştirildiği dizgedir. Muhtemel dizenin belirtilen dizeyle bitmesi beklenir.

Örneğin,Tekrar 'Şifre metin kutusu' nu ele alalım, böylece karşılık gelen CSS Seçici şöyle olacaktır:

css = input # Passwd (isim $ = ’wd’)

Bir alt dizeyle eşleş

Eşleşen bir alt dize yardımıyla dizgeye karşılık gelmek için kullanılır.

Sözdizimi

css =

  • * - Alt dizeyi kullanarak bir dizeyle eşleştirmek için sembolik gösterim.
  • Alt dize - Eşleştirme işleminin gerçekleştirildiği dizgedir. Muhtemel dizenin belirtilen dizge modeline sahip olması beklenir.

Örneğin,'Şifre metin kutusu' nu tekrar ele alalım, böylece karşılık gelen CSS Seçici şöyle olur:

css = input # Passwd (isim $ = ’wd’)

CSS Seçici: İç metin

İç metin, HTML Etiketinin web sayfasında gösterdiği bir dize modelini kullanarak CSS Seçiciyi tanımlamamıza ve oluşturmamıza yardımcı olur.

'Yardıma mı ihtiyacınız var?' Diye düşünün. gmail.com adresindeki giriş formunun altında bulunan köprü.

Köprüyü temsil eden bağlantı etiketinin içinde bir metin vardır. Bu nedenle bu metin, belirlenen web öğesine erişmek için bir CSS Seçici oluşturmak için kullanılabilir.

Sözdizimi:

css =

  • : - Nokta işareti içerir yöntemini sembolize etmek için kullanılır
  • İçerir - Erişilmekte olan bir Sınıf özniteliğinin değeridir.
  • Metin - Konumundan bağımsız olarak web sayfasının herhangi bir yerinde görüntülenen metin.

Bu, basitleştirilmiş sözdizimi nedeniyle web öğesini bulmak için en sık kullanılan stratejilerden biridir.

CSS Seçici ve Xpath'in oluşturulması çok fazla çaba ve pratik gerektirdiğinden, süreç yalnızca daha sofistike ve eğitimli kullanıcılar tarafından gerçekleştirilir.

Sonraki Eğitim # 7 : Bir sonraki öğreticimizle devam ederken, size konum belirleme stratejilerinin bir uzantısı ile tanışma fırsatını değerlendireceğiz. Böylece, bir sonraki derste, Google Chrome ve Internet Explorer'da web öğelerini bulma mekanizması.

tutulmada testng xml dosyası nasıl oluşturulur

Selenium Script oluşturmanın önemli bir parçası olduğu için Selenium Konumlandırıcıları daha ayrıntılı olarak ele alıyoruz.

Aşağıdaki sorularınızı / yorumlarınızı bize bildirin.

Önerilen Kaynaklar

^