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.
- 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.
.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. 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?Bộ chọn XPath là gì?
Water Bottle
ABC
54268453659458
54
Red colored water bottle
Ư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.
XPath vs CSS
Welcome to XPath
Visit our Blog
Case Studies
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.
Bọn trẻ. Đây là những yếu tố chính xác là một cấp xuống. Ví dụ, trong tài liệu HTML ở trên, các yếu tố và là con của. Lưu ý rằng các yếu tố không phải là con của.. These are the elements that are exactly one level down. For example, in the above HTML document, the elements 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 đủ
Cách dễ nhất để tạo ra Xpath là cách tiếp cận từ dưới lên trên mạng. Trong phương pháp này, bắt đầu bằng việc viết tên của yếu tố mà bạn muốn chọn. Sau đó, thêm một chém về phía trước trước nó. Sau đó, viết tên của cha mẹ của nó trước khi biểu hiện. Tiếp tục lặp lại cho đến khi bạn không còn cha mẹ nữa. Sau khi thực hiện xong, hãy viết tên của cha mẹ trước nó, tách biệt với một dấu gạch chéo về phía trước.before it. After that, write the name of its parent before the expression. Keep repeating until you have no more parents. Once it’s done, write the name of its parent before it, separated with a forward slash.
Ví dụ: các bước để viết XPath cho phần tử sẽ như sau: are going to be as follows:
Bước 1 - H2h2
Bước 2 - /H2/h2
Bước 3 - Cơ thể/H2body/h2
Bước 4 - /Body /H2/body/h2
Bước 5 - HTML/Body/H2html/body/h2
Bướ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 Chrome
Khối xây dựng XPath
Trong ảnh chụp màn hình trước đó, bạn có thể thấy hai tùy chọn cho XPath - XPath và Full XPath. & NBSP; Phần trước đã trình bày cách tạo một Xpath. & NBSP đầy đủ;
Nếu XPath được chọn thay vì Xpath đầy đủ trong ví dụ trên, thì XPath mà chúng ta nhận được như sau:
Vì vậy, có gì sai với Full XPath? Đây là một ví dụ đơn giản tạo ra một XPath đầy đủ đơn giản. Điều này sẽ không luôn luôn là trường hợp, mặc dù. Ví dụ: nếu cùng một phương thức được tuân thủ để tạo XPath đầy đủ cho mục lục của bất kỳ trang Wikipedia nào, thì XPath đầy đủ sẽ là một cái gì đó như thế này:
/html/body/div[3]/div[3]/div[5]/div[1]/div[2]/ul/li[1]/a/span[2]Có ba vấn đề chính với XPath này:
Nó không thể đọc được và không thể duy trì.
Nó quá cứng nhắc. Ngay cả khi chỉ có một thay đổi nhỏ, như một biểu ngữ thông tin bổ sung ở đầu trang, XPath này sẽ bị phá vỡ.
Full XPath sẽ đi qua từng nút và làm cho nó chậm.
Đó là lý do tại sao chúng ta cần học một XPath ngắn hơn, nhanh hơn và dễ đọc hơn. Hãy bắt đầu với khối xây dựng đầu tiên - nhân vật chém. Mặc dù một dấu gạch chéo chọn nút con, một cú đánh đôi chọn tất cả các nút phù hợp, bất kể chúng ở đâu trong tài liệu.
Ví dụ: để tìm tất cả các thẻ trong tài liệu, biểu thức XPath sẽ như sau: tags in a document, the XPath expression will be as follows:
Tương tự, để tìm tất cả các thẻ, XPath sẽ như sau: 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
Các vị từ được viết bên trong dấu ngoặc vuông. Ở dạng đơn giản nhất, đây chỉ là một con số.
Ví dụ: XPath sau sẽ khớp với hai thẻ neo.
Nếu chúng ta thêm một số trong dấu ngoặc vuông, chúng ta có thể chỉ định thành phần nào sẽ chọn. Ví dụ: nếu bạn muốn chọn thẻ neo đầu tiên, XPath sẽ như sau:
Lưu ý rằng nút đầu tiên là 1, không phải 0, giống như trong hầu hết các ngôn ngữ lập trình.
Chúng ta cũng có thể sử dụng các chức năng trong ngoặc vuông. Ví dụ: để có được thẻ cuối cùng, chúng ta có thể viết XPath này: tag, we can write this XPath:
Có nhiều chức năng hơn sẽ được đề cập trong thời gian ngắn. Trước đó, chúng ta sẽ xem làm thế nào chúng ta có thể lấy văn bản từ các yếu tố.
Nhận văn bản từ các yếu tố
XPath // H2 trả về phần tử. Hãy để xem cách chúng ta có thể trích xuất văn bản, hoặc nói cách khác, một giá trị nguyên tử từ các phần tử. & NBSP;//h2 returns the element. Let’s see how we can extract text, or in other words, an atomic value from the elements.
Văn bản thường được chứa giữa phần mở phần tử và phần đóng. Ví dụ:
Welcome to XPathĐể trích xuất văn bản này, có thể sử dụng văn bản chức năng XPath []. Ví dụ: XPath sau sẽ trả về văn bản bên trong phần tử H2:text[] can be used. For example, the following XPath will return the text inside the h2 element:
Để trích xuất giá trị của bất kỳ thuộc tính nào, hãy sử dụng ký hiệu @ với tên thuộc tính. Ví dụ, hãy xem xét thẻ neo này:
Visit our BlogĐể trích xuất giá trị của thuộc tính HREF, hãy sử dụng @HREF trong XPath:@href in the XPath:
Điều này sẽ nhận được văn bản //oxylabs.io/blog
Chúng ta cũng có thể sử dụng các bộ chọn thuộc tính trong các vị từ XPath. Ví dụ: XPath này sẽ chọn tất cả các phần tử trong đó giá trị thuộc tính ID là tiêu đề: \
elements where the id attribute’s value is header:\Nếu bạn muốn tìm kiếm một phần tử chứa văn bản cụ thể, bạn có thể tìm kiếm đó bằng cách sử dụng hàm text [] trong dấu ngoặc vuông:text[] function in square brackets:
//a[text[]="Visit our Blog"]Lưu ý rằng điều này sẽ tìm kiếm một trận đấu hoàn chỉnh. Nếu bạn muốn tìm kiếm một phần kết hợp, hãy sử dụng hàm chứa. Chức năng này sẽ là một tiêu chí quan trọng để giúp bạn quyết định giữa XPath và CSS.contains function. This function will be an important criterion to help you decide between XPath and CSS.
//a[contains[text[],"Blog"]]Đây là tất cả về những điều cơ bản của XPath. Trong phần tiếp theo, bạn sẽ tìm hiểu khu vực chính nơi XPath thực sự mạnh mẽ.
Ưu điểm của việc sử dụng XPath
Trong khi làm việc với bất kỳ HTML, hoặc DOM, có thể có ba trục chính. Đây là tổ tiên, hậu duệ, & nbsp; và anh chị em. Mặc dù có thể chọn anh chị em và con cháu sử dụng CSS, nhưng chỉ có XPath có khả năng đi lên tổ tiên.
Lấy ví dụ này:
OxylabsTrong ví dụ này, nếu chúng ta phải trích xuất giá trị của thuộc tính HREF của thẻ, chúng ta có thể định vị thẻ nhịp và tăng một cấp để tìm thẻ: tag, we can locate the span tag and go up one level to find the tag:
//span[@class="link"]/../@hrefLưu ý việc sử dụng .. để đi lên một cấp. Điều này là không thể sử dụng bộ chọn CSS... to go one level up. This is not possible using CSS Selectors.
Hơn nữa, đối với một trận đấu một phần, CSS đã có: chứa người vận hành nhưng hiện đã không được dùng nữa. Nó có thể hoạt động với một vài công cụ cụ thể nhưng sự hỗ trợ không được đảm bảo.:contains operator but now has been deprecated. It may work with few specific tools but the support is not guaranteed.
Mặt khác, hàm XPath chứa [] được hỗ trợ toàn cầu. Tóm lại, nếu bạn muốn đi qua DOM, XPath là lựa chọn duy nhất của bạn. Nếu bạn muốn thực hiện một phần kết hợp, một lần nữa, XPath có thể là tùy chọn duy nhất của bạn.contains[] is universally supported. To sum it up, if you want to traverse up the DOM, XPath is your only choice. If you want to perform a partial match, again, XPath may be your only option.
Bộ chọn CSS là gì?
Bộ chọn CSS là phần đầu tiên của quy tắc CSS. CSS là một tập hợp các thành phần và quy tắc thông báo cho trình duyệt mà các phần tử HTML phải được định vị và áp dụng với các thuộc tính CSS. is the first piece of a CSS rule. CSS is a set of components and rules that inform the browser which HTML elements have to be located and applied with CSS properties.
HTML hiếm khi được phục vụ mà không có CSS, hoặc bảng kiểu xếp tầng. Nếu có nhu cầu thay đổi sự xuất hiện của bất kỳ yếu tố HTML nào, thì cách phổ biến nhất để làm điều đó là bằng cách áp dụng một kiểu cho nó - nó có thể đơn giản như thay đổi màu văn bản hoặc nó có thể phức tạp hơn nếu bạn đang sử dụng hoạt hình .
Trong cả hai trường hợp, bước đầu tiên sẽ là xác định vị trí phần tử. Khi một phần tử được định vị, các kiểu có thể được áp dụng bằng CSS. Để xác định vị trí các phần tử, bộ chọn CSS được sử dụng. Bộ chọn CSS được phát triển vì những lý do hoàn toàn khác nhau, nhưng chúng phục vụ cùng một mục đích - chọn các yếu tố.
Bây giờ bạn có một ý tưởng về các bộ chọn XPath và CSS là gì, chúng tôi sẽ xem xét cách XPath và CSS được tạo ra và khi nào bạn nên sử dụng cái này hơn cái kia.
Làm thế nào để tạo bộ chọn CSS?
Bắt đầu với bộ chọn CSS là rất dễ dàng. Bộ chọn CSS có thể sử dụng tên thẻ, id, [[giả pseudo-] hoặc thuộc tính. Xem xét yếu tố này:
XPath vs CSSDưới đây là một vài ví dụ về bộ chọn CSS cho thẻ này:
H2 - Chọn theo tên phần tử. Thẻ hoang dã là * – Select by element name. Wild card is *
#header - Sử dụng # để chỉ định ID – Use # to specify id
.Fancy - Sử dụng một khoảng thời gian để chỉ định lớp – Use a period for specifying class
[name = "ctrl"] - Sử dụng bất kỳ thuộc tính nào trong dấu ngoặc vuông – Use any attributes in square brackets
Những thứ này có thể được kết hợp quá. Ví dụ:
H2#Tiêu đề chọn các phần tử có ID làm tiêu đề. selects
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