Bộ chọn CSS trong selen là các chuỗi mẫu đượ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. Vị trí được xác định bởi các 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ị biến phổ biến nhất của người dùng Selenium tiên tiến vì nó có thể truy cập ngay cả những yếu tố không có ID hoặc không có ID hoặc
Nội dung chính Hiển thị
- CSS select is what?
- Tag và ID - Select CSS
- Tag và Layer - CSS Selective
- Tag và Layer - CSS Selective
- Tag và Layer - CSS Selective
- Văn bản bên trong - Bộ chọn CSS
- BẢNG XÁC SUẤT
- Sự khác biệt giữa CSS và XPath là gì?
- Cái nào tốt hơn để sử dụng CSS hoặc XPath?
- Tại sao CSS lại được ưa chuộng hơn XPath?
- Cái nào nhanh hơn CSS hoặc XPath?
Bộ chọn CSS trong selen có nhiều định dạng, nhưng chúng tôi sẽ chỉ tập trung vào các định dạng phổ biến nhất. Các loại định vị CSS khác nhau trong Selenium ide
- Thẻ và Id
- Gắn thẻ và lớp học
- Tag and property
- Tag, Layer và các 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 có hộp tiền tố đích với CSS CSS =, như sẽ được hiển thị trong các ví dụ sau
Tag và ID - Select CSS
Một lần nữa, chúng tôi sẽ sử dụng hộp văn bản email Facebook Facebook trong ví dụ này. Như bạn có thể nhớ, nó có ID của email và chúng tôi đã truy cập nó trong phần định vị của ID ID. Lần này, chúng tôi sẽ sử dụng bộ chọn Selenium CSS có ID trong quá trình truy cập vào yếu tố chính đó
cú pháp
css=tag#id
- Tag = thẻ HTML của phần tử đang được truy cập
- # = hash. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
- id = id của phần tử đang được truy cập
Hãy nhớ rằng ID luôn đi trước một dấu hiệu trùm [#]
Bước 1. Điều hướng đến www. Facebook. com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. Đ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 của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email
Bước 2. Nhập CSS CSS = Input#Email vào mục tiêu của Selenium IDE và nhấp vào nút Tìm kiếm. Selenium IDE sẽ có thể làm nổi bật yếu tố đó. 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ử đó
Tag và Layer - CSS Selective
Bộ chọn CSS trong selen bằng thẻ HTML và lớp tương tự sử dụng như tên thẻ và ID của ứng dụng, nhưng trong trường hợp này, một dấu chấm [. ] Được sử dụng thay vì dấu băm
cú pháp
css=tag.class
- Tag = thẻ HTML của phần tử đang được truy cập
- # = hash. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
- id = id của phần tử đang được truy cập
Hãy nhớ rằng ID luôn đi trước một dấu hiệu trùm [#]. Truy cập trang demo //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 1. Điều hướng đến www. Facebook. com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. 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
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 của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email. 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
Bước 2. Nhập CSS CSS = Input#Email vào mục tiêu của Selenium IDE và nhấp vào nút Tìm kiếm. Selenium IDE sẽ có thể làm nổi bật yếu tố đó
Tag và Layer - CSS Selective
Bộ chọn CSS trong selen bằng thẻ HTML và lớp tương tự sử dụng như tên thẻ và ID của ứng dụng, nhưng trong trường hợp này, một dấu chấm [. ] Được sử dụng thay vì dấu băm
cú pháp
css=tag[attribute=value]
- Tag = thẻ HTML của phần tử đang được truy cập
- # = hash. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
- id = id của phần tử đang được truy cập
- Hãy nhớ rằng ID luôn đi trước một dấu hiệu trùm [#]
Bước 1. Điều hướng đến www. Facebook. com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. Điều hướng đến trang Đăng ký của Mercury Tours //demo.guru99.com/test/newtours/register.php và kiểm tra hộp văn bản “Họ”. Lưu ý thẻ HTML của nó [“đầu vào” trong trường hợp này] và tên của nó [“lastName”]
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 của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email. 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ọ
Bước 2. Nhập CSS CSS = Input#Email vào mục tiêu của Selenium IDE và nhấp vào nút Tìm kiếm. Selenium IDE sẽ có thể làm nổi bật yếu tố đó. 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
Tag và Layer - CSS Selective
cú pháp
css=tag.class[attribute=value]
- Tag = thẻ HTML của phần tử đang được truy cập
- # = hash. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
- id = id của phần tử đang được truy cập
- # = hash. Điều này sẽ luôn luôn có mặt khi sử dụng bộ chọn Selenium CSS có ID
- id = id của phần tử đang được truy cập
- Hãy nhớ rằng ID luôn đi trước một dấu hiệu trùm [#]
Bước 1. Điều hướng đến www. Facebook. com. Sử dụng Firebug, kiểm tra hộp email hoặc hộp văn bản điện thoại. Truy cập trang demo //demo.guru99.com/test/facebook.html và sử dụng Firebug để kiểm tra hộp nhập 'Email hoặc Điện thoại' và 'Mật khẩu'. Ghi lại 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
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 của email. Vì vậy, cú pháp của chúng tôi sẽ là CSS CSS = Input#Email. 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 đầu vào mật khẩu, chỉ cần thay thế giá trị của thuộc tính Tabindex. Nhập CSS CSS = đầu vào. InputText [Tabindex = 2] trong hộp đích 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. Để 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 CSS
Như bạn có thể nhận thấy, các nhãn HTML mới được cung cấp ID, tên hoặc lớp thuộc tính. Vì vậy, làm thế nào để chúng tôi truy cập chúng? . Các văn bản bên trong là các chuỗi mẫu thực tế mà nhãn HTML hiển thị trên trang. 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. Điều hướng đến trang chủ của Mercury Tours //demo.guru99.com/test/newtours/ và sử dụng Firebug để điều khiển nhãn Mật khẩu mật khẩu. Vui lòng lưu ý thẻ HTML của nó [đó là FONT FONT trong trường hợp này] và nhận thấy rằng nó không thuộc tính Lớp, ID hoặc tên. Điều hướng đến trang chủ của Mercury Tours //demo.guru99.com/test/newtours/ và sử dụng Firebug để điều tra nhãn "Mật khẩu". Lưu ý 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. Type CSS = Font chữ. Chứa [mật khẩu. Tiết] vào hộp mục tiêu đề Selenium IDE và nhấp vào Tìm kiếm. Selenium IDE sẽ có thể truy cập nhãn mật khẩu như trong hình ảnh bên dưới. 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 cách Bos Boston, để mục tiêu của bạn giờ sẽ trở thành CSS CSS = phông chữ. Chứa [Hội Boston Hồi]. Tracking on Find. Bạn nên nhận ra rằng nhãn của Boston Boston đến San Francisco, trở nên nổi bật. Đ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ỉ truy cập từ phần đầu của văn bản bên trong nó. 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ó
BẢNG XÁC SUẤT
Cú pháp để định vị trí bằng cách sử dụng bộ chọn CSS
Phương phápCú pháp Mục tiêuThí dụTag và IdCSS = Tag#IDCSS = đầu vào#EmailTag và lớpCSS = Tag. LớpCSS = đầu vào. InputTextTag và thuộc tínhcss = tag [thuộc tính = value]css = input [name = lastName]Tag, Layer và thuộc tínhcss = tag. class [thuộc tính = value]CSS = input. Văn bản đầu vào [Tabindex = 1]Sự khác biệt giữa CSS và XPath là gì?
Chúng ta có thể đi qua cả về phía trước và lùi trong DOM, tức là chúng ta có thể chuyển từ cha sang phần tử con và từ con sang phần tử cha với XPath. Tuy nhiên, đối với CSS, chúng ta chỉ có thể đi qua từ cha mẹ sang con chứ không phải quay ngược lại. Về hiệu suất, CSS tốt hơn và nhanh hơn, trong khi XPath ở phía sau chậm hơn. css tốt hơn và nhanh hơn, trong khi xpath chậm hơn .
Cái nào tốt hơn để sử dụng CSS hoặc XPath?
Ưu điểm của việc sử dụng bộ chọn CSS, nó nhanh hơn XPath. Nó dễ dàng hơn nhiều để học và thực hiện. Bạn có cơ hội tìm thấy các yếu tố của bạn cao. Nó tương thích với hầu hết các trình duyệt cho đến nay
Tại sao CSS lại được ưa chuộng hơn XPath?
Bộ chọn CSS hoạt động tốt hơn nhiều so với XPath và nó được ghi rõ ràng trong cộng đồng Selenium. Dưới đây là một số lý do, động cơ XPath khác nhau trong mỗi trình duyệt, do đó làm cho chúng không quán nhất. IE không có cơ XPath gốc, do đó Selen đã tiêm động cơ XPath của riêng mình để tương thích với API của nó