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
- Trước tiên hãy thử sử dụng Id, tên, lớp, v.v.
- Sau đó, hãy thử thẩm vấn bằng CSS
- Sau đó, sử dụng XPath để tìm các phần tử
Bộ chọn CSS trong Chiến lược Selenium
Trang Demo tham khảo. http. //www. selen dễ dàng. com/test/basic-first-form-demo. html
Cú pháp cơ bản
ID#idnameLớp. tên lớp1) Sử dụng Đường dẫn tuyệt đối Bộ chọn CSS
Bạ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 CSS
Bạ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 Selenium
Bạ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.
(Lưu ý. Đối với XPath, chúng tôi sử dụng //tagname cho việc này. )
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’] .
(Lưu ý. Đối với XPath, chúng tôi sử dụng tag[@attribute=’value’] cho việc này. )
Ví dụ
Cú pháp. input[id=’user-message’]
5) Sử dụng Chứa văn bản của thuộc tính
Bạn có thể sử dụng thẻ[thuộc tính*=’chứa văn bản’] cú pháp.
(Lưu ý. Đối với XPath, chúng tôi sử dụng tag[contains((@attribute,'contained text')] cho việc này. )
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ính
Bạn có thể sử dụng cú pháp tag[attribute^=’starting text’] .
(Lưu ý. Đối với XPath, chúng tôi sử dụng tag[starts-with( @attribute, 'starting text')] cho việc này. )
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ính
Bạ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 động
Bạ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 Selenium
Bạ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 Selenium
Bạ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 Selenium
Bạ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 Selenium
Bạ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
- Nhãn. nth-last-of-type(n)
- Nhãn. nth-con-cuối(n)
13) Sử dụng *. loại cuối cùng Bộ chọn CSS trong Selenium
Bạ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 Selenium
Bạ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 Selenium
Bạn có thể sử dụng thẻ “. con thứ n(n)” . Nó sẽ chọn đứa trẻ 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 Selenium
Bạn có thể sử dụng “E1+ E2“ . Đầu tiên nó tìm E1 rồi chọn E2.
HTML mẫu
<ul id="Cars"> <li id="mercedes">Mercedes made in Germany!</li> <li>BMW</li> <li>Porsche</li> </ul>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 Selenium
Bạ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
Tất cả các chiến thuật Selenium XPath đã được giải thích
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
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