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ả

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õ

• Bộ chọn là gì? . Bộ chọn (bộ định vị) là một đối tượng tìm và trả về các mục web trên một trang dựa trên một truy vấn nhất định
• Tại sao cần phải chọn đúng bộ chọn? . Nếu bộ chọn của bạn quá phức tạp hoặc chứa các thuộc tính thay đổi nhanh chóng trong cấu trúc của nó, thì khả năng thất bại là rất cao

Chúng ta hãy xem bốn thuộc tính của một công cụ định vị tốt

• Sự chính xác. Công cụ định vị sẽ tìm thấy phần tử bạn cần
• độc đáo. Công cụ định vị không được tìm thấy bất kỳ thứ gì khác ngoài phần tử đích hoặc nhóm phần tử
• Đơn giản và rõ ràng. Phải rõ ràng phần tử mà bộ định vị đề cập đến mà không cần kiểm tra nó trong mã
• Sự độc lập. Công cụ định vị của bạn phải phổ biến để nếu có thay đổi đối với giao diện người dùng, nó vẫn phù hợp

Các loại Locator trong Selenium

Biế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

• Công cụ định vị dựa trên tên và ID. Những bộ định vị này cho phép bạn chọn một phần tử theo ID, tên hoặc tên thẻ của nó
• Bộ định vị dựa trên thuộc tính, như văn bản liên kết, văn bản liên kết một phần và tên lớp. Văn bản liên kết và bộ định vị văn bản liên kết một phần được sử dụng khi ít nhất bạn biết một phần văn bản của liên kết trong thẻ neo
• bộ định vị phức tạp. Nhóm này bao gồm các bộ chọn XPath và CSS. Chúng tôi sẽ nói về họ chi tiết hơn nữa trên

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 Selenium

Bộ chọn XPath và Đặc điểm của chúng

XPath 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

• 'tagname' là loại phần tử HTML mà bạn đang tìm kiếm (e. g. div, a, p)
• 'thuộc tính' là thuộc tính của phần tử HTML mong muốn mà bộ định vị của chúng tôi thực hiện tìm kiếm (e. g. lớp học)
• 'giá trị' là giá trị cụ thể bạn muốn khớp

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ại

Bạ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

• XPath cho phép điều hướng lên DOM
• Lựa chọn định vị trong XPath linh hoạt hơn trong CSS Selector
• Nếu bạn không chắc tên của phần tử là gì, bạn có thể sử dụng 'contains' để tìm tất cả các kết quả khớp có thể

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úng

Bộ 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

• Đơn giản – bộ chọn chỉ bao gồm một phần tử trong cấu trúc của chúng (e. g. P. bàn)
• Bộ kết hợp – bộ chọn bao gồm các ký hiệu hoặc khoảng trắng để tách các phần tử. Chúng có thể được sử dụng để chọn các phần tử lồng nhau (e. g. điều hướng ul, p > a)
• Bộ chọn giả – bộ chọn bao gồm các từ khóa mà bạn thêm vào để chọn một phần hoặc trạng thái cụ thể của phần tử (e. g. P. sau, p. chữ cái đầu tiên)

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

• 'tagname' là loại phần tử HTML bạn đang tìm kiếm
• 'thuộc tính' là thuộc tính của phần tử HTML mong muốn mà bộ định vị của chúng tôi thực hiện tìm kiếm (e. g. lớp học)
• 'giá trị' là giá trị cụ thể bạn muốn khớp

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

• Nhanh hơn XPath
• Dễ học và sử dụng hơn XPath
• Nhiều khả năng tìm thấy mục mong muốn

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à CSS

Nhữ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

• Các công cụ XPath khác nhau trong mỗi trình duyệt, khiến chúng không nhất quán
• XPath có xu hướng trở nên phức tạp, khiến nó khó đọc

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ọn

Việ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?

• Trong bộ định vị của bạn, hãy tham khảo các yếu tố và thuộc tính thường không thay đổi. Trước khi viết bộ chọn, bạn cần phân tích ứng dụng và xác định những gì thay đổi thường xuyên và nếu có gì thay đổi thì không sử dụng nó trong bộ định vị
• Bạn sẽ cần sử dụng các tính năng ngữ nghĩa hơn là các tính năng cú pháp. Khi bạn nhìn vào một ứng dụng, chắc chắn bạn có thể đặt tên cho những gì ở đó, nhưng đó không phải là điều quan trọng nhất. Bất kỳ ứng dụng nào cũng giải quyết một số tác vụ cụ thể của người dùng và tác vụ đó có ý nghĩa riêng. Ví dụ: nếu chúng tôi đến một cửa hàng trực tuyến, chúng tôi không quan tâm đến các bảng, liên kết hoặc khối mà một trang chứa; . Đây là những đặc điểm ngữ nghĩa

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

• Kiểm tra tính duy nhất, đặc biệt nếu bạn đang tìm kiếm nhiều mục, để bạn không tìm thấy bất kỳ mục nào thừa. Nếu bạn tìm thấy các phần tử thừa, điều này có nghĩa là các thuộc tính mà bạn đã xác định không đủ để loại bỏ các phần tử thừa và bạn phải tinh chỉnh bộ định vị
• neo là cần thiết. Điều này có nghĩa là tốt hơn nên bắt đầu từ một phần tử duy nhất, ổn định nếu bạn muốn tìm các phần tử con. Hãy xem một ví dụ. Chúng tôi cần tìm một liên kết bên trong một khối tương ứng với mô tả sản phẩm. Bản thân liên kết không có bất kỳ tính năng cụ thể nào nên rất khó tìm, nhưng chúng tôi biết nó nằm trong một khối có sản phẩm đẳng cấp. Khối sản phẩm này và lớp của nó đại diện cho một mỏ neo. Do đó, trong bộ chọn, chúng tôi chỉ định rằng liên kết nằm trong khối với sản phẩm lớp. . sản phẩm a (CSS), //*[chứa(@class,’start’)]//a (XPath)

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

• sử dụng kết hợp. Bạn có thể sử dụng các thuộc tính khác nhau của một phần tử để chỉ chọn phần tử mong muốn. Ví dụ: nếu bạn có một số thành phần khác nhau trong cùng một lớp, bạn có thể sử dụng tên thẻ trong bộ chọn của mình. div. sản phẩm a (CSS), //div[contains(@class,’start’)]//a (XPath)

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

• tránh thái quá. Kết hợp là tốt, nhưng đôi khi bạn có thể áp đặt quá nhiều điều kiện để theo đuổi sự độc đáo. Trong trường hợp này, tất nhiên, bộ định vị sẽ rất chính xác, vì vậy nó sẽ không tìm thấy các phần tử không cần thiết, nhưng nó quá phức tạp
• 'Một nơi nào đó bên trong' hoặc 'trực tiếp bên trong. ’ Chúng ta cần phân biệt giữa hai tình huống. phần tử nằm ngay bên trong phần tử trước đó hoặc chúng tôi không cần biết chính xác vị trí của nó. Trong hầu hết các trường hợp, chúng tôi sử dụng quy tắc 'ở đâu đó bên trong', nhưng nếu có nhiều phần tử tương tự bên trong phần tử gốc và bạn đang sử dụng quy tắc 'ở đâu đó bên trong', thì có thể tìm thấy các phần tử bổ sung. Trong trường hợp này, chúng tôi tinh chỉnh công cụ định vị của mình bằng các ký hiệu ‘>’ trong CSS hoặc ‘/’ thay vì ‘//’ trong XPath, có nghĩa là phần tử đó nằm ngay bên trong phần tử cha
• Không tìm kiếm bằng văn bản. Tìm kiếm bằng văn bản chỉ nên là phương sách cuối cùng. Văn bản thường xuyên thay đổi và các ứng dụng hiện đại có xu hướng quốc tế, vì vậy bộ chọn văn bản rất dễ bị lỗi. Điều này không chỉ áp dụng cho văn bản có thể nhìn thấy trên màn hình mà còn cho các thuộc tính tương ứng với chú giải công cụ và các loại văn bản ẩn
• Không sử dụng số. Ví dụ: không đề cập đến liên kết thứ nhất/thứ hai/thứ ba trong khối, vì thứ tự của các phần tử có thể thay đổi. Tuy nhiên, 'đầu tiên' và 'cuối cùng' có thể là các chức năng hữu ích khi bạn phải làm việc với một mục từ đầu hoặc cuối danh sách, chẳng hạn như nguồn cấp tin tức được sắp xếp theo thời gian xuất bản
• Giao tiếp với các nhà phát triển. Nếu bộ chọn khó viết, không có gì để liên kết hoặc không thể xây dựng các kết hợp, bạn cần yêu cầu nhà phát triển thêm các thuộc tính ngữ nghĩa

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"