Bộ chọn CSS trong Selenium với ví dụ là gì?
|
Xin chào tất cả các bạn, Bộ chọn CSS trong Selenium sẽ được giải thích trong hướng dẫn này, tôi sẽ mô tả cho bạn cách viết Bộ định vị CSS hiệu quả để hỏi các phần tử web cho các dự án tự động hóa của bạn. Theo nguyên tắc chung, chiến lược thẩm vấn của bạn nên theo thứ tự dưới đây Show
Bộ chọn CSS trong Chiến lược Selenium
Cú pháp cơ bảnID#idnameLớp. tên lớp1) Sử dụng Đường dẫn tuyệt đối Bộ chọn CSSBạn nên sử dụng dấu > để tiếp cận trực tiếp một phần tử. (Ghi chú. Đối với XPath, chúng tôi sử dụng / ký cho điều này. ) Ví dụ Cú pháp. form>div>input  2) Sử dụng Đường dẫn không tuyệt đối Bộ chọn CSSBạn nên sử dụng khoảng trắng giữa các thẻ để định vị phần tử. Sử dụng ". ” cho lớp và “#” cho id. Ví dụ Cú pháp. biểu mẫu. nhóm biểu mẫu #thông báo người dùng 3) Sử dụng Tên thẻ Bộ chọn CSS trong SeleniumBạn có thể viết trực tiếp tên thẻ như “form”, “div”, “img”,”body”, v.v. Như hình bên dưới, tôi đã viết thẻ “form” để định vị phần tử form. Ví dụ 4) Sử dụng Bộ ba Thẻ & Thuộc tính & Giá trịBạn có thể sử dụng cú pháp tag[attribute=’value’] . Ví dụ Cú pháp. input[id=’user-message’] 5) Sử dụng Chứa văn bản của thuộc tínhBạn có thể sử dụng thẻ[thuộc tính*=’chứa văn bản’] cú pháp. Ví dụ Cú pháp. input[id*=’er-messa’] 6) Sử dụng Văn bản bắt đầu của thuộc tínhBạn có thể sử dụng cú pháp tag[attribute^=’starting text’] . Ví dụ Cú pháp. đầu vào[id^=’người dùng’] 7) Sử dụng Văn bản kết thúc của thuộc tínhBạn có thể sử dụng cú pháp tag[attribute$=’ending text’] . Ví dụ Cú pháp. input[id$=’message’] 8) Sử dụng Toán tử dấu phẩy để triển khai OR Hoạt độngBạn có thể sử dụng Toán tử “,” giữa hai câu lệnh định vị CSS. Ví dụ Cú pháp. form#get-input,input#user-message 9) Sử dụng Thẻ và ID Bộ chọn CSS trong SeleniumBạn có thể sử dụng “Tag#Id” Ví dụ Cú pháp. input#user-message 10) Sử dụng Thẻ và Lớp Bộ chọn CSS trong SeleniumBạn có thể sử dụng “Gắn thẻ. Lớp học” Ví dụ Cú pháp. đầu vào. kiểm soát biểu mẫu 11) Sử dụng loại đầu tiên Bộ chọn CSS trong SeleniumBạn có thể sử dụng “Gắn thẻ. hạng nhất”. Nó sẽ chọn phần tử thẻ đầu tiên. Ví dụ Cú pháp. . cành cây>ul>li. hạng nhất 12) Sử dụng last-of-type Bộ chọn CSS trong SeleniumBạn có thể sử dụng “Gắn thẻ. loại cuối cùng” . Nó sẽ chọn phần tử thẻ cuối cùng. Ví dụ Cú pháp. . cành cây>ul>li. hạng nhất Ghi chú. Nếu bạn muốn tìm phần tử hoặc phần tử con cuối cùng, bạn có thể sử dụng các công cụ định vị bên dưới
13) Sử dụng *. loại cuối cùng Bộ chọn CSS trong SeleniumBạn có thể sử dụng “*last-of-type” . Nó sẽ chọn con cuối cùng của thẻ cha. Ví dụ Cú pháp. . tree-branch>ul>*. last-of-type (Chọn con cuối cùng của thẻ cha “ul”. ) 14) Sử dụng t ag. nth-of-type(n) Bộ chọn CSS trong SeleniumBạn có thể sử dụng thẻ “. loại thứ n(n)” . Nó sẽ chọn phần tử thẻ thứ n của danh sách. Ví dụ Cú pháp. . cành cây>ul>li. nth-of-type(3) (Chọn phần tử li thứ 3. ) Ghi chú. Nếu bạn không chỉ định thẻ là *. nth-of-type(3) nó sẽ cho phép bạn chọn con thứ ba. 15) Sử dụng t ag. nth-child(n) Bộ chọn CSS trong SeleniumBạn có thể sử dụng thẻ “. con thứ n(n)” . Nó sẽ chọn đứa con thứ n. Ví dụ Cú pháp. . cành cây>ul>li. nth-child(3) (Nó sẽ chọn con thứ n. ) 16) Sử dụng Toán tử anh em “+” Bộ chọn CSS trong SeleniumBạn có thể sử dụng “E1+ E2“ . Đầu tiên nó tìm E1 rồi chọn E2. HTML mẫu
Cú pháp. li#mercedes + li 'li#automation + li' trước tiên sẽ chuyển đến phần tử li có id 'mercedes' và sau đó chọn li liền kề của nó là mục danh sách 'BMW' Ví dụ Cú pháp. . cành cây>ul>li. nth-child(3) + li (Nó sẽ chọn phần tử tiếp theo. ) 17) Loại trừ Tên lớp CSS trong Bộ định vị CSS SeleniumBạn có thể loại trừ bất kỳ tên lớp nào với. không phải(. tên lớp) cú pháp Ví dụ btn. thông tin btn. kéo sang phải. không phải(. xs-mt-0) Bộ chọn ở trên loại trừ lớp “xs-mt-o” và chọn dòng bên dưới như hình bên dưới Ngoài ra, bạn có thể tìm hiểu cách viết Smart XPath locators trong bài viết dưới đây
Bạn có thể tìm thấy nhiều thủ thuật bên dưới pdf. Tôi đề nghị bạn lưu nó https. //www. cổng đỏ. com/simple-talk/wp-content/uploads/imported/1269-Locators_table_1_0_2. pdf?file=4937 Hẹn gặp lại bạn trong bài viết tiếp theo ;) Onur Baskirt Onur Baskirt là một chuyên gia CNTT cao cấp với hơn 15 năm kinh nghiệm. Bây giờ, anh ấy đang làm việc với tư cách là Cố vấn kỹ thuật cao cấp tại Emirates Airlines ở Dubai Bộ chọn CSS trong Selenium là gì?Bộ chọn CSS là gì? . Giống như XPath trong Selenium, bộ chọn CSS có thể định vị các phần tử web mà không cần ID, lớp hoặc Tên. combines an element selector and a selector value that can identify particular elements on a web page. Like XPath in Selenium, CSS selectors can locate web elements without ID, class, or Name.
Ví dụ về bộ chọn CSS là gì?Bộ chọn CSS chọn (các) thành phần HTML bạn muốn tạo kiểu.
. Tất cả các bộ chọn CSS đơn giản Làm cách nào để sử dụng bộ chọn CSS cho danh sách thả xuống trong Selenium?Hãy thử sử dụng đoạn mã sau. Select dd = new Select(driver. findElement(By. cssSelector("select[title='Sắp xếp theo']"))); . .
Làm cách nào để sử dụng bộ chọn CSS trong XPath?Tìm Bộ chọn CSS hoặc XPath . Nhấp chuột phải vào một yếu tố Chọn Kiểm tra Xác định vị trí phần tử trong bảng Thành phần của Công cụ dành cho nhà phát triển Nhấp chuột phải vào dòng của phần tử Chọn Sao chép -> Sao chép Bộ chọn hoặc Sao chép -> Sao chép XPath Dán kết quả vào trường ID của một hành động |
