Selektor CSS w Selenium

Co to jest selektor CSS?

Selektory CSS w Selenium to wzorce ciągów używane do identyfikacji elementu na podstawie kombinacji tagu HTML, identyfikatora, klasy i atrybutów. Lokalizowanie za pomocą selektorów CSS w Selenium jest bardziej skomplikowana niż poprzednie metody, ale jest to najczęstsza strategia lokalizacji zaawansowanych Selenium użytkowników, ponieważ może uzyskać dostęp nawet do tych elementów, które nie mają identyfikatora ani nazwy.

Selektory CSS w Selenium mają wiele formatów, ale skupimy się tylko na tych najpopularniejszych. Różne typy lokalizatorów CSS w Selenium IDE

• Etykieta i identyfikator
• Etykieta i klasa
• Tag i atrybut
• Tag, klasa i atrybut
• Tekst wewnętrzny

Stosując tę ​​strategię, zawsze poprzedzamy Target pole z „css=”, jak pokazano w poniższych przykładach.

tag i id – Selektor CSS

Ponownie w tym przykładzie użyjemy pola tekstowego Email Facebooka. Jak pamiętasz, ma ono identyfikator „email”, a my już uzyskaliśmy do niego dostęp w sekcji „Lokalizacje według ID”. Tym razem użyjemy Selenium Selektor CSS z identyfikatorem dostępu do tego samego elementu.

Składnia

css=tag#id

• tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
• # = znak skrótu. To powinno być zawsze obecne podczas używania a Selenium Selektor CSS z identyfikatorem
• id = identyfikator elementu, do którego uzyskiwany jest dostęp

Należy pamiętać, że identyfikator jest zawsze poprzedzony znakiem hash (#).

Krok 1) Nawigować do www.facebook.com. Używając Firebuga, sprawdź pole tekstowe „E-mail lub telefon”.

W tym momencie zwróć uwagę, że tag HTML to „input”, a jego ID to „email”. Nasza składnia będzie więc następująca: „css=input#email”.

Krok 2) Wpisz „css=input#email” w Target pudełko z Selenium IDE i kliknij przycisk Znajdź. Selenium IDE powinno być w stanie podświetlić ten element.

tag i klasa – Selektor CSS

Selektor CSS w Selenium użycie znacznika HTML i nazwy klasy jest podobne do użycia znacznika i identyfikatora, ale w tym przypadku zamiast znaku skrótu używana jest kropka (.).

Składnia

css=tag.class

• tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
• . = znak kropki. Powinno to zawsze występować podczas używania selektora CSS z klasą
• class = klasa elementu, do którego uzyskuje się dostęp

Krok 1) Przejdź do strony demonstracyjnej https://demo.guru99.com/test/facebook.html i użyj Firebuga, aby sprawdzić pole tekstowe „E-mail lub telefon”. Zauważ, że jego znacznik HTML to „input”, a jego klasa to „inputtext”.

Krok 2) In Selenium IDE, wpisz „css=input.inputtext” w pliku Target pole i kliknij Znajdź. Selenium IDE powinno być w stanie rozpoznać pole tekstowe E-mail lub Telefon.

Pamiętaj, że jeśli wiele elementów ma ten sam znacznik HTML i tę samą nazwę, rozpoznany zostanie tylko pierwszy element w kodzie źródłowym. Używając Firebuga, sprawdź pole tekstowe Hasło na Facebooku i zauważ, że ma ono taką samą nazwę jak pole tekstowe E-mail lub Telefon.

Powodem, dla którego na poprzedniej ilustracji wyróżniono tylko pole tekstowe E-mail lub Telefon, jest to, że pojawia się ono jako pierwsze w źródle strony na Facebooku.

tag i atrybut – Selektor CSS

Strategia ta wykorzystuje znacznik HTML i określony atrybut elementu, do którego należy uzyskać dostęp.

Składnia

css=tag[attribute=value]

• tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
• [ i ] = nawiasy kwadratowe, w których zostanie umieszczony konkretny atrybut i odpowiadająca mu wartość
• atrybut = atrybut, który ma zostać użyty. Wskazane jest użycie atrybutu unikalnego dla elementu, takiego jak nazwa lub identyfikator.
• wartość = odpowiadająca wartość wybranego atrybutu.

Krok 1) Nawigować do Mercury Strona rejestracji wycieczek https://demo.guru99.com/test/newtours/register.php i sprawdź pole tekstowe „Nazwisko”. Zwróć uwagę na jego znacznik HTML („input” w tym przypadku) i jego imię („lastName”).

Krok 2) In Selenium IDE, wpisz „css=input[imię=nazwisko]” w pliku Target pole i kliknij Znajdź. Selenium IDE powinno mieć możliwość uzyskania dostępu do pola Nazwisko.

Jeśli wiele elementów ma ten sam tag i atrybut HTML, rozpoznany zostanie tylko pierwszy z nich. To zachowanie jest podobne do lokalizowania elementów za pomocą selektorów CSS z tym samym tagiem i klasą.

tag, klasa i atrybut – Selektor CSS

Składnia

css=tag.class[attribute=value]

• tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
• . = znak kropki. Powinno to zawsze występować podczas używania selektora CSS z klasą
• class = klasa elementu, do którego uzyskuje się dostęp
• [ i ] = nawiasy kwadratowe, w których zostanie umieszczony konkretny atrybut i odpowiadająca mu wartość
• atrybut = atrybut, który ma zostać użyty. Wskazane jest użycie atrybutu unikalnego dla elementu, takiego jak nazwa lub identyfikator.
• wartość = odpowiadająca wartość wybranego atrybutu.

Krok 1) Przejdź do strony demonstracyjnej https://demo.guru99.com/test/facebook.html i użyj Firebuga, aby sprawdzić pola wprowadzania „E-mail lub telefon” i „Hasło”. Zwróć uwagę na ich znacznik HTML, klasę i atrybuty. W tym przykładzie wybierzemy ich atrybuty „tabindex”.

Krok 2) Najpierw przejdziemy do pola tekstowego „E-mail lub telefon”. Dlatego użyjemy wartości tabindex 1. Wpisz „css=input.inputtext[tabindex=1]” w Selenium IDE Target pole i kliknij Znajdź. Pole wprowadzania 'E-mail lub Telefon' powinno być podświetlone.

Krok 3) Aby uzyskać dostęp do pola wprowadzania hasła, wystarczy zastąpić wartość atrybutu tabindex. Wpisz „css=input.inputtext[tabindex=2]” w Target i kliknij przycisk Znajdź. Selenium IDE musi pomyślnie zidentyfikować pole tekstowe Hasło.

tekst wewnętrzny – Selektor CSS

Jak zapewne zauważyłeś, etykietom HTML rzadko podaje się atrybuty identyfikatora, nazwy lub klasy. Jak zatem uzyskać do nich dostęp? Odpowiedź leży w wykorzystaniu ich wewnętrznych tekstów. Teksty wewnętrzne to rzeczywiste wzorce ciągów, które etykieta HTML wyświetla na stronie.

Składnia

css=tag:contains("inner text")

• tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
• tekst wewnętrzny = tekst wewnętrzny elementu

Krok 1) Nawigować do Mercury Strona główna wycieczek https://demo.guru99.com/test/newtours/ i użyj Firebuga, aby sprawdzić etykietę „Hasło”. Zwróć uwagę na jego tag HTML (który w tym przypadku jest „fontem”) i zwróć uwagę, że nie ma on atrybutów klasy, identyfikatora ani nazwy.

Krok 2) Typ css=font:contains(“Hasło:”) najnowszych Selenium IDE Target pole i kliknij Znajdź. Selenium IDE powinno mieć dostęp do etykiety Hasło, jak pokazano na obrazku poniżej.

Krok 3) Tym razem zamień tekst wewnętrzny na „Boston”, aby Twój Target teraz stanie się „css=font:contains(“Boston”)”. Kliknij Znajdź. Powinieneś zauważyć, że etykieta „Boston do San Francisco” jest podświetlona. To pokazuje, że Selenium IDE może uzyskać dostęp do długiej etykiety, nawet jeśli właśnie wskazałeś pierwsze słowo jej wewnętrznego tekstu.

Podsumowanie

Składnia lokalizowania za pomocą selektora CSS

Metoda wykonania	Target Składnia	Przykład
Etykieta i identyfikator	css=tag#id	css=wejście#e-mail
Etykieta i klasa	css=tag.klasa	css=wejście.tekst wejściowy
Etykieta i atrybut	css=tag[atrybut=wartość]	css=input[imię=nazwisko]
Tag, klasa i atrybut	css=tag.class[atrybut=wartość]	css=input.inputtext[tabindex=1]