Hướng dẫn how css selector is faster than xpath? - bộ chọn css nhanh hơn xpath như thế nào?

Tôi sẽ nắm giữ ý kiến ​​không phổ biến trên Selenium Tag rằng một bộ chọn XPath thích hợp hơn so với bộ chọn CSS trong thời gian dài.XPath selector is preferable to a CSS selector in the long run.

Bài viết dài này có hai phần-đầu tiên tôi sẽ đưa ra một bằng chứng về napkin chênh lệch hiệu suất giữa hai phần là 0,1-0,3 mili giây (vâng; đó là 100 micro giây), và sau đó tôi sẽ chia sẻ ý kiến ​​của mình tại sao XPath mạnh hơn.0.1-0.3 milliseconds (yes; that's 100 microseconds), and then I'll share my opinion why XPath is more powerful.


Chênh lệch hiệu suất

Trước tiên, chúng ta hãy giải quyết "Con voi trong phòng" - XPath đó chậm hơn CSS.

Với sức mạnh CPU hiện tại (đọc: bất cứ điều gì X86 được sản xuất từ ​​năm 2013), ngay cả trên Browerserstack, Surf Labs và AWS VMS, và sự phát triển của các trình duyệt (đọc: tất cả các máy bay phổ biến trong năm năm qua) .

Các động cơ của trình duyệt đã phát triển, sự hỗ trợ của XPath là đồng nhất và Internet & nbsp; Explorer đã ra khỏi hình ảnh (hy vọng cho hầu hết chúng ta). So sánh này trong câu trả lời khác đang được trích dẫn ở khắp mọi nơi, nhưng nó rất theo ngữ cảnh - có bao nhiêu người đang chạy - hoặc quan tâm - tự động hóa đối với Internet & nbsp; Explorer & NBSP; 8?

Nếu có một sự khác biệt, nó nằm trong một phần của một phần nghìn giây.

Tuy nhiên, hầu hết các khung cấp cao hơn đều thêm ít nhất 1 & nbsp; ms chi phí qua cuộc gọi Selenium thô (giấy gói, người xử lý, lưu trữ nhà nước, v.v.); Vũ khí cá nhân của tôi lựa chọn - Khung robot - thêm ít nhất 2 & nbsp; ms, mà tôi rất vui khi hy sinh cho những gì nó cung cấp. Một chuyến đi vòng mạng từ một trung tâm AWS US-EAST-1 đến Browserstack thường là 11 mili giây.11 milliseconds.

Vì vậy, với các trình duyệt từ xa, nếu có sự khác biệt giữa XPath và CSS, nó sẽ bị lu mờ bởi mọi thứ khác, theo thứ tự độ lớn.


Sự đo, sự đo lường

Không có nhiều so sánh công khai (tôi thực sự chỉ thấy cái được trích dẫn), vì vậy-đây là một trường hợp đơn lẻ, giả và đơn giản.

Nó sẽ xác định vị trí một phần tử theo hai chiến lược x lần và so sánh thời gian trung bình cho điều đó.

Trang đích của Target - BrowSerstack và nút "Đăng ký" của nó; Một ảnh chụp màn hình của nội dung HTML khi viết bài đăng này:

Hướng dẫn how css selector is faster than xpath? - bộ chọn css nhanh hơn xpath như thế nào?

Đây là mã kiểm tra (Python):

from selenium import webdriver
import timeit


if __name__ == '__main__':

    xpath_locator = '//div[@class="button-section col-xs-12 row"]'
    css_locator = 'div.button-section.col-xs-12.row'

    repetitions = 1000

    driver = webdriver.Chrome()
    driver.get('https://www.browserstack.com/')

    css_time = timeit.timeit("driver.find_element_by_css_selector(css_locator)",
                             number=repetitions, globals=globals())
    xpath_time = timeit.timeit('driver.find_element_by_xpath(xpath_locator)',
                               number=repetitions, globals=globals())

    driver.quit()

    print("CSS total time {} repeats: {:.2f} s, per find: {:.2f} ms".
          format(repetitions, css_time, (css_time/repetitions)*1000))
    print("XPATH total time for {} repeats: {:.2f} s, per find: {:.2f} ms".
          format(repetitions, xpath_time, (xpath_time/repetitions)*1000))

Đối với những người không quen thuộc với Python - nó mở trang và tìm phần tử - đầu tiên với trình định vị CSS, sau đó với trình định vị XPath; Hoạt động tìm thấy được lặp lại 1.000 lần. Đầu ra là tổng thời gian tính bằng giây cho 1.000 lần lặp lại và thời gian trung bình cho một lần tìm trong mili giây.

Người định vị là:

  • Đối với XPath - "Một phần tử div có giá trị lớp chính xác này, ở đâu đó trong DOM";
  • CSS là tương tự - "một phần tử div với lớp này, ở đâu đó trong DOM".

Nó được chọn một cách có chủ ý để không được điều chỉnh quá mức; Ngoài ra, bộ chọn lớp được trích dẫn cho CSS là "nhanh thứ hai sau ID".

Môi trường-Chrome v66.0.3359.139, Chromedriver v2.38, CPU: ULV Core M-5Y10 thường chạy ở mức 1,5 & NBSP;

Đây là đầu ra:

CSS total time 1000 repeats: 8.84 s, per find: 8.84 ms

XPath total time for 1000 repeats: 8.52 s, per find: 8.52 ms

Rõ ràng, thời gian tìm thấy là khá gần; Sự khác biệt là 0,32 mili giây. Đừng nhảy "Bộ chọn XPath nhanh hơn" - đôi khi là như vậy, nhưng đôi khi nó là CSS.0.32 milliseconds. Don't jump "the XPath selector is faster" – sometimes it is, but sometimes it's CSS.


Hãy thử với một bộ định vị khác. Đó là một thuộc tính phức tạp hơn nhỏ, một thuộc tính có một phần phụ (cách tiếp cận phổ biến ít nhất là đối với tôi, theo đuổi lớp của một phần tử khi một phần của nó mang ý nghĩa chức năng):

xpath_locator = '//div[contains(@class, "button-section")]'
css_locator = 'div[class~=button-section]'

Hai trình định vị một lần nữa về mặt ngữ nghĩa giống nhau - "Tìm một phần tử div có trong thuộc tính lớp của nó là chuỗi con này".

Đây là kết quả:

CSS total time 1000 repeats: 8.60 s, per find: 8.60 ms

XPath total time for 1000 repeats: 8.75 s, per find: 8.75 ms

Sự khác biệt 0,15 ms.0.15 ms.


Là một bài tập, cùng một bài kiểm tra như được thực hiện trong blog được liên kết trong các bình luận/câu trả lời khác, trang thử nghiệm là công khai và mã kiểm tra cũng vậy.

Họ đang làm một vài điều trong mã - nhấp vào một cột để sắp xếp theo nó, sau đó nhận các giá trị và kiểm tra sắp xếp UI là chính xác.

Rốt cuộc, tôi sẽ cắt nó - chỉ cần lấy người định vị, sau tất cả - đây là bài kiểm tra gốc, phải không?

Mã tương tự như trên, với những thay đổi này trong:

  • URL bây giờ là http://the-internet.herokuapp.com/tables; Có hai bài kiểm tra.

  • Các định vị cho cái đầu tiên - "Tìm các yếu tố theo ID và lớp" - là:

css_locator = '#table2 tbody .dues'
xpath_locator = "//table[@id='table2']//tr/td[contains(@class,'dues')]"

Và đây là kết quả:

CSS total time 1000 repeats: 8.24 s, per find: 8.24 ms

XPath total time for 1000 repeats: 8.45 s, per find: 8.45 ms

Một sự khác biệt 0,2 mili giây.0.2 milliseconds.

"Tìm kiếm các yếu tố bằng cách đi qua":

css_locator = '#table1 tbody tr td:nth-of-type(4)'
xpath_locator = "//table[@id='table1']//tr/td[4]"

Kết quả:

CSS total time 1000 repeats: 9.29 s, per find: 9.29 ms

XPath total time for 1000 repeats: 8.79 s, per find: 8.79 ms

Lần này là 0,5 ms (ngược, XPath bật ra "nhanh hơn" ở đây).0.5 ms (in reverse, XPath turned out "faster" here).

Vì vậy, năm năm sau (động cơ trình duyệt tốt hơn) và chỉ tập trung vào hiệu suất của người định vị (không có hành động như sắp xếp trong UI, v.v.), cùng một thử nghiệm - thực tế không có sự khác biệt giữa CSS và XPath.


Vì vậy, ra khỏi XPath và CSS, loại nào trong hai người chọn cho hiệu suất? Câu trả lời rất đơn giản - chọn định vị theo ID.locating by id.

Tóm lại, nếu ID của một yếu tố là duy nhất (như được cho là theo thông số kỹ thuật), giá trị của nó đóng vai trò quan trọng trong biểu diễn bên trong của trình duyệt của DOM, và do đó thường là nhanh nhất.

Tuy nhiên, ID duy nhất và không đổi (ví dụ: không tự động tạo) ID không phải lúc nào cũng có sẵn, điều này đưa chúng ta đến "tại sao XPath nếu có CSS?"


Lợi thế XPath

Với hiệu suất ngoài hình ảnh, tại sao tôi nghĩ XPath là tốt hơn? Đơn giản - Tính linh hoạt, và sức mạnh.

XPath là một ngôn ngữ được phát triển để làm việc với các tài liệu XML; Như vậy, nó cho phép các cấu trúc mạnh mẽ hơn nhiều so với CSS.

Ví dụ, điều hướng theo mọi hướng trong cây, tìm ra một yếu tố, sau đó đi đến ông bà của nó và tìm kiếm một đứa trẻ của nó có các thuộc tính nhất định. Nó cho phép các điều kiện boolean nhúng. Các bộ chọn nhúng - "Tìm một div có những đứa trẻ này với các thuộc tính này, và sau đó điều hướng theo nó".

XPath cho phép tìm kiếm dựa trên giá trị của một nút (văn bản của nó), bất cứ điều gì đã nhíu mày khi thực hành này. Nó có ích đặc biệt là trong các tài liệu có cấu trúc xấu (không có thuộc tính xác định nào để bước, như ID động và các lớp - định vị phần tử bằng nội dung văn bản của nó).

Bước vào CSS chắc chắn là dễ dàng hơn, người ta có thể bắt đầu viết các bộ chọn trong vài phút; Nhưng sau một vài ngày sử dụng, sức mạnh và khả năng XPath đã nhanh chóng vượt qua CSS.

Và hoàn toàn chủ quan - một biểu thức CSS phức tạp khó đọc hơn nhiều so với biểu thức XPath phức tạp.

Outro;)

Cuối cùng, một lần nữa rất chủ quan - chúng ta nên chọn cái nào?

IMO, không có bất kỳ sự lựa chọn đúng hay sai nào, họ là những giải pháp khác nhau cho cùng một vấn đề, và bất cứ điều gì phù hợp hơn cho công việc nên được chọn.

Trở thành "một người hâm mộ" của XPath Tôi không ngại sử dụng trong các dự án của mình, một sự pha trộn của cả hai - Heck, đôi khi sẽ nhanh hơn nhiều khi ném CSS One, nếu tôi biết nó sẽ làm tốt công việc.

Tại sao CSS nhanh hơn XPath?

XPath cho phép dòng chảy hai chiều, điều đó có nghĩa là cả hai cách có thể là cả hai cách từ cha mẹ đến con và con đến cha mẹ. CSS chỉ cho phép một luồng định hướng có nghĩa là chỉ từ cha mẹ sang con. XPath chậm hơn về hiệu suất và tốc độ. CSS có hiệu suất và tốc độ tốt hơn XPath.Css allows only one directional flow which means the traversal is from parent to child only. Xpath is slower in terms of performance and speed. Css has better performance and speed than xpath.

Bộ chọn XPath hoặc CSS nhanh hơn?

Về hiệu suất, CSS tốt hơn và nhanh hơn, trong khi XPath ở phía chậm hơn.Một XPath có thể có hai loại - tuyệt đối bắt đầu từ nút gốc và tương đối không cần phải bắt đầu từ gốc.css is better and faster, while xpath is on a slower side. An xpath can be of two types – absolute which starts from the root node and relative does not require to be started from the root.

Tại sao các bộ chọn CSS có mức độ ưu tiên cao hơn so với các biểu thức XPath?

Dưới đây là lý do tại sao các bộ chọn CSS cần được xem xét qua các biểu thức XPath:> Khi so sánh với các biểu thức XPath, bộ chọn CSS định vị các phần tử UI nhanh hơn.> Selenium có thể không thể xác định được một vài phần tử UI bằng cách sử dụng các biểu thức XPath trong khi thực hiện các tập lệnh tự động hóa trên trình duyệt Internet Explorer.When compared to XPath Expressions, CSS Selectors locate the UI elements faster. > Selenium may not be able to locate few UI elements using XPath Expressions while executing the Automation scripts on Internet Explorer Browser.

Tại sao CSS là công cụ định vị nhanh nhất?

Bộ định vị CssSelector CSS dễ đọc hơn XPath.Nó cũng cải thiện hiệu suất.Nó rất tương thích trên các trình duyệt.Nó rất hữu ích khi chúng tôi muốn kiểm tra ứng dụng của mình trên nhiều trình duyệt vì CSS Engine phù hợp trong tất cả các trình duyệt.