Chứa văn bản css

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

1. TÔI
2. Tầng lớp
3. Thuộc tính
4. Chuỗi con
5. 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=<[attribute=Value of attribute]>

• 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=<[attribute^=prefix of the string]>

• ^. 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=<[attribute$=suffix of the string]>

• #. 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=<[attribute*=sub string]>

• *. 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=<:><(text)>

• – 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ẻ

Nhữ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

Tôi có thể sử dụng chứa trong CSS không?

Có thể tạo bộ chọn CSS được tạo tùy chỉnh dành cho người dùng nâng cao hơn bằng cách sử dụng bộ chọn "chứa" . Bộ chọn "chứa" hữu ích trong trường hợp chúng tôi đang tìm kiếm một phần tử "chứa" một số văn bản (phân biệt chữ hoa chữ thường).

Có bộ chọn CSS nào cho các phần tử chứa văn bản nhất định không?

Bộ chọn [thuộc tính~=giá trị] được sử dụng để chọn các phần tử có giá trị thuộc tính chứa một từ cụ thể.

Phần tử chứa trong CSS là gì?

Thuộc tính CSS chứa cho biết rằng một phần tử và nội dung của nó càng độc lập càng tốt với phần còn lại của cây tài liệu .

Phần tử nào chứa mã CSS?

Phần tử HTML