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 trong tập lệnh kiểm tra Selenium để xác định các thành phần web. Nó cũng sẽ mô tả cú pháp của bộ chọn CSS trong Selenium
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ì?
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 trong Selenium, bộ chọn CSS có thể định vị các phần tử web mà không cần ID, lớp hoặc Tên
cũng đọc. Bộ chọn CSS nhanh Cheat Sheet
Các loại bộ chọn CSS [có ví dụ]
Có năm loại Bộ chọn CSS trong các bài kiểm tra Selenium
- TÔI
- Tầng 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. Hàm băm luôn đi trước giá trị này
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ú. Phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định nếu nhiều phần tử web có cùng giá trị thuộc tính và thẻ HTML
2. Tầng 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. Một dấu chấm luôn đứng trước giá trị của Class
cũng đọc. 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 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à “đầu vào”, thuộc tính là loại và giá trị của thuộc tính là “gửi”. 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 đượ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
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ế được sử dụng để 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 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 dựa trên đó 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 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 dựa trên đó 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”, thì 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 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 phụ. chuỗi dựa trên đó 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']
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 vì 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ể 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 Class đang được truy cập
Update: The feature is deprecated and no longer supported by the W3C standard. CSS Selectors Level 3 standard is applicable across all major browsers. - 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ó
Thật hữu ích khi tìm một phần tử bằng bộ chọn CSS, chủ yếu là do các nhà phát triển và người kiểm tra nâng cao sử dụng nó. 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
Đăng ký kiểm tra Selenium
Kiểm tra tự động hóa Trình quản lý web Selenium
Bài đăng này có hữu ích không?
Vâng, cảm ơn Không thực sự
Chúng tôi rất tiếc khi biết điều đó. Hãy chia sẻ phản hồi của bạn để chúng tôi có thể làm tốt hơn
Cảm ơn rất nhiều phản hồi của bạn
thẻ
Kiểm tra tự động hóa Trình quản lý web SeleniumNhững bài viết liên quan
Bộ chọn CSS nhanh Cheat Sheet
Bộ chọn CSS giúp định vị các thành phần HTML cho Tự động hóa trình duyệt bằng Selenium. Đọc c đầy đủ của chúng tôi
Tìm hiểu thêm
Cách tạo mã CSS cụ thể cho trình duyệt
Tìm hiểu cách tạo mã CSS dành riêng cho trình duyệt để đảm bảo khả năng tương thích giữa các trình duyệt cho một trang web. t