Bộ chọn CSS trong Selenium
Krishna rừng ta
Bộ chọn CSS là gì?
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, nhưng đây là chiến lược định vị phổ biến nhất của các phương pháp nâng cao. Selenium người dùng vì nó có thể truy cập ngay cả những phần tử không có ID hoặc tên.
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
- Thẻ và ID
- Thẻ và lớp
- Thẻ và thuộc tính
- Thẻ, lớp và thuộc tính
- Văn bản bên trong
Khi sử dụng chiến lược này, chúng tôi luôn đặt tiền tố Target hộp có “css=" như sẽ được hiển thị trong các ví dụ sau.
thẻ và id – Bộ chọn CSS
Một lần nữa, chúng ta 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 ta đã truy cập vào nó trong phần "Định vị theo ID". Lần này, chúng ta sẽ sử dụng Selenium Bộ chọn CSS có ID để truy cập chính phần tử đó.
cú pháp
css=tag#id
- tag = thẻ HTML của phần tử đang được truy cập
- # = dấu băm. Điều này phải luôn hiện diện khi sử dụng một Selenium Bộ chọn CSS có ID
- id = ID của phần tử đang được truy cập
Hãy nhớ rằng ID luôn đứng trước dấu thăng (#).
Bước 1) 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à “input” 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 Target hộp của Selenium IDE và nhấp vào nút Tìm. Selenium IDE sẽ có thể làm nổi bật phần tử đó.
thẻ và lớp – Bộ chọn CSS
Bộ chọn CSS trong Selenium việc 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
css=tag.class
- tag = thẻ HTML của phần tử đang được truy cập
- . = dấu chấm. Điều này phải luôn xuất hiện khi sử dụng Bộ chọn CSS với lớp
- class = lớp của phần tử đang được truy cập
Bước 1) Tới trang demo https://demo.guru99.com/test/facebook.html và sử dụng Firebug để kiểm tra hộp văn bản “Email hoặc Điện thoại”. Lưu ý rằng thẻ HTML của nó là “input” và lớp của nó là “inputtext”.
Bước 2) In Selenium IDE, nhập “css=input.inputtext” vào Target hộp và nhấp vào Tìm. Selenium IDE phải có khả năng nhận dạng hộp văn bản Email hoặc Điện thoại.
Hãy lưu ý rằng khi nhiều phần tử có cùng thẻ và tên HTML, chỉ phần tử đầu tiên trong mã nguồn mới được nhận dạng. Sử dụng Firebug, hãy kiểm tra hộp văn bản Mật khẩu trong Facebook và lưu ý rằng hộp này có tên giống với hộp văn bản Email hoặc Điện thoại.
Lý do tại sao chỉ có 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ì hộp này xuất hiện đầu tiên trong nguồn trang của Facebook.
thẻ và thuộc tính – Bộ chọn CSS
Chiến lược này sử dụng thẻ HTML và thuộc tính cụ thể của phần tử cần truy cập.
cú pháp
css=tag[attribute=value]
- tag = thẻ HTML của phần tử đang được truy cập
- [ và ] = dấu ngoặc vuông trong đó một thuộc tính cụ thể và giá trị tương ứng của nó sẽ được đặt
- thuộc tính = thuộc tính được sử dụng. Bạn nên sử dụng thuộc tính duy nhất cho thành phần như tên hoặc ID.
- value = giá trị tương ứng của thuộc tính được chọn.
Bước 1) Hướng đến Mercury Trang đăng ký tour https://demo.guru99.com/test/newtours/register.php và kiểm tra hộp văn bản “Họ”. Lưu ý thẻ HTML (“input” trong trường hợp này) và tên (“lastName”).
Bước 2) In Selenium IDE, hãy nhập “css=input[name=lastName]” vào Target hộp và nhấp vào Tìm. Selenium IDE phải có thể truy cập vào hộp Họ thành công.
Khi nhiều phần tử có cùng thẻ và thuộc tính HTML, chỉ phần tử đầu tiên sẽ được nhận dạng. Hành vi này tương tự như việc định vị các phần tử bằng bộ chọn CSS có cùng thẻ và lớp.
thẻ, lớp và thuộc tính – Bộ chọn CSS
cú pháp
css=tag.class[attribute=value]
- tag = thẻ HTML của phần tử đang được truy cập
- . = dấu chấm. Điều này phải luôn xuất hiện khi sử dụng Bộ chọn CSS với lớp
- class = lớp của phần tử đang được truy cập
- [ và ] = dấu ngoặc vuông trong đó một thuộc tính cụ thể và giá trị tương ứng của nó sẽ được đặt
- thuộc tính = thuộc tính được sử dụng. Bạn nên sử dụng thuộc tính duy nhất cho thành phần như tên hoặc ID.
- value = giá trị tương ứng của thuộc tính được chọn.
Bước 1) Tới trang demo https://demo.guru99.com/test/facebook.html và sử dụng Firebug để kiểm tra các hộp nhập 'Email hoặc Điện thoại' và 'Mật khẩu'. Lưu ý thẻ HTML, lớp và thuộc tính của chúng. Đối với ví dụ này, chúng tôi sẽ chọn thuộc tính 'tabindex' của chúng.
Bước 2) Chúng ta sẽ truy cập hộp văn bản 'Email hoặc Điện thoại' trước. Do đó, chúng ta sẽ sử dụng giá trị tabindex là 1. Nhập "css=input.inputtext[tabindex=1]" vào Selenium IDE's Target và nhấp vào Tìm. Hộp nhập 'Email hoặc Điện thoại' sẽ được tô sáng.
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=input.inputtext[tabindex=2]” vào Target hộp và nhấp vào nút Tìm. Selenium IDE phải có khả năng xác định hộp văn bản Mật khẩu thành công.
văn bản bên trong – Bộ chọn CSS
Như bạn có thể nhận thấy, nhãn HTML hiếm khi được cung cấp các thuộc tính id, name hoặc class. Vì vậy, làm thế nào để chúng ta truy cập chúng? Câu trả lời là thông qua việc sử dụng các văn bản bên trong của họ. 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
css=tag:contains("inner text")
- tag = thẻ HTML của phần tử đang được truy cập
- văn bản bên trong = văn bản bên trong của phần tử
Bước 1) Hướng đến Mercury Trang chủ của các tour du lịch https://demo.guru99.com/test/newtours/ và sử dụng Firebug để điều tra nhãn “Mật khẩu”. Hãy lưu ý đến thẻ HTML của nó (trong trường hợp này là “phông chữ”) và lưu ý rằng nó không có thuộc tính lớp, id hoặc tên.
Bước 2) Kiểu css=font:contains(“Mật khẩu:”) trong Selenium IDE's Target hộp 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, thay thế văn bản bên trong bằng “Boston” để Target bây giờ sẽ trở thành “css=font:contains(“Boston”)”. Nhấp vào Tìm. Bạn sẽ thấy nhãn “Boston to San Francisco” được tô sáng. Đ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ỉ nhập từ đầu tiên của văn bản bên trong nó.
Tổng kết
Cú pháp định vị bằng cách sử dụng CSS Selector
| Phương pháp | Target cú pháp | Ví dụ |
|---|---|---|
| Thẻ và ID | css=thẻ#id | css=đầu vào#email |
| Thẻ và Lớp | css=tag.class | css=input.inputtext |
| Thẻ và thuộc tính | css=tag[thuộc tính=giá trị] | css=đầu vào[name=lastName] |
| Thẻ, lớp và thuộc tính | css=tag.class[thuộc tính=giá trị] | css=input.inputtext[tabindex=1] |