Hướng dẫn what is css selector in java? - css selector trong java là gì?

Bài viết này sẽ thảo luận và mô tả, với các ví dụ, cách người ta có thể sử dụng các bộ chọn CSS để xác định các yếu tố web trong các thử nghiệm selen. Nó cũng sẽ mô tả CSS Selectors Cú pháp trong Selenium.

Nên có được sự hiểu biết sâu sắc hơn về các định vị trong selen 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 để xác định vị trí các phần tử web mà không cần ID, lớp hoặc tên. CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. Like XPath, CSS selector can be used to locate web elements without ID, class, or Name.

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 selen-

  1. TÔI
  2. Lớp
  3. Thuộc tính
  4. Sub-String
  5. Chuỗi bên trong

1. ID

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.comEmail text box on the login form at Gmail.com

Hộp văn bản mang thuộc tính ID với giá trị Email 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 Selenium CSS 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 email. Kết hợp, họ đề 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.HTML tag here is “input” and the value of the ID attribute is “Email”. Combined, they refer to the Email textbox. This is the data required to create the CSS selector.

Hướng dẫn what is css selector in java? - css selector trong java là gì?

Nguồn hình ảnh

Xác minh giá trị định vị

Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selenium ide. Nhấp vào nút Tìm. Hộp văn bản email được tô sáng, xác minh giá trị định vị.css=input#Email”(locator value) in Selenium IDE. Click on the Find button. The Email text box is highlighted, verifying the locator value.

Hướng dẫn what is css selector in java? - css selector trong java là gì?

Nguồn hình ảnh

Xác minh giá trị định vị

css=<#>
  • Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selenium ide. Nhấp vào nút Tìm. Hộp văn bản email được tô sáng, xác minh giá trị định vị.: used to denote the web element to be accessed
  • Cú pháp: used to symbolize the ID attribute. Note that the hash is mandatory in cases where ID attribute is used to create a CSS Selector.
  • Thẻ HTML: Được sử dụng để biểu thị phần tử web được truy cập: the value of the ID attribute being accessed. This value is always preceded by the hash.

#: Được sử dụng để tượng trưng cho thuộc tính ID. Lưu ý rằng 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.css=”.

Giá trị của thuộc tính ID: Giá trị của thuộc tính ID được truy cập. Giá trị này luôn luôn đi trước băm.: If multiple web elements have the same HTML tag and attribute value, it is the first element marked in the page source that will be identified.

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 đi trước bởi CSS CSS =.Class

Lưu ý: Nếu nhiều phần tử web có cùng một thẻ HTML và giá trị thuộc tính, thì đó là phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định.“Stay signed in” checkbox that appears below the login form at Gmail.com.

2. LớpClass attribute with the value “remember”. This Class attribute and value can be utilized to create a CSS selector that accesses the selected web element.

Trong ví dụ này, tập lệnh sẽ truy cập vào hộp kiểm có chữ ký của Wikipedia 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 với 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 vào phần tử web đã chọn.HTML tag, in this case, is “label” and the value of the ID attribute is “remember”. Combined, they refer to the “Stay signed in” checkbox.

Xác minh giá trị định vị

Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selenium ide. Nhấp vào nút Tìm. Hộp văn bản email được tô sáng, xác minh giá trị định vị.css=label.remember”(locator value) in Selenium IDE. Click on the Find Button. The “Stay signed in” checkbox is highlighted, verifying the locator value.

Hướng dẫn what is css selector in java? - css selector trong java là gì?

Nguồn hình ảnh

Xác minh giá trị định vị

css=<.>
  • Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selenium ide. Nhấp vào nút Tìm. Hộp văn bản email được tô sáng, xác minh giá trị định vị.: The dot is used to symbolize the Class attribute. Note that the dot is mandatory in cases where a Class attribute is used to create a CSS Selector. The value of the Class is always preceded by a dot.

Cú pháp How to handle Action class in Selenium


Thẻ HTML: Được sử dụng để biểu thị phần tử web được truy cậpAttribute

#: Được sử dụng để tượng trưng cho thuộc tính ID. Lưu ý rằng 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.“Sign in” button located beneath the login form at Gmail.com.

Giá trị của thuộc tính ID: Giá trị của thuộc tính ID được truy cập. Giá trị này luôn luôn đi trước băm.type attribute with the value “submit”. This type attribute and its value can be utilized to create a CSS Selector that will access the preferred web element.

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 đi trước bởi CSS CSS =.

Lưu ý: Nếu nhiều phần tử web có cùng một thẻ HTML và giá trị thuộc tính, thì đó là phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định.HTML tag, in this case, is “input”, the attribute is type and value of the attribute is “submit”. Combined, they refer to the “Sign in” button.

Xác minh giá trị định vị

Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selenium ide. Nhấp vào nút Tìm. Hộp văn bản email được tô sáng, xác minh giá trị định vị.css=input[type=’submit’]” (locator value) in Selenium IDE. Click on the Find Button. The “Sign in” button will be highlighted, verifying the locator value.

Hướng dẫn what is css selector in java? - css selector trong java là gì?

Nguồn hình ảnh

Xác minh giá trị định vị

css=<[attribute=Value of attribute]>
  • Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selenium ide. Nhấp vào nút Tìm. Hộp văn bản email được tô sáng, xác minh giá trị định vị.: Used to create the CSS Selector. It can be a value, type, name, etc. It is best to select an attribute with a value that uniquely identifies the web element being accessed.
  • Cú pháp: the value of the attribute that is being accessed.

Thẻ HTML: Được sử dụng để biểu thị phần tử web được truy cập Want to dive deeper into Selenium implementation on BrowserStack with free interactive courses and lab exercises? Visit Test University

#: Được sử dụng để tượng trưng cho thuộc tính ID. Lưu ý rằng 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 được truy cập. Giá trị này luôn luôn đi trước 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 đi trước bởi CSS CSS =.

  • Lưu ý: Nếu nhiều phần tử web có cùng một thẻ HTML và giá trị thuộc tính, thì đó là 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 vào hộp kiểm có chữ ký của Wikipedia 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 với 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 vào phần tử web đã chọn.

Đây là cách tạo bộ chọn CSS cho phần tử web

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ố : the symbol used to match a string using a prefix
  • Tiền tố: Chuỗi trên cơ sở hoạt động khớp được thực hiện.: the string on the basis of which the match operation is performed.

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à:“Password textbox”, the CSS Selector, in this case, would be:

css=input#Passwd[name^='Pass']

Khớp với một hậu tố

Mục đích của điều này là tương ứng với chuỗi bằng cách sử dụng một 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 với một chuỗi bằng hậu tố.: the symbol used to match a string using a suffix.
  • Hậu tố: Chuỗi trên cơ sở hoạt động khớp được thực hiện. the string on the basis of which the match operation is performed.

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 của Google, thì bộ chọn CSS, trong trường hợp này sẽ là:“Password textbox”, the CSS Selector, in this case would be:

css=input#Passwd[name$='wd']

Kết hợp một chuỗi con

Mục đích của điều 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 phù hợp với chuỗi bằng cách sử dụng chuỗi phụ: the symbol to match a string using sub-string
  • Chuỗi phụ: Chuỗi trên cơ sở hoạt động khớp được thực hiện.: the string on the basis of which the match operation is performed.

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 tương ứng sẽ là:Password textbox”, the corresponding CSS Selector would be:

css=input#Passwd[name$='wd']

Đọc hướng dẫn: Các bước để tự động hóa đăng nhập bằng Selenium WebDriver Steps for Login Automation using 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 các bộ chọn CSS trong Selenium WebDriver bằng cách sử dụng một mẫu chuỗi mà thẻ HTML biểu hiện trên trang web. Cơ chế này được sử dụng thường xuyên nhất để định vị các yếu tố web trên tài khoản của cú pháp đơn giản hóa của nó.

Trong ví dụ này, hãy tập trung vào email Quên? Hyperlink hiện tại bên dưới biểu mẫu đăng nhập tại gmail.com.

Hướng dẫn what is css selector in java? - css selector trong java là gì?

Thẻ neo đại diện cho siêu liên kết này có một số văn bản trong đó. 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ần thiết.

Cú pháp

css=<:><(text)>
  • : - Đại tràng được sử dụng để tượng trưng cho phương pháp chứa – the colon is used to symbolize the contains method
  • Chứa - giá trị của thuộc tính lớp đang được truy cập: Tính năng này không được dùng và không còn được hỗ trợ bởi tiêu chuẩn W3C. Bộ chọn CSS Tiêu chuẩn cấp 3 được áp dụng trên tất cả các trình duyệt chính. & NBSP; – the value of the Class attribute that is being accessed
    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 cứ đâu trên trang web, không phân biệt vị trí của nó – the text displayed anywhere on the web page, irrespective of its location

Đó là một kỹ năng hữu ích để tìm một yếu tố của các bộ chọn CSS, đặc biệt là 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 làm chủ nó, người ta có thể sử dụng selenium cho toàn bộ tiềm năng của mình, do đó tối ưu hóa khả năng của nó để kiểm tra selen tự động.

Chạy kiểm tra selen tự động miễn phí

Bộ chọn CSS là gì?

Bộ chọn CSS là phần đầu tiên của quy tắc CSS. Đó là một mẫu của các phần tử và các thuật ngữ khác cho trình duyệt biết các phần tử HTML nên được chọn để có các giá trị thuộc tính CSS bên trong quy tắc được áp dụng cho chúng.the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.

Bộ chọn CSS và loại của nó là gì?

Bộ chọn CSS được sử dụng để "tìm" (hoặc chọn) các phần tử HTML bạn muốn tạo kiểu. Chúng ta có thể chia các bộ chọn CSS thành năm loại: Bộ chọn đơn giản (chọn các phần tử dựa trên tên, ID, lớp) Bộ chọn tổ hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng)used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them)

Một ví dụ về bộ chọn trong CSS là gì?

Bộ chọn phần tử: Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử (hoặc thẻ) ví dụ P, H1, Div, Span, v.v. Phong cách.CSS: Mã sau được sử dụng trong mã HTML ở trên.Bạn có thể thấy các quy tắc CSS được áp dụng cho tất cả các thẻ và thẻ.

Việc sử dụng bộ chọn CSS trong selenium webdriver 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 để xác định vị trí các phần tử web mà không cần ID, lớp hoặc tên.to locate web elements without ID, class, or Name.