Hướng dẫn how xpath can be replaced by css selector? - cách xpath có thể được thay thế bằng bộ chọn css?

Hướng dẫn how xpath can be replaced by css selector? - cách xpath có thể được thay thế bằng bộ chọn css?

Evgeny Tkachenko

Santoshsarma Jayanthi

Santoshsarma Jayanthi

Nhân viên lãnh đạo thành viên tại Zoho Corporation

Xuất bản ngày 12 tháng 6 năm 2015

Trong tự động hóa các ứng dụng web, các trình định vị đóng vai trò rất lớn.XPath là một trong những chiến lược định vị được sử dụng nhiều nhất trong tự động hóa selenium. Chúng tôi có thể thay thế hầu hết các Xpath bằng các bộ chọn CSS trong tự động hóa WebDriver. CssSelectors & nbsp; sẽ hoạt động tốt với IE mà không có vấn đề gì.

Ở đây tôi đang liệt kê một vài trong số những khả năng đó.

Xem xét bên dưới thẻ HTML
Thẻ div 1➟ này có ID tĩnh & nbsp;

& nbsp; thẻ 2➟ này P có ID động

& nbsp; 3➟ Đây là một thẻ có nhiều thuộc tính

& nbsp; 4➟ này đang hướng tới

5➟ & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
         
         

6➟ Thẻ này là ví dụ bắt đầu với ví dụ

& nbsp; đây là & nbsp; XPath và Csselector cho cùng một thẻ HTML.

  1. div✔ xpath: & nbsp; "// div [@id = 'firstDiv']" ✔ css: & nbsp; "div [id = 'firstDiv']" & nbsp; & nbsp; hoặc & nbsp; "Div#FirstDiv"
    ✔ xpath : "//div[@id='firstDiv']"
    ✔ Css:  "div[id='firstDiv']"    Or   "div#firstDiv"
  2. p✔ xpath: & nbsp; "// p [chứa (@id, 'paragraps_dynamic _')]" ✔ css: & nbsp; "p [id*= 'paragraps_dynamic_']" "
    ✔ xpath : "//p[contains(@id,'paragraps_dynamic_')]"
    ✔ Css : "p[id*='paragraps_dynamic_']"
  3. a✔xpath: & nbsp; "// a [chứa ( @onclick, 'dothat') và @tile = 'dothatoperation']" ✔css: & nbsp; " ] "
    ✔xpath : "//a[contains(@onclick,'doThat') and @tile='doThatOperation']"
    ✔Css : "a[onclick*='doThat'][tile='doThatOperation']"
  4. h2✔xpath: & nbsp; "// h2 [ @name = 'heading1' và @value = 'headName']" ✔css: & nbsp; "h2 [name = 'heading1'] [value = 'headName']"
    ✔xpath : "//h2[@name='heading1' and @value='headName']"
    ✔Css : "h2[name='heading1'][value='headName']"
  5. input✔xpath: & nbsp; "// div/input [@id = 'tên người dùng']" ✔css: & nbsp; "div> input [id = 'username']" "
    ✔xpath : "//div/input[@id='username']"
    ✔Css : "div > input[id='username']"
  6. h2✔xpath: & nbsp; "// h2 [started-with (@id, 'propertyUser')]" ✔css: & nbsp; "h2 [id^= 'propertyUser']" "
    ✔xpath : "//h2[starts-with(@id,'propertyUser')]"
    ✔Css : "h2[id^='propertyUser']"

Thanks,SantoshSarma
SantoshSarma

Những người khác cũng xem

Khám phá các chủ đề

Trận chiến Xpath vs CSS là một cuộc chiến mà mọi người tiếp cận khác nhau chủ yếu vì sở thích thay vì các ý nghĩa khác nhau của việc sử dụng một trong các tùy chọn. Nếu bạn đã từng phải chọn giữa việc sử dụng các bộ chọn XPath và CSS, rất có thể môi trường bạn đang làm việc có liên quan nhiều đến sự lựa chọn của bạn hơn là sự khác biệt thực tế giữa các tùy chọn. Các trường hợp bạn cân nhắc các tùy chọn bao gồm khi bạn muốn cạo nội dung từ một trang web trực tiếp hoặc bạn đang tiến hành các thử nghiệm tự động ở mặt trước của ứng dụng.

Bài viết này sẽ giải quyết các khác biệt khác nhau giữa XPath và CSS. Trên đường đi, chúng tôi sẽ nói về những gì mỗi tùy chọn mang đến cho bảng. Đến cuối bài viết này, tùy chọn nào bạn nên sử dụng có khả năng trở nên rõ ràng với bạn ngay cả khi bạn không xem xét khả năng tương thích của nó với trường hợp sử dụng của bạn. Bạn cũng sẽ tìm hiểu lý do tại sao cái này hoặc cái kia có thể là một lựa chọn tốt hơn để sử dụng khi kiểm tra các ứng dụng của bạn.

Chu kỳ làm ứng dụng đi một cái gì đó như thế này; Mã, kiểm tra, triển khai, nhận phản hồi, vá lỗi và làm lại từ đầu. Đôi khi có những người khác nhau ở mọi giai đoạn, khiến mọi thứ trở nên phức tạp. Và bỏ qua bất kỳ giai đoạn nào có thể làm cho ứng dụng có khả năng sử dụng. Thử nghiệm cũng quan trọng như mọi giai đoạn khác. Nó ở giai đoạn thử nghiệm mà bạn có thể bắt đầu nhìn vào bộ chọn XPath vs CSS.

Trước khi chúng ta đi sâu hơn vào logic của sự lựa chọn, hãy để xác định mỗi bên và tìm hiểu những ưu và nhược điểm tương ứng của họ.

XPath là gì?

XPath là viết tắt của đường dẫn XML. Nó có một ngôn ngữ truy vấn giúp xác định các yếu tố từ tài liệu XML. Nó sử dụng các biểu thức điều hướng vào một tài liệu XML theo cách có thể được theo dõi từ đầu đến phần tử dự định như hình thành một đường dẫn từ đầu. Chúng tôi sẽ thảo luận về cú pháp ở độ sâu lớn hơn trong thời gian ngắn.

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

  • XPath cho phép bạn điều hướng DOM khi tìm kiếm các yếu tố để kiểm tra hoặc cạo.
  • Nó tương thích với các trình duyệt cũ (hoặc tại thời điểm xuất bản, bao gồm các phiên bản cũ hơn của Internet Explorer, mà một số tập đoàn vẫn sử dụng).
  • Tạo trong XPath linh hoạt hơn trong bộ chọn CSS.
  • Khi bạn không biết tên của một yếu tố, bạn có thể sử dụng có chứa để tìm kiếm các trận đấu có thể.contains to search for possible matches.

Cách tạo Xpath

XML PATH Cú pháp sử dụng các luồng sơ đồ cây để xác định vị trí các phần tử trên trang HTML. Hãy xem xét phần tử biểu mẫu trong đánh dấu trang tìm kiếm bên dưới.

Hướng dẫn how xpath can be replaced by css selector? - cách xpath có thể được thay thế bằng bộ chọn css?

Xpath đầy đủ vào nút tìm kiếm bên trong biểu mẫu sẽ trông như thế này:

/html/body/main-view//section/startpage-component//div/main/search-box-component//div/form/div/buttonhtml/body/main-view//section/startpage-component//div/main/search-box-component//div/form/div/button

Như đã thấy trong toàn bộ XPath, tài liệu được chia thành các yếu tố về cơ bản đại diện cho bộ xương của nó. Đi từ trên xuống dưới trong tài liệu kết quả và liệt kê mọi nút, cho đến khi bạn đạt được phần tử mong muốn, là thứ trở thành XPath. Ở đây, một cách ngắn hơn để viết này.

//*[@id="scroll-container"]/main/search-box-component//div/form/div/button

Và ở đây, một bảng toàn diện cho cú pháp của cả bộ chọn XPath và CSS;

Bây giờ, bạn đã có cảm giác về Xpath là gì và những gì nó có thể làm, hãy để Lôi chuyển sang bộ chọn CSS.

Bộ chọn CSS là gì?

Hầu hết các trang HTML đều được tạo kiểu bằng cách sử dụng các lớp bảng kiểu xếp tầng, còn được gọi là CSS. Xác định các yếu tố khác nhau trên một trang dựa trên các kiểu yêu cầu bạn chọn lớp nó rơi vào. Xem xét bộ chọn CSS là một phần của bảng kiểu cho phép bạn chọn loại nội dung để kiểm tra, chỉnh sửa hoặc sao chép. Các bộ chọn CSS xác định các yếu tố khác nhau trong DOM và chúng ảnh hưởng hoặc kết nối với các phần này của giao diện.

Bộ chọn CSS có nhiều loại. Điều này chủ yếu là do không giống như xây dựng cây hoặc bản đồ của tùy chọn XPath, các bộ chọn có tên và danh mục thực tế. Dưới đây là một số loại.

  • Các bộ chọn đơn giản: Những tìm kiếm cho các yếu tố dựa trên lớp hoặc ID của họ. These search for elements based on their class or ID.
  • Bộ chọn thuộc tính: Những phần tử nhận này dựa trên các giá trị được gán cho chúng. Tôi sẽ cung cấp một số ví dụ sau trong bài viết này. These pick up elements based on values assigned to them. I’ll provide some examples later on in this article.
  • Các bộ chọn giả: Trong các tình huống trong đó các trạng thái của các yếu tố được khai báo với CSS, chẳng hạn như các hộp kiểm hoặc các thuộc tính trên hover, chúng được sử dụng. In situations where the states of elements are declared with CSS, such as check boxes or on-hover attributes, these come into use.

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

  • Nó nhanh hơn Xpath.
  • Nó dễ dàng hơn nhiều để học và thực hiện.
  • Bạn có cơ hội tìm thấy các yếu tố của bạn cao.
  • Nó tương thích với hầu hết các trình duyệt cho đến nay.

Mở rộng phạm vi kiểm tra của bạn

Tác giả nhanh chóng và linh hoạt của các bài kiểm tra đầu cuối do AI cung cấp-được xây dựng cho quy mô.

Bắt đầu thử nghiệm miễn phí

Cách tạo bộ chọn CSS

Hãy để sử dụng cùng một hình ảnh mà chúng tôi đã làm trước đó, với một trang tìm kiếm được hiển thị. Bạn có thể làm điều này trên bất kỳ trang web nào bằng cách nhấp chuột phải và chọn phần tử kiểm tra. Bạn sẽ có thể tạo bộ chọn CSS giống như chúng tôi đã làm với XPath.Inspect Element. You should be able to create the CSS selector just as we did with the XPath.

Trong trường hợp này, bộ chọn CSS sẽ trông như thế này.

div>form>div>button>form>div>button

Lưu ý mức độ dễ dàng hơn khi đọc bộ chọn CSS so với XPath. Bạn có thể đọc điều này là, nút Nút là một yếu tố con của div bên trong một biểu mẫu, chính nó nằm trong bộ chọn loại div.

Để bao gồm đầy đủ những gì có thể có với bộ chọn thuộc tính CSS, hãy để xem xét một ví dụ đánh dấu cụ thể hơn.

<ul>

& nbsp; & nbsp; & nbsp; & nbsp;<li><ahref="maps.google.com">Google Maps Sub-domain</a></li>

& nbsp; & nbsp; & nbsp; & nbsp; liên kết dịch vụ thư<li><a href="mail.icloud.com">Link toiCloud Mail Services</a></li>

& nbsp; & nbsp; & nbsp; & nbsp; opera mail<li><ahref="mail.opera.com"> Opera Mail</a></li>

& nbsp; & nbsp; & nbsp; & nbsp; dịch vụ gmail<li><ahref="mail.google.com">Gmail Services</a></li>

</ul>

& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; liên kết dịch vụ thư[href^="some value here"]

& nbsp; & nbsp; & nbsp; & nbsp; opera maila> element that includes “mail” as a value. In that case, you’d use the * sign after the href key. This would give you:

& nbsp; & nbsp; & nbsp; & nbsp; dịch vụ gmailmail as the sub-domain.

Bộ chọn áp dụng để tìm các yếu tố cụ thể trong ví dụ trên sẽ trông như thế này.* with a $. You can filter out entries that start with a certain value by using the ^ sign. There are plenty of such signs depending on the rules you’re using for selection.

A [href^= "Một số giá trị ở đây"]

Chẳng hạn, hãy để nói rằng bạn muốn chọn ra phần tử bao gồm cả thư thư & nbsp; làm giá trị. Trong trường hợp đó, bạn đã sử dụng dấu * sau khóa HREF. Điều này sẽ cung cấp cho bạn:

Điều này trả về tất cả các yếu tố nhưng nguyên tố đầu tiên vì nó không có thư là tên miền phụ.

Thế còn các trường hợp mà bạn muốn chọn tất cả các yếu tố kết thúc trong một giá trị nhất định? Sau đó, bạn thay thế * bằng $. Bạn có thể lọc các mục bắt đầu với một giá trị nhất định bằng cách sử dụng ^ dấu. Có rất nhiều dấu hiệu như vậy tùy thuộc vào các quy tắc bạn sử dụng để lựa chọn.

Bây giờ bạn đã có một tour du lịch nhỏ của mỗi lựa chọn. Vậy cái nào phù hợp với bạn?

Sử dụng nào: Bộ chọn XPath hoặc CSS?

Ngoài ra, nếu bạn sử dụng Testim, làm việc ở mặt trước khi tạo các thử nghiệm tự động cũng giúp bạn dễ dàng triển khai sản phẩm nhanh hơn. Bạn có thể sử dụng ít kỹ năng quan trọng hơn để lặp lại giai đoạn thử nghiệm và phản hồi của vòng đời phát triển sản phẩm.

Đọc gì tiếp theo

Hiểu XPath

Xpath nào có thể được thay thế bằng bộ chọn CSS dễ dàng?

XPath là một trong những chiến lược định vị được sử dụng nhiều nhất trong tự động hóa selen. Chúng tôi có thể thay thế hầu hết các Xpath bằng các bộ chọn CSS trong tự động hóa WebDriver. CssSelector sẽ hoạt động tốt với IE mà không có vấn đề gì.most of the xpaths with css selectors in WebDriver automation. CssSelectors will work fine with IE without any problem.

Bộ chọn CSS có tốt hơn XPath không?

Ưu điểm và nhược điểm của hiệu suất của bộ chọn CSS là giống nhau hoặc nhanh hơn so với XPath. Dễ học hơn XPath, dễ sử dụng hơn. Bộ chọn CSS chỉ cho phép lưu lượng đơn hướng. Sử dụng bộ chọn CSS, chúng ta chỉ có thể đi từ cha mẹ sang con nhưng không phải từ trẻ đến cha mẹ, điều này có thể xảy ra 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.

Bộ chọn CSS nhanh hơn XPath?

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.Chúng ngắn hơn và dễ đọc và hiểu hơn nhiều.Tuy nhiên, có một số tình huống bạn cần sử dụng XPath thay vì CSS, như khi tìm kiếm phần tử cha hoặc tìm kiếm một phần tử bằng văn bản của nó.. They are much shorter and easier to read and understand. However, there are some situations where you need to use XPath instead of CSS, like when searching for a parent element or searching for an element by its text.

Tại sao chúng ta không thể sử dụng bộ chọn CSS thay vì XPath?

CSS có hiệu suất và tốc độ tốt hơn XPath.XPath cho phép nhận dạng với sự trợ giúp của văn bản có thể nhìn thấy xuất hiện trên màn hình với chức năng trợ giúp của văn bản ().CSS không có tính năng này.CSS tùy chỉnh có thể được tạo trực tiếp với sự trợ giúp của ID và lớp thuộc tính.. Xpath allows identification with the help of visible text appearing on screen with the help of text() function. Css does not have this feature. Customized css can be created directly with the help of attributes id and class.