Khi nào nên sử dụng Bộ chọn CSS trong Selenium?

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

1) 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

Khi nào chúng ta nên sử dụng bộ chọn CSS?

Tôi có nên sử dụng bộ chọn XPath hoặc CSS không?

Lợi thế khi sử dụng CSS chọn theo lớp là gì?

Làm cách nào để sử dụng bộ chọn CSS trong XPath?