Wprowadzenie do XPath i CSS-selektorów

1. Czym są XPath i CSS-selektory?

Dziś zrobimy ogromny krok w stronę mistrzostwa w automatyzacji stron internetowych za pomocą Selenium i zapoznamy się z XPath i CSS-selektorami. Te małe, ale potężne narzędzia będą waszymi wiernymi towarzyszami w wyszukiwaniu elementów na stronach internetowych. Zagłębmy się razem w świat selektorów i nauczmy się z nich korzystać, aby wyszukiwanie było bardziej precyzyjne i wydajne.

Gdyby dokument HTML był gęstym lasem, XPath i CSS-selektory byłyby waszymi mapami-ściągawkami. Pozwalają znaleźć odpowiednie drzewo (lub element, jeśli tak wolicie myśleć o programowaniu). Te narzędzia pomagają znaleźć elementy na stronach internetowych, nawet jeśli są one ukryte za tonami kodu i milionami tagów.

XPath

XPath (XML Path Language) to język przeznaczony do nawigacji w dokumentach XML. Ale ktoś powiedział, że HTML to hybryda XML, prawda? Dlatego XPath jest tak wygodny w pracy z dokumentami HTML. Może dosłownie dotrzeć do elementu dowolną ścieżką, którą wskażecie.

CSS-selektory

CSS-selektory pochodzą ze świata kaskadowych arkuszy stylów. Nie martwcie się, nauka ich nie wymaga od was stania się designerami! Służą one do wybierania elementów według ich typu, klasy, identyfikatora, a nawet stanu. Korzystanie z nich jest prostsze, niż się wydaje — prawdopodobnie już korzystaliście z nich intuicyjnie przy stylizowaniu stron internetowych.

2. Wykorzystanie XPath i CSS-selektorów w kodzie

Teraz, kiedy już wiecie, czym są selektory, przejdźmy od razu do praktyki. Zobaczymy, jak stosować je razem z Selenium i tworzyć cuda!

Użycie XPath

Oto przykład, jak można użyć XPath do wyszukiwania elementu w Selenium:

from selenium import webdriver

# Konfiguracja drivera
driver = webdriver.Chrome()

# Otwieranie strony
driver.get('https://example.com')

# Wyszukiwanie elementu przez XPath
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# Wyświetlenie tekstu elementu
print(element.text)

# Zamknięcie przeglądarki
driver.quit()

Wyjaśnienia:

• //div[@id="menu"]/ul/li/a — to nasz XPath. Mówi: "Hej driver, znajdź mi element a, który znajduje się w środku li, który jest w ul, który z kolei jest w div z id="menu"."

Użycie CSS-selektorów

Teraz zobaczmy, jak można używać CSS-selektorów:

from selenium import webdriver

# Konfiguracja drivera
driver = webdriver.Chrome()

# Otwieranie strony
driver.get('https://example.com')

# Wyszukiwanie elementu przez CSS-selektor
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# Wyświetlenie tekstu elementu
print(element.text)

# Zamknięcie przeglądarki
driver.quit()

Wyjaśnienia:

• div#menu > ul > li > a — to nasz CSS-selektor. Szukał elementu podobnie jak XPath, ale z bardziej zwięzłą składnią.

3. Różnice między XPath i CSS-selektorami

Pytacie, jaka jest różnica między XPath i CSS-selektorami? Dobre pytanie! Przyjrzyjmy się, kiedy i co najlepiej zastosować.

Elastyczność vs. Prostota

XPath jest bardziej elastyczny: pozwala poruszać się "w górę" po drzewie DOM i używać zaawansowanych warunków logicznych. To sprawia, że jest przydatny do bardziej skomplikowanych zapytań. Jednak, czasem prostota CSS-selektorów i ich zwięzłość sprawiają, że są bardziej preferowane. CSS-selektory są łatwiejsze do odczytania i napisania, szczególnie gdy trzeba znaleźć element według klasy lub identyfikatora.

Obsługa funkcji

XPath obsługuje użycie funkcji — od sprawdzania tekstu po pracę z atrybutami, np. contains() czy starts-with(). CSS-selektory z kolei nie mają tak rozbudowanej obsługi.

Szybkość działania

W niektórych przypadkach CSS-selektory działają szybciej. Wynika to z faktu, że przeglądarki są pierwotnie zoptymalizowane do pracy z CSS-selektorami, co sprawia, że są wyborem domyślnym do prostych zadań.

Składnia

XPath ma bardziej skomplikowaną składnię, co może być zarówno jego zaletą, jak i wadą. CSS-selektory są prostsze w pisaniu i nauce.

4. Zastosowanie w praktyce

Zastosujmy tę wiedzę do rzeczywistego zadania. Powiedzmy, że mamy stronę internetową z tabelą produktów i musimy zebrać wszystkie nazwy produktów i ich ceny. Oto jak to można zrobić:

Przykład z użyciem XPath

from selenium import webdriver

# Konfiguracja drivera
driver = webdriver.Chrome()

# Otwieranie strony
driver.get('https://example.com/products')

# Wyszukiwanie wszystkich elementów produktów
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# Wyciąganie danych o każdym produkcie
for product in products:
    name = product.find_element_by_xpath('.//td[@class="product-name"]').text
    price = product.find_element_by_xpath('.//td[@class="product-price"]').text
    print(f"Product: {name}, Price: {price}")

# Zamknięcie przeglądarki
driver.quit()

Przykład z użyciem CSS-selektorów

from selenium import webdriver

# Konfiguracja drivera
driver = webdriver.Chrome()

# Otwieranie strony
driver.get('https://example.com/products')

# Wyszukiwanie wszystkich elementów produktów
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# Wyciąganie danych o każdym produkcie
for product in products:
    name = product.find_element_by_css_selector('td.product-name').text
    price = product.find_element_by_css_selector('td.product-price').text
    print(f"Product: {name}, Price: {price}")

# Zamknięcie przeglądarki
driver.quit()

5. Cechy szczególne i typowe błędy

Kiedy używacie XPath i CSS-selektorów, istnieje kilka pułapek, których warto unikać. Na przykład, używając ścieżek bezwzględnych w XPath, istnieje ryzyko, że najmniejsza zmiana struktury HTML spowoduje awarię skryptu. Dlatego zawsze starajcie się używać ścieżek względnych, aby zachować elastyczność.

CSS-selektory, z kolei, mogą być nieczytelne, jeśli staną się zbyt skomplikowane, dlatego ważne jest znalezienie równowagi między precyzją a prostotą.

Warto również wspomnieć o obsłudze błędów. Jeśli element nie zostanie znaleziony, Selenium wyświetli NoSuchElementException. Korzystajcie z bloków try-except lub metod oczekiwania, takich jak WebDriverWait, aby radzić sobie z tym i tworzyć wasze skrypty bardziej niezawodne.

1

Опрос

Wprowadzenie do Selenium,  35 уровень,  4 лекция

недоступен

Wprowadzenie do Selenium

Wprowadzenie do Selenium

Открыть