Giới thiệu về XPath và CSS selectors

1. XPath và CSS selectors là gì?

Hôm nay, chúng ta sẽ tiến một bước lớn trên con đường làm chủ tự động hóa web với Selenium và làm quen với XPath và CSS selectors. Những công cụ nhỏ mà mạnh mẽ này sẽ trở thành bạn đồng hành đáng tin cậy trong việc tìm kiếm các phần tử trên trang web. Hãy cùng nhau khám phá thế giới của các selectors và học cách sử dụng chúng để tìm kiếm chính xác và hiệu quả hơn.

Nếu tài liệu HTML là một khu rừng rậm rạp, thì XPath và CSS selectors sẽ là bản đồ nhanh của bạn. Chúng cho phép bạn tìm đường đến cây bạn cần (hoặc phần tử, nếu bạn thích lập trình hơn). Các công cụ này giúp tìm thấy các phần tử trên trang web, ngay cả khi chúng ẩn sau hàng tấn mã nguồn và hàng triệu thẻ.

XPath

XPath (XML Path Language) — là ngôn ngữ được thiết kế để điều hướng trong các tài liệu XML. Nhưng có người nói rằng HTML — là sự lai của XML, đúng không? Đây là lý do tại sao XPath rất tiện khi áp dụng với các tài liệu HTML. Nó có thể tìm đến phần tử theo bất kỳ đường dẫn nào bạn đặt ra.

CSS selectors

CSS selectors đến từ thế giới của các bảng kiểu cascade. Đừng lo, việc học chúng không yêu cầu bạn trở thành nhà thiết kế! Chúng cần để chọn chính xác phần tử dựa trên loại, lớp, id và thậm chí cả trạng thái. Việc sử dụng chúng dễ hơn bạn nghĩ — bạn có lẽ đã vô tình sử dụng chúng khi tạo style cho các trang web.

2. Áp dụng XPath và CSS selectors trong mã

Bây giờ, khi bạn đã biết selectors là gì, hãy thực hành ngay lập tức. Chúng ta sẽ tìm hiểu cách áp dụng chúng cùng với Selenium và làm điều kỳ diệu!

Sử dụng XPath

Đây là ví dụ về cách sử dụng XPath để tìm kiếm phần tử trong Selenium:

from selenium import webdriver

# Cấu hình driver
driver = webdriver.Chrome()

# Mở trang
driver.get('https://example.com')

# Tìm phần tử bằng XPath
element = driver.find_element_by_xpath('//div[@id="menu"]/ul/li/a')

# In ra văn bản của phần tử
print(element.text)

# Đóng trình duyệt
driver.quit()

Giải thích:

• //div[@id="menu"]/ul/li/a — đây là XPath của chúng ta. Nó nói rằng: "Này driver, tìm giùm phần tử a, nó nằm bên trong li, cái nằm trong ul, cái nằm trong div có id="menu"."

Sử dụng CSS selectors

Giờ hãy xem cách dùng CSS selectors:

from selenium import webdriver

# Cấu hình driver
driver = webdriver.Chrome()

# Mở trang
driver.get('https://example.com')

# Tìm phần tử qua CSS selector
element = driver.find_element_by_css_selector('div#menu > ul > li > a')

# In ra văn bản của phần tử
print(element.text)

# Đóng trình duyệt
driver.quit()

Giải thích:

• div#menu > ul > li > a — đây là CSS selector của chúng ta. Nó tìm phần tử tương tự như XPath, nhưng với cú pháp ngắn gọn hơn.

3. Sự khác biệt giữa XPath và CSS selectors

Bạn hỏi sự khác biệt giữa XPath và CSS selectors là gì? Câu hỏi tuyệt vời! Hãy cùng phân tích khi nào nên dùng cái nào.

Sự linh hoạt vs. Sự đơn giản

XPath linh hoạt hơn: bạn có thể di chuyển "lên trên" trong cây DOM và sử dụng các điều kiện lôgic phức tạp. Điều này khiến nó hữu ích cho các truy vấn phức tạp. Tuy nhiên, đôi khi sự đơn giản và ngắn gọn của CSS selectors làm chúng trở thành sự lựa chọn ưu tiên. CSS selectors dễ đọc và ghi hơn, đặc biệt khi bạn cần tìm phần tử dựa trên lớp hoặc id.

Hỗ trợ các hàm

XPath hỗ trợ sử dụng các hàm — từ kiểm tra văn bản đến làm việc với các thuộc tính, ví dụ như contains() hoặc starts-with(). CSS selectors, mặt khác, không có hỗ trợ phức tạp như vậy.

Tốc độ

Trong một số trường hợp, CSS selectors hoạt động nhanh hơn. Điều này bởi vì các trình duyệt đã được tối ưu hóa để làm việc với chúng, làm chúng thành sự lựa chọn mặc định cho các tác vụ đơn giản.

Cú pháp

XPath có cú pháp phức tạp hơn, điều này có thể trở thành cả lợi thế và bất lợi. CSS selectors đơn giản hơn để viết và học.

4. Áp dụng thực tế

Hãy áp dụng kiến thức này vào một nhiệm vụ thực tế. Giả sử chúng ta có một trang web với bảng sản phẩm, và chúng ta muốn thu thập tất cả các tên sản phẩm cùng với giá cả của chúng. Đây là cách làm:

Ví dụ sử dụng XPath

from selenium import webdriver

# Cấu hình driver
driver = webdriver.Chrome()

# Mở trang
driver.get('https://example.com/products')

# Tìm tất cả các phần tử sản phẩm
products = driver.find_elements_by_xpath('//table[@class="product-table"]/tbody/tr')

# Trích xuất dữ liệu từ mỗi sản phẩm
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}")

# Đóng trình duyệt
driver.quit()

Ví dụ sử dụng CSS selectors

from selenium import webdriver

# Cấu hình driver
driver = webdriver.Chrome()

# Mở trang
driver.get('https://example.com/products')

# Tìm tất cả các phần tử sản phẩm
products = driver.find_elements_by_css_selector('table.product-table > tbody > tr')

# Trích xuất dữ liệu từ mỗi sản phẩm
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}")

# Đóng trình duyệt
driver.quit()

5. Đặc điểm và lỗi thường gặp

Khi bạn sử dụng XPath và CSS selectors, có vài bẫy cần tránh. Ví dụ, khi bạn sử dụng đường dẫn tuyệt đối trong XPath, chỉ một thay đổi nhỏ trong cấu trúc HTML có thể làm mã của bạn hỏng. Do đó, hãy luôn cố gắng sử dụng đường dẫn tương đối để giữ sự linh hoạt.

CSS selectors, mặt khác, có thể trở nên khó đọc nếu quá phức tạp, vì vậy rất quan trọng để tìm sự cân bằng giữa độ chính xác và sự đơn giản.

Ngoài ra, cần đề cập đến việc xử lý lỗi. Nếu phần tử không được tìm thấy, Selenium sẽ ném ra NoSuchElementException. Hãy sử dụng các khối try-except hoặc các phương pháp chờ đợi như WebDriverWait, để xử lý tình huống này và làm cho mã của bạn đáng tin cậy hơn.

1

Опрос

Làm quen với Selenium,  35 уровень,  4 лекция

недоступен

Làm quen với Selenium

Làm quen với Selenium

Открыть