Bài viết này sẽ thảo luận và mô tả, với các ví dụ, cách một người có thể sử dụng bộ chọn CSS để xác định các phần tử web trong các bài kiểm tra Selenium. Nó cũng sẽ mô tả cú pháp của bộ chọn CSS trong Selenium
Nội dung chính Hiển thị
- Bộ chọn CSS là gì?
- Các loại Bộ chọn CSS [có ví dụ]
- 3. Thuộc tính
- 4. chuỗi con
- 5. văn bản bên trong
- Bộ chọn XPath và css là gì?
- XPath hoặc css nào nhanh hơn trong Selenium?
- Bộ chọn css Selenium là gì?
- Tại sao bộ chọn css nhanh hơn XPath?
Bạn nên hiểu sâu hơn về các bộ định vị trong Selenium trước khi thu hẹp nó xuống các bộ chọn CSS nói riêng
Bộ chọn CSS là gì?
Về cơ bản, Bộ chọn CSS kết hợp bộ chọn phần tử và giá trị bộ chọn có thể xác định các phần tử cụ thể trên trang web. Giống như XPath, bộ chọn CSS có thể được sử dụng để định vị các phần tử web không có ID, lớp hoặc Tên
Các loại Bộ chọn CSS [có ví dụ]
Có 5 loại Bộ chọn CSS trong các bài kiểm tra Selenium-
- TÔI
- Lớp
- Thuộc tính
- Chuỗi con
- Chuỗi bên trong
1. TÔI
Trong ví dụ này, tập lệnh sẽ truy cập hộp văn bản Email trên biểu mẫu đăng nhập tại Gmail. com
Hộp văn bản mang thuộc tính ID có giá trị “Email”. Trong trường hợp này, thuộc tính ID và giá trị của nó được sử dụng để tạo bộ chọn CSS cho phép truy cập vào hộp văn bản
Cách tạo Bộ chọn CSS Selenium cho phần tử web
Xác định vị trí phần tử web – Hộp văn bản email. Thẻ HTML ở đây là “đầu vào” và giá trị của thuộc tính ID là “Email”. Kết hợp lại, chúng đề cập đến hộp văn bản Email. Đây là dữ liệu cần thiết để tạo bộ chọn CSS
nguồn hình ảnh
Xác minh giá trị định vị
Nhập “css=input#Email”[giá trị định vị] trong Selenium IDE. Bấm vào nút Tìm. Hộp văn bản Email được tô sáng, xác minh giá trị định vị
nguồn hình ảnh
cú pháp
css=
- thẻ HTML. được sử dụng để biểu thị phần tử web được truy cập
- #. được sử dụng để tượng trưng cho thuộc tính ID. Lưu ý rằng hàm băm là bắt buộc trong trường hợp thuộc tính ID được sử dụng để tạo Bộ chọn CSS
- Giá trị của thuộc tính ID. giá trị của thuộc tính ID đang được truy cập. Giá trị này luôn đứng trước hàm băm
Khi chỉ định Bộ chọn CSS trong hộp văn bản đích của Selenium IDE, hãy đảm bảo rằng nó được đặt trước “css=”
Ghi chú. Nếu nhiều phần tử web có cùng thẻ HTML và giá trị thuộc tính, thì phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định
2. Lớp
Trong ví dụ này, tập lệnh sẽ truy cập hộp kiểm “Duy trì trạng thái đăng nhập” xuất hiện bên dưới biểu mẫu đăng nhập tại Gmail. com
Hộp kiểm mang thuộc tính Lớp có giá trị “nhớ”. Thuộc tính và giá trị Lớp này có thể được sử dụng để tạo bộ chọn CSS truy cập phần tử web đã chọn
Đây là cách tạo Bộ chọn CSS cho phần tử web
Xác định vị trí phần tử web – hộp kiểm “Duy trì trạng thái đăng nhập”. Trong trường hợp này, thẻ HTML là “nhãn” và giá trị của thuộc tính ID là “nhớ”. Kết hợp lại, chúng đề cập đến hộp kiểm “Duy trì trạng thái đăng nhập”
Xác minh giá trị định vị
Nhập “css=nhãn. ghi nhớ”[giá trị định vị] trong Selenium IDE. Bấm vào nút Tìm. Hộp kiểm “Duy trì trạng thái đăng nhập” được tô sáng, xác minh giá trị của bộ định vị
nguồn hình ảnh
cú pháp
css=
- . Dấu chấm dùng để tượng trưng cho thuộc tính Class. Lưu ý rằng dấu chấm là bắt buộc trong trường hợp thuộc tính Lớp được sử dụng để tạo Bộ chọn CSS. Giá trị của Class luôn đứng trước dấu chấm
Phổ biến trong số độc giả. Cách xử lý lớp Action trong Selenium
3. Thuộc tính
Trong ví dụ này, tập lệnh sẽ truy cập nút “Đăng nhập” nằm bên dưới biểu mẫu đăng nhập tại Gmail. com
Nút “Đăng nhập” mang thuộc tính loại có giá trị “gửi”. Thuộc tính loại này và giá trị của nó có thể được sử dụng để tạo Bộ chọn CSS sẽ truy cập phần tử web ưa thích
Đây là cách tạo Bộ chọn CSS trong Selenium cho phần tử web
Xác định vị trí phần tử web – nút “Đăng nhập”. Trong trường hợp này, thẻ HTML là “input”, thuộc tính là type và giá trị của thuộc tính là “submit”. Kết hợp lại, chúng đề cập đến nút “Đăng nhập”
Xác minh giá trị định vị
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ị
nguồn hình ảnh
cú pháp
css=
- Thuộc tính. Được sử dụng để tạo Bộ chọn CSS. Nó có thể là một giá trị, loại, tên, v.v. Tốt nhất là chọn một thuộc tính có giá trị xác định duy nhất phần tử web đang được truy cập
- Giá trị của thuộc tính. giá trị của thuộc tính đang được truy cập
Mẹo chuyên nghiệp. Bạn muốn tìm hiểu sâu hơn về triển khai Selenium trên BrowserStack với các khóa học tương tác và bài tập trong phòng thí nghiệm miễn phí?Visit Test University
4. chuỗi con
Trong Selenium, CSS cho phép khớp một phần chuỗi, cung cấp cách tạo bộ chọn CSS bằng cách sử dụng chuỗi con. Điều này có thể được thực hiện theo ba cách
Các loại cơ chế sử dụng để so khớp chuỗi con
- Phù hợp với một tiền tố
- Phù hợp với một hậu tố
- Phù hợp với một chuỗi con
Khớp một tiền tố
Mục đích của việc này là tương ứng với chuỗi bằng cách sử dụng tiền tố phù hợp
cú pháp
css=
- ^. biểu tượng được sử dụng để khớp với một chuỗi bằng tiền tố
- Tiếp đầu ngữ. chuỗi trên cơ sở đó thao tác so khớp được thực hiện
Nếu một người có ý định xác định “Hộp văn bản mật khẩu”, Bộ chọn CSS, trong trường hợp này, sẽ là
css=input#Passwd[name^='Pass']
Khớp một hậu tố
Mục đích của việc này là tương ứng với chuỗi bằng cách sử dụng hậu tố phù hợp
cú pháp
css=
- #. biểu tượng được sử dụng để khớp một chuỗi bằng hậu tố
- hậu tố. chuỗi trên cơ sở đó thao tác so khớp được thực hiện
Một lần nữa, nếu một người có ý định xác định “Hộp văn bản mật khẩu”, Bộ chọn CSS, trong trường hợp này sẽ là
css=input#Passwd[name$='wd']
Khớp một chuỗi con
Mục đích của việc này là để tương ứng với chuỗi bằng cách sử dụng một chuỗi con phù hợp
cú pháp
css=
- *. biểu tượng để khớp với một chuỗi bằng cách sử dụng chuỗi con
- chuỗi con. chuỗi trên cơ sở đó thao tác so khớp được thực hiện
Một lần nữa, nếu một người có ý định xác định “Hộp văn bản mật khẩu”, Bộ chọn CSS tương ứng sẽ là
css=input#Passwd[name$='wd']
Đọc hướng dẫn. Các bước để tự động đăng nhập bằng Selenium WebDriver
5. văn bản bên trong
Sử dụng văn bản bên trong giúp xác định và tạo Bộ chọn CSS trong Selenium WebDriver bằng cách sử dụng mẫu chuỗi mà Thẻ HTML hiển thị trên trang web. Cơ chế này được sử dụng thường xuyên nhất để xác định vị trí các phần tử web do cú pháp đơn giản hóa của nó
Trong ví dụ này, hãy tập trung vào "Quên email?" . com
Thẻ neo đại diện cho siêu liên kết này có một số văn bản bên trong nó. Văn bản này có thể được sử dụng để tạo Bộ chọn CSS định vị phần tử web được yêu cầu
cú pháp
css=
- – dấu hai chấm được sử dụng để tượng trưng cho phương thức chứa
- chứa – giá trị của thuộc tính Lớp đang được truy cập
Cập nhật. Tính năng - văn bản – văn bản được hiển thị ở bất kỳ đâu trên trang web, bất kể vị trí của nó
Đó là một kỹ năng hữu ích để tìm một phần tử bằng bộ chọn CSS, đặc biệt vì nó được sử dụng bởi các nhà phát triển và người thử nghiệm nâng cao. Bằng cách thành thạo nó, người ta có thể sử dụng Selenium với toàn bộ tiềm năng của nó, do đó tối ưu hóa khả năng của nó để kiểm tra Selenium tự động
Chạy thử nghiệm Selenium tự động miễn phí
Bộ chọn XPath và css là gì?
Về cơ bản, Bộ chọn CSS kết hợp một bộ chọn phần tử và một giá trị bộ chọn có thể xác định các phần tử cụ thể trên một trang web . Giống như XPath, bộ chọn CSS có thể được sử dụng để định vị các phần tử web không có ID, lớp hoặc Tên.
XPath hoặc css nào nhanh hơn trong Selenium?
Css có hiệu suất và tốc độ tốt hơn xpath . Xpath cho phép nhận dạng với sự trợ giúp của văn bản hiển thị xuất hiện trên màn hình với sự trợ giúp của hàm text[]. Css không có tính năng này. CSS tùy chỉnh có thể được tạo trực tiếp với sự trợ giúp của thuộc tính id và lớp.
Bộ chọn css Selenium là gì?
Bộ chọn CSS trong Selenium là gì? . Bộ chọn CSS chủ yếu sử dụng mẫu chuỗi ký tự, xác định các phần tử web dựa trên cấu trúc HTML của chúng. one of the locator strategies offered by Selenium to identify the web elements. The CSS Selectors mainly use the character sequence pattern, which identifies the web elements based on their HTML structure.
Tại sao bộ chọn css nhanh hơn XPath?
Bộ chọn CSS hoạt động tốt hơn nhiều so với Xpath và nó được ghi lại rõ ràng trong cộng đồng Selenium. Dưới đây là một số lý do, các công cụ Xpath khác nhau trong mỗi trình duyệt, do đó khiến chúng không nhất quán. IE không có công cụ xpath riêng, do đó Selenium tiêm công cụ xpath của riêng nó để tương thích với API của nó