Bộ chọn css trong selen

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ộ CSS được chọn để xác định các yếu tố cấu thành web trong các lần thử nghiệm. Nó cũng sẽ mô tả Bộ chọn CSS Cú pháp trong Selenium

Nội dung chính Hiển thị

  • CSS select is what?
  • Các loại bộ chọn CSS (có ví dụ)
  • Khi chỉ chọn bộ CSS trong hộp văn bản đích của Selenium IDE, hãy đảm bảo rằng nó đã được CSS đi trước CSS =. Lớp
  • Thẻ HTML. Có thể sử dụng để biểu thị phần web được truy cậpAttribute
  • #. Được sử dụng để biểu tượng ID thuộc tính. Lưu ý rằng trùm bị bắt buộc trong trường hợp thuộc tính ID được sử dụng để tạo bộ chọn CSS
  • 5. Văn bản bên trong
  • CSS select is what?
  • CSS select and type of it is what?
  • Một ví dụ về bộ chọn trong CSS là gì?
  • Việc sử dụng bộ chọn CSS trong Selenium webdriver là gì?

Nên có sự hiểu biết sâu sắc hơn về các định vị trong selen trước khi kéo nó xuống các bộ chọn CSS nói riêng

CSS select is what?

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ủa các phần tử web mà không cần ID, Lớp hoặc tê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ộ CSS được chọn trong các bài kiểm tra được chọn-

  1. Class
  2. Thuộc tính
  3. Chuỗi con
  4. side string in

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. hộp văn bản comEmail 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 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 ID thuộc tính 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. 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

Bộ chọn css trong selen

Nguồn hình ảnh

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

Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selen ide. Click vào nút Find. Hộp văn bản email được sáng, xác minh giá trị định vị. 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

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

css=<#>
  • Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selen ide. Click vào nút Find. Hộp văn bản email được sáng, xác minh giá trị định vị. được sử dụng để biểu thị phần tử web được truy cập
  • cú phá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
  • Thẻ HTML. Có thể sử dụng để biểu thị phần web được truy cập. 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

#. Được sử dụng để biểu tượng ID thuộc tính. Lưu ý rằng trùm bị 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 ID thuộc tính. Giá trị của ID thuộc tính được truy cập. Giá trị này luôn luôn đi trước mũ. Nếu nhiều phần tử web có cùng giá trị thuộc tính và thẻ HTML, thì phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định

Khi chỉ chọn bộ CSS trong hộp văn bản đích của Selenium IDE, hãy đảm bảo rằng nó đã được CSS đi trước CSS =. Lớp

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ì phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định. 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

2. Thuộc tính lớp có giá trị “ghi 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

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ị bộ 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. 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 định giá trị định vị

Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selen ide. Click vào nút Find. Hộp văn bản email được sáng, xác minh giá trị định vị. 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

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

css=<.>
  • Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selen ide. Click vào nút Find. Hộp văn bản email được sáng, xác minh giá trị định vị. 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

Cú pháp Cách xử lý lớp Action trong Selenium


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

#. Được sử dụng để biểu tượng ID thuộc tính. Lưu ý rằng trùm bị bắt buộc trong trường hợp thuộc tính ID được sử dụng để tạo bộ chọn CSS. Nút “Đăng nhập” nằm bên dưới biểu mẫu đăng nhập tại Gmail. com

Giá trị của ID thuộc tính. Giá trị của ID thuộc tính được truy cập. Giá trị này luôn luôn đi trước mũ. loại thuộc tính với 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

Khi chỉ chọn bộ CSS trong hộp văn bản đích của Selenium IDE, hãy đảm bảo rằng nó đã được CSS đi trước 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ì phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định. Thẻ HTML trong trường hợp này 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 định giá trị định vị

Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selen ide. Click vào nút Find. Hộp văn bản email được sáng, xác minh giá trị định vị. 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

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

css=<[attribute=Value of attribute]>
  • Loại CSS CSS = đầu vào#Email (giá trị định vị) trong selen ide. Click vào nút Find. Hộp văn bản email được sáng, xác minh giá trị định vị. Đượ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
  • cú pháp. giá trị của thuộc tính đang được truy cập

Thẻ HTML. Có thể sử dụng để biểu thị phần tử web được truy cậ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

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

Khi chỉ chọn bộ CSS trong hộp văn bản đích của Selenium IDE, hãy đảm bảo rằng nó đã được CSS đi trước 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ì phần tử đầu tiên được đánh dấu trong nguồn trang sẽ được xác định
  • 2. Class
  • 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ị bộ 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 web phần tử

cú pháp

css=<[attribute^=prefix of the string]>
  • ^. Các biểu tượng được sử dụng để khớp với một chuỗi bằng tiền tố. biểu tượng được sử dụng để khớp với một chuỗi bằng tiền tố
  • tiền tố. Matching string on the base. 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ận hộp văn bản mật khẩu, thì bộ chọn CSS, trong trường hợp này, sẽ là. “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 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]>
  • #. Các biểu tượng được sử dụng để khớp với một chuỗi bằng ưu tiên. biểu tượng được sử dụng để khớp một chuỗi bằng hậu tố
  • Hậu tố. Matching string on the base. 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 của Google, thì bộ chọn CSS, trong trường hợp này sẽ là. “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']

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 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ụ. 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ụ. Matching string on the base. 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, thì bộ chọn CSS tương ứng sẽ là. hộp văn bản mật khẩu”, Bộ chọn CSS tương ứng sẽ là

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

Read direction. Các bước để tự động hóa đăng nhập bằng Selenium WebDriver Các bước để tự động hóa đă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 các bộ chọn CSS trong Selenium WebDriver bằng cách sử dụng một chuỗi mẫu có 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? . com

Thẻ tân đạ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)>

Đó là một kỹ năng hữu ích để tìm một yếu tố của các bộ CSS được chọn, đặc biệt là vì nó được sử dụng bởi các nhà phát triển và người dùng thử nâng cao. Bằng cách làm chủ nó, người ta có thể sử dụng selen cho toàn bộ tiềm năng của mình, làm điều đó Tối ưu hóa khả năng của nó để kiểm tra selen tự động

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

CSS select is what?

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 để 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 tôi. phần đầu tiên của Quy tắc CSS . Đó là một mẫu các phần tử và các thuật ngữ khác cho trình duyệt biết phần tử HTML nào sẽ đượ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.

CSS select and type of it is what?

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 các loại 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) dùng để "tìm" . Chúng tôi có thể chia 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 kết hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng). 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ì?

Element section. 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ẻ