Bộ chọn đường dẫn CSS
|
Bộ chọn CSS trong Selenium là các mẫu chuỗi được sử dụng để xác định một phần tử dựa trên sự kết hợp của thẻ HTML, id, lớp và thuộc tính. Định vị bằng Bộ chọn CSS trong Selenium phức tạp hơn các phương pháp trước đây, nhưng đây là chiến lược định vị phổ biến nhất của người dùng Selenium nâng cao vì nó có thể truy cập ngay cả những phần tử không có ID hoặc tên Show Bộ chọn CSS trong Selenium có nhiều định dạng, nhưng chúng tôi sẽ chỉ tập trung vào những định dạng phổ biến nhất. Các loại CSS Locator khác nhau trong Selenium IDE
Khi sử dụng chiến lược này, chúng tôi luôn thêm tiền tố vào hộp Mục tiêu bằng “css=” như sẽ được hiển thị trong các ví dụ sau Bạn sẽ học được gì
thẻ và id – Bộ chọn CSSMột lần nữa, chúng tôi sẽ sử dụng hộp văn bản Email của Facebook trong ví dụ này. Như bạn có thể nhớ, nó có ID là “email” và chúng tôi đã truy cập nó trong phần “Định vị theo ID”. Lần này, chúng tôi sẽ sử dụng Bộ chọn CSS Selenium có ID để truy cập chính phần tử đó cú pháp
Hãy nhớ rằng ID luôn đứng trước dấu thăng (#) Bước 1. Điều hướng đến www. Facebook. com. Sử dụng Firebug, kiểm tra hộp văn bản “Email hoặc Điện thoại” Tại thời điểm này, hãy lưu ý rằng thẻ HTML là “đầu vào” và ID của nó là “email”. Vì vậy cú pháp của chúng ta sẽ là “css=input#email”  Bước 2. Nhập “css=input#email” vào hộp Target của Selenium IDE và nhấp vào nút Find. Selenium IDE sẽ có thể làm nổi bật phần tử đó thẻ và lớp – Bộ chọn CSSBộ chọn CSS trong Selenium sử dụng thẻ HTML và tên lớp cũng tương tự như sử dụng thẻ và ID, nhưng trong trường hợp này, dấu chấm (. ) được sử dụng thay cho dấu thăng cú pháp
Bước 1. Truy cập trang demo Bước 2. Trong Selenium IDE, nhập “css=input. inputtext” trong hộp Target và nhấp vào Find. Selenium IDE sẽ có thể nhận ra hộp văn bản Email hoặc Điện thoại Lưu ý rằng khi nhiều phần tử có cùng thẻ HTML và tên, chỉ phần tử đầu tiên trong mã nguồn sẽ được nhận dạng. Sử dụng Firebug, kiểm tra hộp văn bản Mật khẩu trong Facebook và nhận thấy rằng nó có cùng tên với hộp văn bản Email hoặc Điện thoại Lý do tại sao chỉ hộp văn bản Email hoặc Điện thoại được tô sáng trong hình minh họa trước đó là vì nó xuất hiện đầu tiên trong nguồn trang của Facebook thẻ và thuộc tính – Bộ chọn CSSChiến lược này sử dụng thẻ HTML và một thuộc tính cụ thể của phần tử được truy cập cú pháp
Bước 1. Điều hướng đến trang Đăng ký của Mercury Tours Bước 2. Trong Selenium IDE, nhập “css=input[name=lastName]” vào ô Target và nhấp vào Find. Selenium IDE sẽ có thể truy cập thành công hộp Họ Khi nhiều phần tử có cùng thuộc tính và thẻ HTML, chỉ phần tử đầu tiên được nhận dạng. Hành vi này tương tự như định vị các phần tử bằng cách sử dụng bộ chọn CSS có cùng thẻ và lớp thẻ, lớp và thuộc tính – Bộ chọn CSScú pháp
Bước 1. Truy cập trang demo Bước 2. Trước tiên, chúng tôi sẽ truy cập hộp văn bản 'Email hoặc Điện thoại'. Vì vậy, chúng tôi sẽ sử dụng giá trị tabindex là 1. Nhập “css=đầu vào. inputtext[tabindex=1]” trong ô Target của Selenium IDE và nhấp vào Find. Hộp nhập 'Email hoặc Điện thoại' phải được đánh dấu Bước 3. Để truy cập hộp nhập Mật khẩu, chỉ cần thay thế giá trị của thuộc tính tabindex. Nhập “css=đầu vào. inputtext[tabindex=2]” trong hộp Mục tiêu và nhấp vào nút Tìm. Selenium IDE phải có khả năng xác định thành công hộp văn bản Mật khẩu văn bản bên trong – Bộ chọn CSSNhư bạn có thể nhận thấy, các nhãn HTML hiếm khi được cung cấp các thuộc tính id, tên hoặc lớp. Vì vậy, làm thế nào để chúng ta truy cập chúng? . Văn bản bên trong là các mẫu chuỗi thực tế mà nhãn HTML hiển thị trên trang cú pháp
Bước 1. Điều hướng đến trang chủ của Mercury Tours Bước 2. Nhập css=phông chữ. chứa(“Mật khẩu. ”) vào hộp Mục tiêu Selenium IDE và nhấp vào Tìm. Selenium IDE sẽ có thể truy cập nhãn Mật khẩu như trong hình bên dưới Bước 3. Lần này, hãy thay thế văn bản bên trong bằng “Boston” để Mục tiêu của bạn bây giờ sẽ trở thành “css=font. chứa ("Boston")". Nhấp vào Tìm. Bạn sẽ nhận thấy rằng nhãn “Boston đến San Francisco” được đánh dấu. Điều này cho bạn thấy rằng Selenium IDE có thể truy cập một nhãn dài ngay cả khi bạn chỉ chỉ ra từ đầu tiên của văn bản bên trong của nó Sử dụng CSS Selector hay XPath sẽ tốt hơn?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.
Làm cách nào để viết đường dẫn CSS trong Selenium?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
4 bộ chọn CSS là gì?Bộ chọn CSS . Bộ chọn đơn giản (chọn các phần tử dựa trên tên, id, lớp) Bộ chọn tổ hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng) Bộ chọn lớp giả (chọn các phần tử dựa trên một trạng thái nhất định) Bộ chọn phần tử giả (chọn và tạo kiểu cho một phần của phần tử) 5 loại Bộ chọn CSS là gì?Có nhiều loại bộ chọn cơ bản khác nhau. . Bộ chọn phần tử bộ chọn id Bộ chọn lớp Bộ chọn chung Bộ chọn nhóm Bộ chọn thuộc tính Bộ chọn lớp giả Bộ chọn phần tử giả |
