Hướng dẫn why we use css selector over xpath? - tại sao chúng tôi sử dụng bộ chọn css trên xpath?

Question

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

Nội dung chính Show

📘Ví dụ xpath chọn lọc
Bộ chọn XPath là gì?
Làm thế nào để tạo XPath?
Làm thế nào để tạo bộ chọn CSS?
and are children of the . Note that the elements are not children of the .Cha mẹ. Những yếu tố này chính xác là một cấp độ lên. Điều đó có nghĩa là mỗi phần tử sẽ có chính xác một cha mẹ. Trong ví dụ trên, cha mẹ của phần tử là.. These elements are exactly one level up. That means that each element will have exactly one parent. In the above example, the parent of element is .Anh chị em ruột. Các yếu tố này có cùng cha mẹ. Trong ví dụ này, các thẻ và là anh chị em có chung cha mẹ.. These elements have the same parent. In this example, tags and are siblings that share the same parent .Hậu duệ. Đây là những yếu tố là bất kỳ cấp độ nào, bao gồm cả trẻ em. Ví dụ, hậu duệ của là,,, và nhiều hơn nữa.. These are elements that are any level down, including children. For example, the descendants of the are , , , and more.Tổ tiên. Đây là những yếu tố bất kỳ cấp độ nào, bao gồm cả cha mẹ. Trong ví dụ này, tổ tiên của TAG là, và.. These are elements any level up, including the parent. In this example, the ancestors of tag are , , and .Tạo Xpath đầy đủ
are going to be as follows:Bước 1 - H2h2Bước 2 - /H2/h2Bước 3 - Cơ thể/H2body/h2Bước 4 - /Body /H2/body/h2Bước 5 - HTML/Body/H2html/body/h2Bước 6 -/HTML/Body/H2/html/body/h2Đây có thể là một cách tẻ nhạt để xây dựng XPath nhưng nó giúp hiểu được cách cấu trúc XPath.XPath này cũng có thể được tạo bằng các công cụ phát triển từ trình duyệt của bạn. Đây là cách làm:Lưu HTML ở trên vào một tệp và mở nó bằng Chrome hoặc Firefox.Nhấp chuột phải vào văn bản Chào mừng bạn đến với Xpath, và chọn Kiểm tra.Điều này sẽ mở các công cụ phát triển của nhà phát triển, với phần tử được tô sáng. Nhấp chuột phải vào phần tử, chỉ vào bản sao của bản sao và sau đó chọn Sao chép đầy đủ XPath Xpath. Điều này sẽ tạo ra cùng một đường dẫn mà chúng tôi vừa tạo. & NBSP; element highlighted. Right-click the element, point to “Copy” and then choose “Copy Full XPath”. This will create the same path that we just created. Sao chép đầy đủ XPath trong ChromeKhối xây dựng XPath
tags, the XPath will be as follows:Trong tệp documet1.html đang được thảo luận, chỉ có một thẻ. & Nbsp; Điều này có nghĩa là XPath mà chúng tôi đã tạo trước đó,/html/body/h2 có thể chỉ đơn giản là // h2. Khối xây dựng tiếp theo là dấu hoa thị. Nhân vật này được sử dụng như một thẻ hoang dã sẽ phù hợp với mọi yếu tố. Ví dụ: nếu chúng ta muốn có được danh sách tất cả các yếu tố là trẻ em của một yếu tố, không có dấu hoa thị, XPath sẽ như sau: tag. This means the XPath that we created earlier, /html/body/h2 can be simply //h2. The next building block is the asterisk. This character is used as a wild card that will match every element. For example, if we want to get the list of all the elements which are children of a element, without the asterisk the XPath will be as follows:Tương tự như vậy, để chọn tất cả các yếu tố là trẻ em, chúng ta có thể sử dụng XPath này: elements that are children of , we can use this XPath:Tuy nhiên, nếu chúng ta muốn chọn tất cả các yếu tố là trẻ em của một yếu tố, chúng ta có thể sử dụng dấu hoa thị. XPath sẽ như sau: element, we can use an asterisk. The XPath will be as follows:Bạn nên sử dụng điều này vì nó có thể phù hợp với nhiều yếu tố nếu các điều kiện khác không được thêm vào. Những điều kiện này được thêm vào bằng cách sử dụng dấu ngoặc vuông và được gọi là vị ngữ.Vị nguyên tố trong XPath
Nhận văn bản từ các yếu tố
Ưu điểm của việc sử dụng XPath
Bộ chọn CSS là gì?
Làm thế nào để tạo bộ chọn CSS?
elements with id as header.Để chọn trẻ, toán tử> được sử dụng. Để chọn toán tử anh chị em đầu tiên được sử dụng. Để chọn tất cả anh chị em, ~ được sử dụng. Dưới đây là một vài ví dụ:> operator is used. For selecting the first sibling + operator is used. For selecting all siblings, ~ is used. Here are few examples:div> a - chọn các yếu tố là con của – selects elements which are children of Div A - Chọn các yếu tố là hậu duệ của & nbsp; – selects elements which are descendent of Div + A - Chọn phần tử đầu tiên sau một – selects first element after a Div ~ a - chọn tất cả các yếu tố sau một – Selects all elements after a Nếu bạn biết những điều này, bạn sẽ có thể bao gồm hầu hết các kịch bản.Ưu điểm của việc sử dụng bộ chọn CSS
CSS vs XPath so sánh
Lựa chọn giữa XPath và CSS
Sự kết luận
Những bài viết liên quan
Là tốt hơn để sử dụng bộ chọn CSS hoặc XPath?
Sự khác biệt chính giữa các bộ chọn XPath và CSS là gì?
Tại sao chúng ta cần bộ chọn CSS?
Tại sao chúng ta sử dụng bộ chọn CSS trong selen?

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

CSS, là viết tắt của các bảng kiểu xếp tầng, là một ngôn ngữ được sử dụng để mô tả các chi tiết trình bày của một 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. CSS hỗ trợ trong thiết kế, bố cục và biến thể trong màn hình 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	Thí dụ	Sự mô tả
.class	.intro	Chọn tất cả các phần tử với lớp = "Giới thiệu"
#id	#firstname	Chọn phần tử với ID = "FirstName"
[attribute~=value]	[title~=flower]	Chọn tất cả các yếu tố với một thuộc tính tiêu đề chứa từ "hoa"

Các trường hợp bạn chỉ muốn hỗ trợ một loại 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 bạn cần (ví dụ như 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 nhiệm vụ mà chỉ một XPath sẽ hỗ trợ (tìm một phần tử bằng cách di chuyển trở lại 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. Tìm các yếu tố dựa trên ID XPath của họ thường hoạt động rất tốt và linh hoạt. Các biểu thức XPath trông rất giống với những 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 khu vực sử dụng điều này như một 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ụ xpath chọn lọc
Ví dụ, bộ chọn và cú pháp XPath có thể được tìm thấy ở đây.

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

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

Cập nhật 3 tháng trước

Khi các công cụ quét và tự động hóa web ngày càng hữu ích và dễ tiếp cận, ngày càng có nhiều công ty đầu tư vào lĩnh vực này. Nó không phải là vấn đề công nghệ hoặc khung bạn sử dụng; Cuối cùng, bạn sẽ có một quyết định để đưa ra - chọn Xpath hoặc CSS. Trong bài viết này, chúng tôi sẽ kiểm tra từng tùy chọn một cách chi tiết và giúp bạn đưa ra quyết định rằng mà sẽ cho phép bạn tận dụng tốt nhất Xpath và CSS.

Bộ chọn XPath là gì?

Làm thế nào để tạo XPath?

Ưu điểm của việc sử dụng XPath

Bộ chọn CSS là gì?

Làm thế nào để tạo bộ chọn CSS?

<?xml version="1.0" encoding="UTF-8"?>
<inventory>
    <product type="bottle">Water Bottle</product>
    <brand>ABC</brand>
    <code type="upc-13">54268453659458</code>
    <stock>54</stock>
    <description>Red colored water bottle</description>
</inventory>

Ưu điểm của việc sử dụng bộ chọn CSS

CSS vs XPath so sánh

Lựa chọn giữa XPath và CSS

Làm thế nào để tạo XPath?

Ưu điểm của việc sử dụng XPathdocument1.html.

<html>
   <head>
      <title>XPath vs CSS</title>
   </head>
   <body>
      <h2 id="header">Welcome to XPath</h2>
      <div id="navbar">
         <a href="https://oxylabs.io/blog" id="blog" class="nav">Visit our Blog</a>
         <a href="https://oxylabs.io/resources/case-studies" class="nav">Case Studies</a>
      </div>
   </body>
</html>

Bộ chọn CSS là gì?

Làm thế nào để tạo bộ chọn CSS?

Ưu điểm của việc sử dụng bộ chọn CSS

CSS vs XPath so sánhXPath vs CSS.
Lựa chọn giữa XPath và CSSid="blog" is an attribute node.
Giá trị nguyên tử - Đây là các giá trị cuối cùng có thể là văn bản có trong một phần tử hoặc giá trị của một thuộc tính. Ví dụ: Nghiên cứu trường hợp của người Viking.

Những nút này có thể có nhiều loại mối quan hệ với nhau. Biết tên của các mối quan hệ này là điều cần thiết để hiểu cách tạo bộ chọn XPath. Các nguyên tắc cơ bản sau đây sẽ được áp dụng cho cả XPath và CSS.