Hướng dẫn is it better to use css selector or xpath? - sử dụng css selector hay xpath thì tốt hơn?

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 là 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.

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

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.

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.

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.

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

& 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?

Khi bạn triển khai phần mềm một sản phẩm cho một nhóm người dùng, thời gian thường là điều cốt yếu. Chỉ riêng tuyên bố này sẽ cho bạn biết tùy chọn nào là tốt hơn cho bạn sử dụng. Nếu người thử nghiệm phần mềm của bạn quyết định tự tạo các tập lệnh tự động hóa thử nghiệm, sử dụng tùy chọn mà họ đã có kinh nghiệm là cách để đi. Bên cạnh đó, sự khác biệt về thời gian thực hiện giữa các bộ chọn XPath và CSS không phải là bạn có thể làm công việc có ý nghĩa trong khi những người khác chờ đợi. Một sự khác biệt không đáng kể như vậy có nghĩa là cả hai tùy chọn có thể chạy cổ và cổ cho bạn vào thời điểm này.

Như tôi đã đề cập khi bắt đầu bài viết này, môi trường của bạn khởi động nhiều hơn bất kỳ biến nào khác. Một yếu tố hạn chế khi xử lý các bộ chọn là thực tế là chúng trở nên phức tạp hơn khi loại yếu tố phát triển từ đơn giản đến giả sang các bộ kết hợp. Nhiều bộ chọn cũng sẽ làm cho nó phức tạp hơn để thậm chí sử dụng các bộ chọn ngay từ đầu.

Phải có một cách tốt hơn để thực hiện tự động hóa thử nghiệm! bạn có thể nói. Như với hầu hết các quy trình lặp đi lặp lại, trí tuệ nhân tạo đang bắt đầu ảnh hưởng đến cả hai tùy chọn. Các dịch vụ như Testim đã tìm ra những cách nhanh hơn và trực quan hơn để chạy các bài kiểm tra trên các yếu tố trên DOM.

Tại sao bạn thích XPath hơn bộ chọn CSS?

Bộ định vị nào nhanh hơn trong Selenium CSS hoặc XPath?