Bộ chọn CSS trong Selenium

Bởi: Krishna rừng ta Krishna rừng ta
Hours cập nhật

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”.

Thẻ và id - Bộ chọn CSS

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à id - Bộ chọn CSS

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”.

Thẻ và lớp - Bộ chọn CSS

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.

Thẻ và lớp - Bộ chọn CSS

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.

Thẻ và lớp - Bộ chọn CSS

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à lớp - Bộ chọn CSS

NHỮNG BÀI VIẾT LIÊN QUAN

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”).

Thẻ và thuộc tính - Bộ chọn CSS

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.

Thẻ và thuộc tính - Bộ chọn CSS

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.

Thẻ, lớp và thuộc tính - Bộ chọn CSS

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.

Thẻ, lớp và thuộc tính - Bộ chọn CSS

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.

Thẻ, lớp và thuộc tính - Bộ chọn CSS

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.

Văn bản bên trong - Bộ chọn CSS

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.

Văn bản bên trong - Bộ chọn CSS

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ó.

Văn bản bên trong - Bộ chọn CSS

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]