Tôi có thể sử dụng XPath trong CSS không?
Nếu bạn hào hứng với thử nghiệm tự động thông qua giao diện web (e. g. sử dụng Selenium WebDriver), bạn có thể dành nhiều thời gian làm việc để tìm kiếm các phần tử như nút, trường nhập liệu và khối. Việc tìm kiếm các phần tử phù hợp có thể khó khăn, đặc biệt là khi chúng không có mã định danh hoặc tên lớp duy nhất. Bài viết này sẽ giúp bạn viết bộ chọn XPath và CSS để tìm các phần tử web một cách hiệu quả Show
Bộ chọn là gì và tại sao chúng lại quan trọng?Trước khi tiến hành, có hai điều chúng ta cần làm rõ
Chúng ta hãy xem bốn thuộc tính của một công cụ định vị tốt
Các loại Locator trong SeleniumBiết các loại thiết bị định vị chỉ là bước đầu tiên để có thể sử dụng chúng một cách hợp lý. Điều đặc biệt quan trọng là phải biết cách sử dụng chúng khi bạn làm việc với Selenium Có nhiều bộ chọn khác nhau mà bạn có thể sử dụng trong tập lệnh của mình. Các bộ định vị có thể được sử dụng trong Selenium được chia thành các loại sau
Tên, ID và bộ chọn dựa trên thuộc tính khá rõ ràng. Chúng cũng rất đơn giản và là dạng bộ chọn ít hữu ích nhất. Bộ chọn XPath và CSS phức tạp linh hoạt và hữu ích hơn nhiều CSS và XPath trong SeleniumBộ chọn XPath và Đặc điểm của chúngXPath là gì và việc sử dụng XPath trong Selenium là gì? . Vì nhiều trình duyệt hỗ trợ XHTML nên chúng ta có thể sử dụng XPath để định vị các thành phần trong trang web Một sự khác biệt quan trọng giữa các bộ định vị CSS và XPath trong Selenium là CSS tìm kiếm các phần tử đi xuống DOM, trong khi XPath cho phép bạn điều hướng cả lên và xuống. Điều này có nghĩa là bằng cách sử dụng XPath, bạn có thể tìm thấy các phần tử web con và sau đó dễ dàng nắm bắt cha mẹ hoặc tổ tiên khác của chúng. Tuy nhiên, tùy thuộc vào biểu thức XPath, nó có thể hơi khó đọc Cú pháp của XPath khá đơn giản // tên thẻ[@attribute=’value‘] Ở đâu
Dưới đây là một ví dụ đơn giản để giúp bạn hiểu cách bộ chọn được xây dựng. Hãy tưởng tượng bạn muốn chọn một nút bên trong một biểu mẫu. Nút này có ID 'gửi' và thuộc loại nút '. ' Vì vậy, XPath sẽ là submitButton = //button[@id=’submit’] Có nhiều biểu thức XPath và chúng có thể phức tạp và phức tạp hơn nhiều so với biểu thức này. Bạn có thể xâu chuỗi nhiều phần tử lại với nhau, sử dụng các toán tử logic và thậm chí điều hướng cấu trúc tài liệu bằng cách sử dụng 'parent. ’ Tóm lại, bạn luôn có thể tạo một XPath sẽ xác định duy nhất bất kỳ thành phần nào trong giao diện người dùng của bạn, nhưng nó có thể khá phức tạp và dài Nếu bạn muốn điều hướng tới và lui qua các thành phần trong DOM, XPath Axes rất hữu ích. Một trục biểu thị mối quan hệ với nút bối cảnh (hiện tại) và được sử dụng để xác định vị trí các nút liên quan đến nút đó trên cây. (https. //www. w3schools. com/xml/xpath_axes. asp Một số trục XPath hữu ích và kết quả của chúng được cung cấp trong bảng bên dưới Tên trục XPathResultancestorChọn tất cả tổ tiên (cha mẹ, ông bà, v.v. ) của thuộc tính nút hiện tạiChọn tất cả các thuộc tính của nút con hiện tạiChọn tất cả con của nút con cháu hiện tạiChọn tất cả con cháu (con, cháu, v.v. ) của nút hiện tại và chính nút hiện tạikhông gian tênChọn tất cả các nút không gian tên của nút hiện tạiChọn nút hiện tạiBạn có thể tìm thấy nhiều ví dụ hơn tại liên kết sau Ưu điểm của việc sử dụng XPath
Có hai chức năng hữu ích khác mà chúng ta nên đề cập. bình thường hóa không gian và dịch. Hàm 'chuẩn hóa không gian' trong XPath bỏ qua tất cả các khoảng trắng thừa (lặp lại, đầu, cuối) trong chuỗi đích, có nghĩa là văn bản chuyển thành phiên bản câu bình thường mà không có bất kỳ ngắt dòng nào. Hàm 'translate' đánh giá một chuỗi và một bộ ký tự sẽ được dịch và trả về chuỗi đã dịch. Ví dụ, translate (hello, hl, sr) sẽ trả về một chuỗi “serro. ” Bộ chọn CSS và đặc điểm của chúngBộ chọn CSS là gì? . Khả năng đọc của chúng tốt hơn XPath trong một số trường hợp. Có ba loại bộ chọn CSS
Các phần tử HTML như h1, p và a thuộc nhóm bộ chọn đơn giản. Bộ kết hợp chứa một số bộ định vị CSS đơn giản và xác định mối quan hệ giữa chúng. Toán tử con 'div > a' hoặc toán tử anh em liền kề 'h3 + img' là những ví dụ về điều này. Như tên gọi của nó, bộ chọn giả bao gồm các lớp giả và phần tử giả, chẳng hạn như. di chuột, p. chữ cái đầu tiên Bộ chọn CSS tuân theo một cú pháp đơn giản tên thẻ [thuộc tính = giá trị] Trong khi với XPath
Ví dụ: nếu bạn cần tìm một hình ảnh có văn bản thay thế 'bộ chọn học tập', thì bộ chọn thích hợp sẽ là img[alt=’bộ chọn học tập’]. Nếu bạn cần tìm một phần tử theo lớp hoặc ID của nó, điều đó càng trở nên dễ dàng hơn. Giả sử chúng ta cần tìm một phần tử div có lớp ‘endless’ và một phần tử khác có ID duy nhất là ‘vacation. ' Bộ chọn sẽ là div. tương ứng là vô tận và #vacation Bộ chọn CSS rất tốt để tìm các phần tử trong DOM hiện tại. Chúng cũng là lựa chọn tốt nhất để chọn các phần tử có trạng thái thay đổi, chẳng hạn như các chú giải công cụ chỉ xuất hiện khi con chuột di chuột qua một phần tử Ưu điểm của việc sử dụng Bộ chọn CSS
Khi bạn đã viết một biểu thức XPath hoặc bộ chọn CSS, có thể bạn sẽ muốn kiểm tra nó. Bạn có thể làm điều này với DevTools tích hợp sẵn từ trình duyệt của mình. Để thực hiện việc này, bạn nên thực thi các mã thông báo $x(“some_xpath”) hoặc $$(“css-selector”) trong bảng điều khiển, điều này sẽ đánh giá và xác thực các bộ chọn Sự khác biệt giữa bộ chọn XPath và CSSNhững người khác nhau thực hiện các cách tiếp cận khác nhau khi quyết định giữa bộ chọn XPath và CSS, nhưng đó là về sở thích cá nhân hơn là về ưu và nhược điểm của chính các tùy chọn đó Sự khác biệt chính giữa bộ chọn XPath và CSS là với XPath, chúng ta có thể di chuyển cả về phía trước và phía sau, trong khi bộ chọn CSS chỉ di chuyển về phía trước. Tuy nhiên, cộng đồng Selenium đã ghi lại rõ ràng rằng bộ chọn CSS có những ưu điểm khác sau đây so với bộ chọn CSS
Dưới đây là một vài ví dụ để so sánh cú pháp của bộ định vị XPath và CSS ConditionCSS selectorXPathAll elements*//*All elementsp//pAll child elementsp>*//p/*Select by id#start//*[@id=’start’]Select by class.start//*[contains(@class,’start’)]Select by attribute*[title]//*[@title]First child of all p>*:first-child//p/*[0]All elements with a child not possible to find//p[a]Next elementp + *//p/following-sibling::*[0]Previous elementnot possible to find//p/preceding-sibling::*[0]
Tóm lại, bộ chọn CSS thuận tiện hơn khi sử dụng khi xử lý các lớp, ID và tên thẻ. Lời khuyên của tôi là sử dụng bộ chọn CSS cho các truy vấn đơn giản dựa trên các thuộc tính của phần tử. Nó đặc biệt hữu ích khi chúng ta tìm kiếm thông tin không có trong DOM (sử dụng bộ chọn giả), như “a. đã truy cập”, “đầu vào. tập trung”, v.v. 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 nhiều và dễ đọc và dễ hiểu hơn. Tuy nhiên, có một số trường hợp bạn cần sử dụng XPath thay vì CSS, chẳng hạn như khi tìm kiếm phần tử cha hoặc tìm kiếm phần tử theo văn bản của nó Các phương pháp hay nhất để chọn và sử dụng bộ chọnViệc chọn thiết bị định vị tốt nhất có thể gặp rất nhiều rắc rối, đặc biệt là khi có quá nhiều yếu tố. Những từ như “bộ kết hợp” và “tính đặc hiệu” được liệt kê là những điều quan trọng nhất cần xem xét, nhưng một số nguồn nổi tiếng nói rằng nên tránh sử dụng ID (tùy chọn cụ thể nhất) bằng mọi giá. Một nhà phát triển kém hoặc QA phải làm gì khi họ điều hướng bối cảnh xếp tầng của biểu định kiểu?
Thuộc tính ngữ nghĩa trong DOM được thể hiện dưới dạng ID, lớp hoặc thuộc tính khác. Ví dụ, một. giá là một công cụ định vị tốt vì giá là một đặc điểm ngữ nghĩa. Mặt khác, một. hover-light kém vì hover-light có lẽ không phải là một tính năng ngữ nghĩa
Và một lời khuyên nữa. khi chúng ta có một số bộ định vị với cùng một điểm neo, sẽ hợp lý khi khai báo một biến riêng cho điểm neo. Bằng cách đó, nếu neo thay đổi, bạn sẽ chỉ phải cập nhật một giá trị biến thay vì tất cả các bộ định vị hậu duệ có liên quan
Hoặc bạn có thể sử dụng một số mảnh của cùng một thuộc tính. li[id=^select2-country_code][id$=US]. Trong ví dụ này, chúng tôi nêu phần đầu và phần cuối của ID của phần tử Một ví dụ khác a[href*=user_edit]. not([href$=’user_id=1’]) tìm thấy một phần tử không đáp ứng một thuộc tính cụ thể, trong trường hợp này. không được sử dụng
Tài nguyên hữu íchĐể kết thúc, tôi muốn cung cấp cho bạn một số tài nguyên hữu ích để xử lý bộ chọn. Nếu bạn có ứng dụng web, trình kiểm tra CSS và XPath trong tiện ích mở rộng của Chrome sẽ rất hữu ích. Nếu bạn dán bộ chọn của mình vào đó, phần tử sẽ được tô sáng trên trang cùng với một số phần tử phù hợp. https. //trình duyệt Chrome. Google. com/webstore/detail/css-and-xpath-checker/aoinfihhckpkkcpholfhmkeplbhddipe?hl=vi Dưới đây là hình ảnh mô tả cách viết chính xác tất cả các loại bộ chọn XPath và CSS khác nhau. Nó sẽ giúp bạn xây dựng các bộ chọn từ đầu và giải quyết các vấn đề khi viết các bộ chọn phức tạp. https. //www. cổng đỏ. com/simple-talk/wp-content/uploads/imported/1269-Locators_table_1_0_2. pdf?file=4937 Đây là một tài nguyên thú vị giúp làm rõ những gì được viết trong chính bộ định vị CSS. Tất cả những gì bạn phải làm là dán một bộ chọn vào đây và bạn sẽ nhận được lời giải thích. https. //kittygiraudel. github. io/bộ chọn-giải thích/ Cuối cùng nhưng không kém phần quan trọng, CRISP là tiện ích mở rộng của Google Chrome dành cho thử nghiệm tự động, tạo mã thử nghiệm và tự động hóa các hoạt động tốn thời gian trong quá trình phát triển thử nghiệm Tôi có nên sử dụng Bộ chọn XPath hoặc CSS không?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 nhiều và dễ đọc và dễ hiểu hơn.
Tại sao chúng tôi sử dụng XPath thay vì CSS?Ưu điểm của việc sử dụng XPath
. 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—kể cả các phiên bản Internet Explorer cũ hơn mà một số công ty vẫn sử dụng). Tạo trong XPath linh hoạt hơn trong CSS Selector
Làm cách nào để viết XPath và CSS trong selen?Nhập “css=input[type='submit']” (giá trị định vị) trong Selenium IDE. Bấm vào nút Tìm. Nút “Đăng nhập” sẽ được tô sáng, xác minh giá trị của bộ định vị. Thuộc tính. Được sử dụng để tạo Bộ chọn CSS
Làm cách nào để chuyển đổi XPath sang CSS Selector?Hướng dẫn sử dụng . Kéo và thả tệp của bạn hoặc sao chép và dán văn bản của bạn vào trình chỉnh sửa ở trên Biểu thức Xpath của bạn được tự động chuyển thành CSS Selector Nhấp vào nút "Tải xuống CSS" để tải xuống kết quả Bạn cũng có thể sao chép Bộ chọn CSS vào khay nhớ tạm bằng cách nhấp vào nút "Sao chép vào khay nhớ tạm" |