how use css selector
W naszym poprzedni tutorial Selenium poznaliśmy różne typy lokalizatorów. Dowiedzieliśmy się również, jak używać: identyfikatora, nazwy klasy, nazwy, tekstu linku i lokalizatorów XPath do identyfikowania elementów internetowych na stronie internetowej.
Kontynuując to, dzisiaj się nauczymy jak używać selektora CSS jako lokalizatora . To jest nasz szósty samouczek w naszym bezpłatną serię Selenium Training .
Używanie selektora CSS jako lokalizatora:
Selektor CSS to połączenie selektora elementu i wartości selektora, która identyfikuje element sieciowy na stronie internetowej. Złożenie selektora elementu i wartości selektora jest znane jako wzorzec selektora.
Wzorzec selektora jest konstruowany przy użyciu znaczników HTML, atrybutów i ich wartości. Centralny motyw procedury tworzenia selektora CSS i Xpath jest bardzo podobny, co stanowi jedyną różnicę w ich protokole konstrukcyjnym.
Podobnie jak Xpath, selektor CSS może również lokalizować elementy internetowe bez identyfikatora, klasy ani nazwy.
model kaskadowy w cyklu życia oprogramowania
A teraz na początek omówmy prymitywne typy selektorów CSS:
Czego się nauczysz:
- Selektor CSS: ID
- Selektor CSS: klasa
- Selektor CSS: atrybut
- Selektor CSS: identyfikator / klasa i atrybut
- Selektor CSS: podciąg
- Selektor CSS: tekst wewnętrzny
- rekomendowane lektury
Selektor CSS: ID
W tym przykładzie uzyskalibyśmy dostęp do pola tekstowego „E-mail” znajdującego się w formularzu logowania na Gmail.com.
Pole tekstowe Email ma atrybut ID, którego wartość jest zdefiniowana jako „Email”. W ten sposób atrybut ID i jego wartość mogą zostać użyte do stworzenia selektora CSS, aby uzyskać dostęp do pola tekstowego wiadomości e-mail.
Tworzenie selektora CSS dla elementu internetowego
Krok 1 : Zlokalizuj / sprawdź element sieciowy (w naszym przypadku pole tekstowe „Email”) i zwróć uwagę, że znacznik HTML to „input”, a wartość atrybutu ID to „Email”. Oba razem odnoszą się do pola „Email Textbox”. Stąd powyższe dane posłużyłyby do stworzenia selektora CSS.
Sprawdź wartość lokalizatora
Krok 1 : Wpisz „css = input # Email” tj. Wartość lokalizatora w polu docelowym w Selenium IDE i kliknij przycisk Find. Zwróć uwagę, że pole Tekst wiadomości e-mail zostanie podświetlone.
Składnia
css =
- Tag HTML - Jest to znacznik używany do oznaczenia elementu sieci, do którego chcemy uzyskać dostęp.
- # - Znak hash jest używany do symbolizacji atrybutu ID. Używanie znaku krzyżyka jest obowiązkowe, jeśli atrybut ID jest używany do tworzenia selektora CSS.
- Wartość atrybutu ID - Jest to wartość atrybutu ID, do którego uzyskiwany jest dostęp.
- Wartość ID jest zawsze poprzedzona znakiem krzyżyka.
Uwaga: Dotyczy również innych typów selektorów CSS
- Podczas określania selektora CSS w docelowym polu tekstowym Selenium IDE, zawsze pamiętaj, aby poprzedzić go „css =”.
- Kolejność powyższych artefaktów jest niezmienna.
- Jeśli co najmniej dwa elementy internetowe mają ten sam znacznik HTML i wartość atrybutu, zostanie zidentyfikowany pierwszy element oznaczony w źródle strony.
Selektor CSS: klasa
W tym przykładzie uzyskalibyśmy dostęp do pola wyboru „Zapamiętaj mnie”, znajdującego się pod formularzem logowania na gmail.com.
Pole wyboru „Zapamiętaj mnie” zawiera atrybut klasy, którego wartość jest zdefiniowana jako „zapamiętaj”. W ten sposób atrybut Class i jego wartość mogą być używane do tworzenia selektora CSS w celu uzyskania dostępu do wyznaczonego elementu WWW.
Lokalizowanie elementu przy użyciu klasy jako selektora CSS jest bardzo podobne do używania identyfikatora, jedyna różnica polega na ich składni.
Tworzenie selektora CSS dla elementu internetowego
Krok 1 : Znajdź / sprawdź element sieciowy (w naszym przypadku pole wyboru „Zapamiętaj mnie”) i zwróć uwagę, że znacznik HTML to „etykieta”, a wartość atrybutu identyfikatora to „zapamiętaj”. w polu wyboru ”.
Sprawdź wartość lokalizatora
Krok 1 : Wpisz „css = label.remember” tj. Wartość lokalizatora w polu docelowym w Selenium IDE i kliknij przycisk Znajdź. Zauważ, że pole wyboru „Zapamiętaj mnie” będzie podświetlone.
Składnia
css =
- . - Kropka symbolizuje atrybut klasy. Konieczne jest użycie znaku kropki, jeśli atrybut klasy jest używany do tworzenia selektora CSS.
- Wartość Class zawsze poprzedzona jest kropką.
Selektor CSS: atrybut
W tym przykładzie uzyskalibyśmy dostęp do przycisku „Zaloguj się” znajdującego się pod formularzem logowania na gmail.com.
Przycisk „Zaloguj się” ma atrybut typu, którego wartość jest zdefiniowana jako „prześlij”. W ten sposób atrybut type i jego wartość mogą być użyte do stworzenia selektora CSS, aby uzyskać dostęp do wyznaczonego elementu web.
Tworzenie selektora CSS dla elementu internetowego
Krok 1 : Zlokalizuj / sprawdź element sieciowy (w naszym przypadku przycisk „Zaloguj się”) i zwróć uwagę, że tag HTML to „input”, atrybut to typ, a wartość atrybutu type to „Submit” i wszystkie razem odwołują się do przycisk „Zaloguj się”.
Sprawdź wartość lokalizatora
Krok 1 : Wpisz „css = input (type =’ submit ’)”, tj. Wartość lokalizatora w polu docelowym w Selenium IDE i kliknij przycisk Find. Zwróć uwagę, że przycisk „Zaloguj się” byłby podświetlony.
Składnia
css =
- Atrybut - Jest to atrybut, którego chcemy użyć do stworzenia selektora CSS. Może wartość, typ, nazwę itp. Zaleca się wybranie atrybutu, którego wartość jednoznacznie identyfikuje element sieciowy.
- Wartość atrybutu - Jest to wartość atrybutu, do którego uzyskiwany jest dostęp.
Selektor CSS: identyfikator / klasa i atrybut
W tym przykładzie uzyskalibyśmy dostęp do pola tekstowego „Hasło” znajdującego się w formularzu logowania na gmail.com.
Pole tekstowe „Hasło” ma atrybut ID, którego wartość jest zdefiniowana jako „Passwd”, atrybut typu, którego wartość jest zdefiniowana jako „hasło”. W ten sposób atrybut ID, atrybut typu i ich wartości mogą być używane do tworzenia selektora CSS w celu uzyskania dostępu do wyznaczonego elementu WWW.
najlepszy klient ssh dla systemu Windows 10
Tworzenie selektora CSS dla elementu internetowego
Krok 1 : Zlokalizuj / sprawdź element sieciowy (w naszym przypadku pole tekstowe „Hasło”) i zwróć uwagę, że znacznik HTML to „wejście”, atrybuty to identyfikator i typ, a odpowiadające im wartości to „Hasło” i „hasło” i wszystkie razem odwołaj się do pola tekstowego „Hasło”.
Sprawdź wartość lokalizatora
Krok 1 : Wpisz „css = input # Passwd (name = 'Passwd”) ”, tj. Wartość lokalizatora w polu docelowym w Selenium IDE i kliknij przycisk Znajdź. Zwróć uwagę, że pole tekstowe „Hasło” zostanie podświetlone.
Składnia
css =
Składnia może również zawierać dwa lub więcej atrybutów.Na przykład, „Css = input # Passwd (type =’ password ’) (name =’ Passwd ’)”.
Selektor CSS: podciąg
CSS w Selenium pozwala dopasować częściowy ciąg i tym samym wyprowadzić bardzo interesującą funkcję tworzenia selektorów CSS przy użyciu podciągów. Istnieją trzy sposoby tworzenia selektorów CSS w oparciu o mechanizm używany do dopasowania podciągu.
Rodzaje mechanizmów
Wszystkie ukryte mechanizmy mają znaczenie symboliczne.
- Dopasuj przedrostek
- Dopasuj sufiks
- Dopasuj podciąg
Omówmy je szczegółowo.
Dopasuj przedrostek
Służy do odpowiadania ciągowi za pomocą pasującego przedrostka.
Składnia
css =
- ^ - Notacja symboliczna do dopasowania ciągu za pomocą przedrostka.
- Prefiks - Jest to ciąg znaków, na podstawie którego wykonywana jest operacja dopasowania. Prawdopodobny ciąg powinien zaczynać się od określonego ciągu.
Na przykład: Rozważmy „pole tekstowe hasła”, więc odpowiedni selektor CSS wyglądałby tak:
css = input # Passwd (name ^ = 'Pass')
Dopasuj sufiks
Służy do odpowiadania łańcuchowi za pomocą dopasowanego sufiksu.
Składnia
css =
- # - Notacja symboliczna służąca do dopasowania ciągu za pomocą sufiksu.
- Przyrostek - Jest to ciąg znaków, na podstawie którego wykonywana jest operacja dopasowania. Prawdopodobny ciąg powinien kończyć się podanym ciągiem.
Na przykład,Rozważmy ponownie „Pole tekstowe hasła”, więc odpowiedni selektor CSS wyglądałby następująco:
css = input # Passwd (name $ = 'wd')
Dopasuj podciąg
Służy do odpowiadania ciągowi za pomocą pasującego podciągu.
Składnia
css =
- * - Notacja symboliczna służąca do dopasowania ciągu za pomocą łańcucha podrzędnego.
- Sub string - Jest to ciąg znaków, na podstawie którego wykonywana jest operacja dopasowania. Prawdopodobny ciąg ma określony wzorzec ciągu.
Na przykład,Rozważmy ponownie „Pole tekstowe hasła”, więc odpowiedni selektor CSS wyglądałby tak:
css = input # Passwd (name $ = 'wd')
Selektor CSS: tekst wewnętrzny
Tekst wewnętrzny pomaga nam zidentyfikować i utworzyć selektor CSS przy użyciu wzorca ciągu, który tag HTML manifestuje na stronie internetowej.
Zastanów się, „Potrzebujesz pomocy?” hiperłącze znajdujące się pod formularzem logowania na gmail.com.
Znacznik kotwicy reprezentujący hiperłącze zawiera tekst zawarty w środku. Zatem ten tekst może zostać użyty do stworzenia selektora CSS, aby uzyskać dostęp do wyznaczonego elementu sieci.
Składnia:
css =
- : - Znak kropki służy do symbolizacji metody zawiera
- Zawiera - jest to wartość atrybutu klasy, do której uzyskiwany jest dostęp.
- Tekst - tekst wyświetlany w dowolnym miejscu na stronie internetowej niezależnie od jego lokalizacji.
Jest to jedna z najczęściej używanych strategii lokalizowania elementu sieci Web ze względu na jej uproszczoną składnię.
Z uwagi na to, że tworzenie CSS Selector i Xpath wymaga dużego wysiłku i praktyki, dlatego proces ten jest wykonywany tylko przez bardziej wyrafinowanych i przeszkolonych użytkowników.
Następny samouczek nr 7 : Kontynuując nasz następny samouczek, skorzystamy z okazji, aby przedstawić Wam rozszerzenie strategii lokalizowania. Dlatego w następnym samouczku będziemy studiować mechanizm lokalizacji elementów internetowych w Google Chrome i Internet Explorer.
jacy są inni dostawcy poczty e-mail
Omawiamy bardziej szczegółowo Selenium Locators, ponieważ jest to ważna część tworzenia Selenium Script.
Daj nam znać swoje pytania / komentarze poniżej.
rekomendowane lektury
- Jak zlokalizować elementy w przeglądarkach Chrome i IE do tworzenia skryptów selenium - Samouczek Selenium nr 7
- Sprawdź widoczność elementów sieci za pomocą różnych typów poleceń WebDriver - samouczek Selenium nr 14
- Wprowadzenie do Selenium WebDriver - samouczek Selenium # 8
- Efektywne skrypty Selenium i scenariusze rozwiązywania problemów - samouczek Selenium nr 27
- Debugowanie skryptów Selenium za pomocą dzienników (samouczek Log4j) - samouczek Selenium # 26
- 30+ najlepszych samouczków dotyczących selenu: naucz się selenu z prawdziwymi przykładami
- Cucumber Selenium Tutorial: Cucumber Java Selenium Integracja WebDriver
- Użycie klasy Selenium Select do obsługi elementów rozwijanych na stronie internetowej - Samouczek Selenium nr 13