Lokalizacja elementów według selektorów CSS z selenem
Wymagania wstępne:
Aby wypróbować polecenia i przykłady tego artykułu, musisz mieć,
1) Dystrybucja Linux (najlepiej Ubuntu) zainstalowana na komputerze.
2) Python 3 zainstalowany na komputerze.
3) PIP 3 zainstalowany na komputerze.
4) Python Virtualenv Pakiet zainstalowany na komputerze.
5) Przeglądarki internetowe Mozilla Firefox lub Google Chrome zainstalowane na komputerze.
6) Muszę wiedzieć, jak zainstalować sterownik Gecko Firefox lub Chrome Web Sterownik.
Aby spełnić wymagania 4, 5 i 6, przeczytaj mój artykuł Wprowadzenie do selenu z Python 3 w Linuxhint.com.
Można znaleźć wiele artykułów na inne tematy na Linuxhint.com. Pamiętaj, aby je sprawdzić, jeśli potrzebujesz pomocy.
Konfiguracja katalogu projektu:
Aby wszystko się zorganizowano, stwórz nowy katalog projektowy Selenium-CSS-selector/ następująco:
$ mkdir -pv selenum-css-selector/sterownikiPrzejść do Selenium-CSS-selector/ Katalog projektu w następujący sposób:
$ CD Selenium-CSS-Selector/Utwórz wirtualne środowisko Python w katalogu projektu w następujący sposób:
$ Virtualenv .VenvAktywuj środowisko wirtualne w następujący sposób:
$ źródło .venv/bin/aktywujZainstaluj bibliotekę Selenium Python za pomocą PIP3 w następujący sposób:
$ PIP3 instaluj selenPobierz i zainstaluj cały wymagany sterownik internetowy w kierowcy/ Katalog projektu. Wyjaśniłem proces pobierania i instalowania sterowników internetowych w moim artykule Wprowadzenie do selenu z Python 3. Jeśli potrzebujesz pomocy, wyszukaj Linuxhint.com do tego artykułu.
Pobierz selektor CSS za pomocą narzędzia Chrome Developer:
W tej sekcji pokażę Ci, jak znaleźć selektor CSS elementu strony internetowej, który chcesz wybrać z Selenium za pomocą wbudowanego narzędzia programistów w przeglądarce internetowej Google Chrome.
Aby uzyskać selektor CSS za pomocą przeglądarki internetowej Google Chrome, otwórz Google Chrome i odwiedź stronę internetową, z której chcesz wyodrębnić dane. Następnie naciśnij prawy przycisk myszy (RMB) na pustym obszarze strony i kliknij Sprawdzać otworzyć Narzędzie do programisty Chrome.
Możesz także nacisnąć + Zmiana + I otworzyć Narzędzie do programisty Chrome.
Narzędzie do programisty Chrome należy otworzyć.
Aby znaleźć reprezentację HTML żądanego elementu strony internetowej, kliknij Sprawdzać() ikona oznaczona na zrzucie ekranu poniżej.
Następnie unosisz się nad żądanym elementem strony internetowej i naciśnij lewy przycisk myszy (LMB), aby go wybrać.
Reprezentacja HTML wybranego elementu Web zostanie wyróżniona w Elementy zakładka Narzędzie do programisty Chrome Jak widać na zrzucie ekranu poniżej.
Aby uzyskać selektor CSS żądanego elementu, wybierz element z Elementy zakładka Narzędzie do programisty Chrome i kliknij prawym przyciskiem myszy (RMB). Następnie wybierz Kopiuj > Wybór kopii jak zaznaczono na zrzucie ekranu poniżej.
Wkleiłem selektor CSS w edytorze tekstu. Selektor CSS wygląda jak pokazano na zrzucie ekranu poniżej.
Pobierz selektor CSS za pomocą narzędzia programistów Firefox:
W tej sekcji pokażę Ci, jak znaleźć selektor CSS elementu strony internetowej, który chcesz wybrać z Selenium za pomocą wbudowanego narzędzia programistów w przeglądarce internetowej Mozilla Firefox.
Aby uzyskać selektor CSS za pomocą przeglądarki internetowej Firefox, otwórz Firefox i odwiedź stronę internetową, z której chcesz wyodrębnić dane. Następnie naciśnij prawy przycisk myszy (RMB) na pustym obszarze strony i kliknij Sprawdź element (Q) otworzyć Narzędzie programistów Firefox.
Narzędzie programistów Firefox należy otworzyć.
Aby znaleźć reprezentację HTML żądanego elementu strony internetowej, kliknij Sprawdzać() ikona oznaczona na zrzucie ekranu poniżej.
Następnie unosisz się nad żądanym elementem strony internetowej i naciśnij lewy przycisk myszy (LMB), aby go wybrać.
Reprezentacja HTML wybranego elementu Web zostanie wyróżniona w Inspektor zakładka Narzędzie programistów Firefox Jak widać na zrzucie ekranu poniżej.
Aby uzyskać selektor CSS żądanego elementu, wybierz element z Inspektor zakładka Narzędzie programistów Firefox i kliknij prawym przyciskiem myszy (RMB). Następnie wybierz Kopiuj > Selektor CSS jak zaznaczono na zrzucie ekranu poniżej.
Selektor CSS pożądanego elementu powinien wyglądać tak mniej więcej tak.
Wyodrębnienie danych za pomocą selektora CSS z selenem:
W tej sekcji pokażę, jak wybrać elementy strony internetowej i wyodrębnić z nich dane za pomocą selektorów CSS z biblioteką Selenium Python.
Najpierw stwórz nowy skrypt Python Ex00.py i wpisz następujące wiersze kodów.
od selenu importu Webdriverz selenu.Webdriver.wspólny.Klucze importują klucze
z selenu.Webdriver.wspólny.przez import przez
opcje = WebDriver.Chromeoptions ()
opcje.bezgłowy = prawda
Browser = WebDriver.Chrome (Exceutable_path = "./sterowniki/chromedriver ", opcje = opcje)
przeglądarka.Get ("https: // www.UNIXTIMESTAMP.com/”)
Timestamp = przeglądarka.find_element_by_css_selector ('H3.Niebezpieczeństwo tekstowe: nt-child (3) ')
Drukuj („Obecny znacznik czasu: % s” (znacznik czasu.tekst.split (") [0]))
przeglądarka.zamknąć()
Po zakończeniu zapisz Ex00.py Skrypt Pythona.
Linia 1-3 importuje wszystkie wymagane elementy selenu.
Linia 5 tworzy obiekt opcji Chrome, a linia 6 umożliwia tryb bezgłowy dla przeglądarki internetowej Chrome.
Linia 8 tworzy chrom przeglądarka obiekt za pomocą chromedriver binarny z kierowcy/ Katalog projektu.
Linia 10 informuje przeglądarkę, aby załadował witrynę UNIXTIMESTAMP.com.
Wiersz 12 znajduje element, który ma dane znaczników czasu ze strony za pomocą selektora CSS i przechowuje go w znak czasu zmienny.
Wiersz 13 analizuje dane ze znaczników czasu z elementu i drukuje je na konsoli.
W ten sposób struktura HTML danych znaczników czasu UNIX w UNIXTIMESTAMP.Wygląda na com.
Linia 14 zamyka przeglądarkę.
Uruchom skrypt Python Ex00.py następująco:
$ Python3 Ex00.pyJak widać, na ekranie wydrukowane są dane dotyczące znacznika czasu.
Tutaj użyłem przeglądarka.Find_element (przez, selektor) metoda.
Ponieważ używamy selektorów CSS, pierwszy parametr będzie Przez.CSS_Selector a drugim parametrem będzie sam selektor CSS.
Zamiast przeglądarka.find_element () metoda, możesz również użyć przeglądarka.find_element_by_css_selector (selektor) metoda. Ta metoda potrzebuje tylko selektora CSS do pracy. Wynik będzie taki sam.
przeglądarka.find_element () I przeglądarka.find_element_by_css_selector () Metody są używane do znalezienia i wyboru pojedynczego elementu ze strony internetowej. Jeśli chcesz znaleźć i wybrać wiele elementów za pomocą selektorów CSS, musisz użyć przeglądarka.Find_elements () I przeglądarka.find_elements_by_css_selector () metody.
przeglądarka.Find_elements () Metoda przyjmuje takie same argumenty jak przeglądarka.find_element () metoda.
przeglądarka.find_elements_by_css_selector () Metoda przyjmuje ten sam argument co przeglądarka.find_element_by_css_selector () metoda.
Zobaczmy przykład wyodrębnienia listy nazw przy użyciu selektorów CSS z losowo-nazwy generatora.Informacje z selenem.
Jak widać, lista nieopisana ma nazwę klasy Lista imion. Możemy więc użyć selektora CSS .Namelista Li Aby wybrać wszystkie nazwy ze strony internetowej.
Przejrzyjmy przykład wyboru wielu elementów ze strony internetowej za pomocą selektorów CSS.
Utwórz nowy skrypt Python Ex01.py i wpisz w poniższych wierszach kodów.
od selenu importu Webdriverz selenu.Webdriver.wspólny.Klucze importują klucze
z selenu.Webdriver.wspólny.przez import przez
opcje = WebDriver.Chromeoptions ()
opcje.bezgłowy = prawda
Browser = WebDriver.Chrome (Exceutable_path = "./sterowniki/chromedriver ", opcje = opcje)
przeglądarka.GET ("http: // losowo-nazwa generator.Informacje/")
Nazwy = przeglądarka.Find_elements (przez.Css_selector, '.Namelista Li ')
dla nazwy w imieniu:
Nazwa wydruku.tekst)
przeglądarka.zamknąć()
Po zakończeniu zapisz Ex01.py Skrypt Pythona.
Linia 1-8 jest taka sama jak w Ex00.py Skrypt Pythona. Więc nie zamierzam ich znowu wyjaśnić.
Linia 10 informuje przeglądarkę, aby załadował witrynę losowo-nazwa-generator.informacje.
Wiersz 12 wybiera listę nazw za pomocą przeglądarka.Find_elements () metoda. Ta metoda wykorzystuje selektor CSS .Namelista Li Aby znaleźć listę nazwisk. Następnie lista nazw jest przechowywana w nazwy zmienny.
W wierszach 13 i 14, a Do pętla służy do iteracji przez nazwy Wymień i wydrukuj nazwy na konsoli.
Linia 16 zamyka przeglądarkę.
Uruchom skrypt Python Ex01.py następująco:
$ Python3 Ex01.pyJak widać, nazwy są wyodrębnione ze strony internetowej i wydrukowane na konsoli.
Zamiast używać przeglądarka.Find_elements () metoda, możesz również użyć przeglądarka.find_elements_by_css_selector () metoda jak poprzednio. Ta metoda potrzebuje tylko selektora CSS do pracy. Wynik będzie taki sam.
Podstawy selektorów CSS:
Zawsze można znaleźć selektor CSS elementu strony internetowej za pomocą narzędzia programistów Firefox lub Chrome Web Browser. Ten automatycznie generowany selektor CSS może nie być tym, czego chcesz. Czasami być może będziesz musiał napisać selektor CSS.
W tej sekcji zamierzam porozmawiać o podstawach selektorów CSS, abyś mógł zrozumieć, co określony selektor CSS wybiera ze strony internetowej i w razie potrzeby napisać niestandardowy selektor CSS.
Jeśli chcesz wybrać element ze strony internetowej za pomocą identyfikatora wiadomość, Selektor CSS będzie #wiadomość.
Selektor CSS .zielony Wybierze element za pomocą nazwy klasy zielony.
Jeśli chcesz wybrać element (klasa MSG) wewnątrz innego elementu (klasa pojemnik), selektor CSS będzie .pojemnik .MSG
Selektor CSS .MSG.powodzenie Wybierze element, który ma dwie klasy CSS MSG I powodzenie.
Aby wybrać wszystkie P tagi, możesz użyć selektora CSS P.
Aby wybrać tylko P tagi wewnątrz div tagi, możesz użyć selektora CSS Div p
Aby wybrać P tagi, które są bezpośrednim rodzeństwem div tagi, możesz użyć selektora CSS Div> p
Aby wybrać wszystkie Zakres I P tagi, możesz użyć selektora CSS P, Span
Aby wybrać P tag bezpośrednio po div tag, możesz użyć selektora CSS Div + p
Aby wybrać P tag po div tag, możesz użyć selektora CSS Div ~ p
Aby wybrać wszystkie P tagi, które mają nazwę klasy MSG, Możesz użyć selektora CSS P.MSG
Aby wybrać wszystkie Zakres tagi, które mają nazwę klasy MSG, Możesz użyć selektora CSS Zakres.MSG
Aby wybrać wszystkie elementy, które mają atrybut Href, Możesz użyć selektora CSS [href]
Aby wybrać element, który ma atrybut nazwa i wartość nazwa atrybut jest nazwa użytkownika, Możesz użyć selektora CSS [name = ”nazwa użytkownika”]
Aby wybrać wszystkie elementy, które mają atrybut Alt i wartość Alt atrybut zawierający podłoże vscode, Możesz użyć selektora CSS [alt ~ = ”vscode”]
Aby wybrać wszystkie elementy, które mają Href atrybut i wartość Href Atrybut zaczyna się od ciągu https, Możesz użyć selektora CSS [href^= ”https”]
Aby wybrać wszystkie elementy, które mają Href atrybut i wartość Href atrybut kończy się łańcuchem .com, Możesz użyć selektora CSS [href $ = ”.com ”]
Aby wybrać wszystkie elementy, które mają Href atrybut i wartość Href Atrybut ma podłoże Google, Możesz użyć selektora CSS [href*= ”Google”]
Jeśli chcesz wybrać pierwszy Li tag wewnątrz ul tag, możesz użyć selektora CSS Ul Li: pierwszy dziecko
Jeśli chcesz wybrać pierwszy Li tag wewnątrz ul tag, możesz również użyć selektora CSS Ul Li: Nth-Child (1)
Jeśli chcesz wybrać ostatni Li tag wewnątrz ul tag, możesz użyć selektora CSS Ul Li: Last-Child
Jeśli chcesz wybrać ostatni Li tag wewnątrz ul tag, możesz również użyć selektora CSS Ul li: nth-last-dziecko (1)
Jeśli chcesz wybrać drugi Li tag wewnątrz ul tag zaczynając od początku, możesz użyć selektora CSS Ul Li: Nth-Child (2)
Jeśli chcesz wybrać trzeci Li tag wewnątrz ul tag zaczynając od początku, możesz użyć selektora CSS Ul Li: Nth-Child (3)
Jeśli chcesz wybrać drugi Li tag wewnątrz ul tag zaczynając od końca, możesz użyć selektora CSS Ul li: nth-last-dziecko (2)
Jeśli chcesz wybrać trzeci Li tag wewnątrz ul tag zaczynając od końca, możesz użyć selektora CSS Ul li: nth-last-dziecko (3)
Są to najczęstsze selektory CSS. Korzystasz z nich prawie na każdym projektach selenium. Istnieje wiele innych selektorów CSS. Można znaleźć listę wszystkich w W3Schools.COM CSS Selectors Reference.
Cnclusion:
W tym artykule pokazałem, jak zlokalizować i wybrać elementy strony internetowej za pomocą selektorów CSS z Selenium. Omówiłem również podstawy selektorów CSS. Powinieneś być w stanie wygodnie korzystać z selektorów CSS do projektów selenium.