Tôi có nên sử dụng Bộ chọn XPath hoặc CSS không?

Mỗi năm, ngày càng có nhiều công ty bắt đầu sử dụng các công cụ quét web như một phần của phân tích và thông tin kinh doanh của họ. Điều này giúp các doanh nghiệp trở nên cạnh tranh hơn và có lợi hơn

Bạn phải luôn kiểm tra xem bạn có thể trích xuất dữ liệu từ một trang web hay không trước khi cạo. Dưới đây là danh sách kiểm tra có chứa 5 điều cần xem xét trước khi thực hiện quét web

Vì vậy, bạn đã tìm thấy một trang web mà bạn có thể cạo. Nhiều khả năng, bạn sẽ muốn trích xuất dữ liệu từ các phần tử HTML nhất định hoặc các phần tử có lớp hoặc ID cụ thể

Các chiến lược định vị nâng cao như bộ chọn CSS hoặc XPath đều có khả năng tìm thấy hầu hết mọi phần tử HTML trên trang web

Cascading Style Sheets (CSS) là ngôn ngữ biểu định kiểu được sử dụng để mô tả giao diện và định dạng của tài liệu được viết bằng HTML hoặc XML

Bộ chọn CSS là các mẫu được sử dụng để chọn (các) phần tử được tạo kiểu

XPath, ngôn ngữ đường dẫn XML, là ngôn ngữ truy vấn để chọn các nút từ tài liệu XML. Định vị các phần tử bằng XPath hoạt động rất tốt với rất nhiều tính linh hoạt

XPath sử dụng các biểu thức đường dẫn để điều hướng qua các phần tử và thuộc tính trong tài liệu XML

Các mẫu dữ liệu

Hãy xem đoạn mã HTML sau

Để khớp thẻ với bộ chọn CSS, chúng ta nên làm như thế này

p.dataflowkit.expandable

Trình định vị XPath trông giống như

//p[@class='dataflowkit expandable']

Bộ chọn CSS tốt hơn để sử dụng khi xử lý các lớp, ID và tên thẻ. Chúng ngắn hơn và dễ đọc hơn

Hãy xem một mã HTML khác

First

Second

Third. Some text in Paragraph

Trình định vị XPath để lấy nội dung của thẻ

thứ ba là

//p[contains(text(), 'Some text in Paragraph')]

Làm cách nào để đạt được kết quả tương tự với CSS Selector?

This is not possible to match content inside

tag with Pure CSS Selector.

Không có bộ chọn nội dung nào trong. Chúng ta có thể so khớp trên một phần tử, tên của một thuộc tính trong phần tử và giá trị của thuộc tính được đặt tên trong một phần tử. Tuy nhiên, không có gì để khớp nội dung trong một phần tử

Tuy nhiên, điều gì sẽ xảy ra nếu chúng ta cần thực hiện một truy vấn phức tạp có tính đến nội dung của phần tử mà bạn đang cố tìm?

Hoặc là

Bộ chọn CSS + jQuery sẽ là sự thay thế hoàn hảo cho XPath

Để lấy nội dung của thẻ

thứ ba từ ví dụ trước, chúng ta có thể sử dụng jQuery. chứa () Bộ chọn

p:contains('Some text in Paragraph')

Ngoài ra, bạn có thể xem xét công cụ chọn CSS thuần JavaScript của sizzle

So sánh song song ngắn gọn về Bộ chọn CSS3 và Biểu thức XPath

Bảng dưới đây được điều chỉnh từ bài viết này

Ghi chú kết thúc

Sử dụng Bộ chọn CSS để thực hiện các truy vấn đơn giản dựa trên các thuộc tính của phần tử. Bộ chọn CSS có xu hướng hoạt động tốt hơn, nhanh hơn và đáng tin cậy hơn XPath trong hầu hết các trình duyệt

//p[@class='dataflowkit expandable']
0 (https. //github. com/PuerkitoBio/goquery) nó dựa trên trình phân tích cú pháp HTML(5) và hỗ trợ bộ chọn kiểu CSS. Nó được nhiều lập trình viên Go sử dụng để có chức năng tương tự như nguồn cảm hứng javascript của nó, JQuery

Tuy nhiên, đối với các truy vấn phức tạp hơn, để khắc phục việc không thể truy vấn nội dung của phần tử bằng Bộ chọn CSS, hãy sử dụng bộ chọn XPath hoặc jQuery

Bạn có thể muốn kiểm tra

//p[@class='dataflowkit expandable']
1 (https. //godoc. org/gopkg. trong/xmlpath. v2) cho công cụ Go XPath thuần túy hoặc
//p[@class='dataflowkit expandable']
2(https. //github. com/moovweb/gokogiri) cho trình bao bọc Go trên thư viện C libxml

Bộ chọn bộ luồng dữ liệu

Dataflow kit là dịch vụ trích xuất dữ liệu web không yêu cầu kỹ năng mã hóa. Chúng tôi sử dụng Bộ chọn CSS + jQuery để chỉ định các phần tử HTML để lấy dữ liệu từ. Trong hầu hết các trường hợp, chỉ cần trỏ và chọn các thành phần cần thiết trên một trang đã tải để thu thập dữ liệu là đủ

Bạn có thể tự hỏi liệu có thuận lợi khi sử dụng bộ chọn CSS hoặc ID XPath để chọn thành phần hay không, nhưng điều này chủ yếu phụ thuộc vào ngữ cảnh mà chúng đang được sử dụng. Cả hai đều là những công cụ mạnh mẽ được sử dụng để truy cập các phần tử web và có quyền truy cập vào toàn bộ DOM của một trang web, do đó, về mặt khách quan, không có công cụ nào trong số hai công cụ này "tốt hơn". " Tuy nhiên, một số nội dung dễ diễn đạt hơn với bộ chọn CSS và những nội dung khác dễ diễn đạt hơn với ID XPath

Khi nào nên sử dụng bộ chọn CSS

  • Thường nhanh hơn XPath
  • Dễ học/hiểu cú pháp hơn. Nói cách khác, chúng dễ đọc hơn
  • Được sử dụng nhiều trong quá trình phát triển (JQuery phụ thuộc nhiều vào CSS)
  • Nói chung, bộ chọn CSS có thể làm hầu hết mọi thứ mà XPath ID có thể làm
  • Nếu bạn đang nhắm mục tiêu một phần tử trong DOM bóng tối. (Các phần tử trong một Shadow DOM không thể được nhắm mục tiêu với XPath. )

CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ được sử dụng để mô tả các chi tiết trình bày của tài liệu được viết bằng ngôn ngữ đánh dấu như XML hoặc HTML. Nó mô tả cách các phần tử HTML được hiển thị trên màn hình. Hỗ trợ CSS trong thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau. Bạn có thể đọc thêm về điều này ở đây

Bộ chọn CSS ví dụ (do W3Schools cung cấp)

Bộ chọn

Thí dụ

Sự miêu tả

tầng lớp

giới thiệu

Chọn tất cả các phần tử có class="intro"

#Tôi

#tên đầu tiên

Chọn phần tử có id="firstname"

[thuộc tính~=giá trị]

[tiêu đề~=hoa]

Chọn tất cả các phần tử có thuộc tính tiêu đề chứa từ "hoa"

Khi nào nên sử dụng ID của XPath

  • Các trường hợp bạn chỉ muốn hỗ trợ một loại bộ chọn
  • Trình duyệt của bạn không hỗ trợ đầy đủ CSS hoặc tất cả các bộ chọn CSS mà bạn cần (ví dụ: các trình duyệt cũ hơn như IE không hỗ trợ tất cả các bộ chọn CSS)
  • Bạn cần thực hiện một tác vụ mà chỉ XPath mới hỗ trợ (tìm phần tử bằng cách di chuyển ngược lên DOM)

XPath là ngôn ngữ đường dẫn XML và là ngôn ngữ truy vấn được sử dụng để chọn các nút từ tài liệu XML. Việc tìm các phần tử dựa trên ID XPath của chúng thường hoạt động rất tốt và linh hoạt. Biểu thức XPath trông rất giống với biểu thức bạn sẽ thấy khi làm việc với hệ thống tệp máy tính truyền thống. Tuy nhiên, có những lĩnh vực sử dụng điều này làm chiến lược định vị chính có thể bị cản trở bởi hiệu suất chậm của nó

📘Ví dụ Bộ chọn XPath

Có thể tìm thấy cú pháp và bộ chọn XPath ví dụ tại đây

Trong các trình duyệt

  • Chrome và FireFox được điều chỉnh để có hiệu suất CSS nhanh hơn
  • XPath hoạt động nhanh hơn trong IE 11

Một trong những điểm khác biệt chính giữa XPath và CSS là với XPath, bạn có thể tìm kiếm các phần tử cả về phía trước và phía sau trong hệ thống phân cấp DOM, trong khi CSS chỉ hoạt động theo hướng thuận. Điều này có nghĩa là với XPath, bạn có thể định vị các phần tử cha bằng cách sử dụng các phần tử con. Tuy nhiên, trên hầu hết tất cả các trình duyệt, việc duyệt qua các anh chị em lồng nhau và duyệt qua bảng được thực hiện với ID XPath rất tốn kém

XPath có tốt hơn CSS Selector không?

Ưu điểm và nhược điểm của Bộ chọn CSS . Dễ học hơn XPath, dễ sử dụng hơn. Bộ chọn CSS chỉ cho phép luồng một chiều. Sử dụng Bộ chọn CSS, chúng tôi chỉ có thể duyệt từ cha sang con chứ không thể đi từ con sang cha mẹ, điều này có thể thực hiện được với XPath. Performance is the same or faster compared to XPath. Easier to learn than XPath, easier to use. CSS Selector only allows unidirectional flow. Using a CSS Selector, we can only traverse from parent to child but not from the child to parent, which is possible with XPath.

Lợi thế của XPath so với CSS là gì?

XPath cho phép luồng hai chiều, nghĩa là quá trình truyền tải có thể đi theo cả hai chiều – từ con đến cha mẹ và từ cha mẹ sang con. Ngược lại, CSS cho phép luồng một chiều, do đó, quá trình truyền tải chỉ hoạt động từ cấp độ cha sang cấp độ con

Tại sao XPath không được khuyến nghị trong Selenium?

Tại sao Xpath tuyệt đối không được đề xuất cho Tự động hóa thử nghiệm Selenium? . the absolute XPath starts from the root of the DOM Structure/Tree document.

Bộ chọn nào là tốt nhất trong Selenium?

Bộ chọn CSS là tùy chọn tốt nhất nếu phần tử web không có ID và tên. CSS nhanh hơn XPath. CSS dễ đọc hơn XPath. Nó cũng cải thiện hiệu suất