Bộ chọn Selenium CSS một phần id

Trong hướng dẫn Selenium trước đây của chúng tôi, chúng tôi đã học các loại bộ định vị khác nhau. Chúng tôi cũng đã học cách sử dụng. Bộ định vị ID, Tên lớp, Tên, Văn bản liên kết và XPath để xác định các phần tử web trên một trang web

Tiếp tục với điều đó, hôm nay chúng ta sẽ tìm hiểu cách sử dụng CSS Selector làm Locator. Đây là hướng dẫn thứ 6 trong loạt bài Đào tạo về Selenium miễn phí của chúng tôi

Sử dụng Bộ chọn CSS làm Bộ định vị

Bộ chọn CSS là sự kết hợp của bộ chọn phần tử và giá trị bộ chọn xác định phần tử web trong trang web. Tổng hợp của bộ chọn phần tử và giá trị bộ chọn được gọi là Mẫu bộ chọn.

Selector Pattern được xây dựng bằng cách sử dụng thẻ HTML, thuộc tính và giá trị của chúng. Chủ đề trung tâm đằng sau quy trình tạo CSS Selector và Xpath rất giống nhau về sự khác biệt duy nhất trong giao thức xây dựng của chúng

Giống như Xpath, bộ chọn CSS cũng có thể định vị các phần tử web không có ID, lớp hoặc Tên

Vì vậy, bây giờ hãy tiếp tục, chúng ta hãy thảo luận về các loại Bộ chọn CSS nguyên thủy

Bạn sẽ học được gì

Bộ chọn CSS. TÔI

Trong mẫu này, chúng tôi sẽ truy cập hộp văn bản “Email” có trong biểu mẫu đăng nhập tại Gmail. com

Hộp văn bản Email có thuộc tính ID có giá trị được xác định là “Email”. Do đó, thuộc tính ID và giá trị của nó có thể được sử dụng để tạo Bộ chọn CSS để truy cập hộp văn bản email

Tạo CSS Selector cho phần tử web

Bước 1. Xác định vị trí/kiểm tra phần tử web (trong trường hợp của chúng tôi là hộp văn bản (“Email”) và lưu ý rằng thẻ HTML là “đầu vào” và giá trị của thuộc tính ID là “Email” và cả hai đều tham chiếu chung đến “Hộp văn bản Email”. Do đó dữ liệu trên sẽ được sử dụng để tạo CSS Selector

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

Bước 1. Nhập “css=input#Email” tôi. e. giá trị định vị trong hộp mục tiêu trong Selenium IDE và nhấp vào nút Tìm. Lưu ý rằng hộp Văn bản Email sẽ được đánh dấu

cú pháp

css=<#>

• Thẻ HTML – Đây là thẻ được sử dụng để biểu thị phần tử web mà chúng tôi muốn truy cập
• # – Dấu thăng dùng để tượng trưng cho thuộc tính ID. Bắt buộc phải sử dụng dấu thăng nếu thuộc tính ID đang được sử dụng để tạo Bộ chọn CSS
• Giá trị của thuộc tính ID – Đó là giá trị của thuộc tính ID đang được truy cập
• Giá trị của ID luôn đứng trước dấu thăng

Ghi chú. Cũng áp dụng cho các loại Bộ chọn CSS khác

• Trong khi chỉ định CSS Selector trong hộp văn bản đích của Selenium IDE, hãy luôn nhớ thêm tiền tố “css=” vào trước nó
• Trình tự của các hiện vật trên là không thể thay đổi
• Nếu hai hoặc nhiều thành phần web có cùng thẻ HTML và giá trị thuộc tính, thì thành phần đầu tiên được đánh dấu trong nguồn trang sẽ được xác định

Bộ chọn CSS. Lớp

Trong mẫu này, chúng tôi sẽ truy cập vào hộp kiểm “Duy trì trạng thái đăng nhập” hiển thị bên dưới biểu mẫu đăng nhập tại gmail. com

Hộp kiểm “Duy trì trạng thái đăng nhập” có thuộc tính Lớp có giá trị được xác định là “ghi nhớ”. Do đó, thuộc tính Lớp và giá trị của nó có thể được sử dụng để tạo Bộ chọn CSS để truy cập phần tử web được chỉ định

Định vị một phần tử bằng cách sử dụng Lớp làm Bộ chọn CSS rất giống với việc sử dụng ID, sự khác biệt duy nhất nằm ở cấu trúc cú pháp của chúng

Đề xuất đọc => Khám phá tất cả về các yếu tố và thành phần của Bulma

Tạo Bộ chọn CSS cho phần tử web

Bước 1. Xác định vị trí/kiểm tra phần tử web (hộp kiểm (“Duy trì trạng thái đăng nhập” trong trường hợp của chúng tôi) và lưu ý rằng thẻ HTML là “nhãn” và giá trị của thuộc tính ID là “ghi nhớ” và cả hai tham chiếu chung đến phần “Duy trì trạng thái đăng nhập

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

Bước 1. Nhập “css=nhãn. nhớ” tôi. e. giá trị định vị trong hộp mục tiêu trong Selenium IDE và nhấp vào nút Tìm. Lưu ý rằng hộp kiểm “Duy trì trạng thái đăng nhập” sẽ được đánh dấu

cú pháp

css=<.>

• – Dấu chấm dùng để tượng trưng cho thuộc tính Class. Bắt buộc phải sử dụng dấu chấm nếu thuộc tính Lớp đang được sử dụng để tạo Bộ chọn CSS
• Giá trị của Class luôn đứng trước dấu chấm

Bộ chọn CSS. Thuộc tính

Trong mẫu này, chúng tôi sẽ truy cập nút “Đăng nhập” có bên dưới biểu mẫu đăng nhập tại gmail. com

Nút “Đăng nhập” có thuộc tính loại có giá trị được xác định là “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 để truy cập phần tử web được chỉ định

Tạo Bộ chọn CSS cho phần tử web

Bước 1. Xác định vị trí/kiểm tra phần tử web (“nút Đăng nhập” trong trường hợp của chúng tôi) và lưu ý rằng thẻ HTML là “đầu vào”, thuộc tính là loại và giá trị của thuộc tính loại là “gửi” và tất cả chúng cùng nhau tạo tham chiếu đến

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

Bước 1. Nhập “css=input[type=’submit’]” i. e. giá trị định vị trong hộp mục tiêu trong Selenium IDE và nhấp vào nút Tìm. Lưu ý rằng nút “Đăng nhập” sẽ được đánh dấu

cú pháp

css=<[attribute=Value of attribute]>

• Attribute – Là thuộc tính mà chúng ta muốn sử dụng để tạo CSS Selector. Nó có thể giá trị, loại, tên, vv. Bạn nên chọn một thuộc tính có giá trị xác định duy nhất phần tử web
• Giá trị của thuộc tính – Đó là giá trị của một thuộc tính đang được truy cập

Bộ chọn CSS. ID/Lớp và thuộc tính

Trong mẫu này, chúng tôi sẽ truy cập vào hộp văn bản “Mật khẩu” có trong biểu mẫu đăng nhập tại gmail. com

Hộp văn bản “Mật khẩu” có thuộc tính ID có giá trị được xác định là “Mật khẩu”, loại thuộc tính có giá trị được xác định là “mật khẩu”. Do đó, thuộc tính ID, thuộc tính loại và các giá trị của chúng có thể được sử dụng để tạo Bộ chọn CSS để truy cập phần tử web được chỉ định

Tạo Bộ chọn CSS cho phần tử web

Bước 1. Xác định vị trí/kiểm tra phần tử web (trong trường hợp của chúng tôi là hộp văn bản (“Mật khẩu”) và lưu ý rằng thẻ HTML là “đầu vào”, các thuộc tính là ID và loại và các giá trị tương ứng của chúng là “Mật khẩu” và “mật khẩu” và tất cả chúng cùng tạo thành

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

Bước 1. Nhập “css=input#Passwd[name=’Passwd’]” i. e. giá trị định vị trong hộp mục tiêu trong Selenium IDE và nhấp vào nút Tìm. Lưu ý rằng hộp văn bản "Mật khẩu" sẽ được đánh dấu

cú pháp

css=<. Or #><[attribute=Value of attribute]>

Hai hoặc nhiều thuộc tính cũng có thể được cung cấp theo cú pháp. Ví dụ , “css=input#Passwd[type='password'][name='Passwd']".

Bộ chọn CSS. chuỗi con

CSS trong Selenium cho phép khớp một phần chuỗi và do đó tạo ra một tính năng rất thú vị để tạo Bộ chọn CSS bằng cách sử dụng chuỗi con. Có ba cách để Bộ chọn CSS có thể được tạo dựa trên cơ chế được sử dụng để so khớp chuỗi con

Các loại cơ chế

Tất cả các cơ chế bên dưới có ý nghĩa tượng trưng

• Khớp một tiền tố
• Khớp một hậu tố
• Khớp một chuỗi con

Hãy để chúng tôi thảo luận chi tiết

Khớp một tiền tố

Nó được sử dụng để tương ứng với chuỗi với sự trợ giúp của tiền tố phù hợp

cú pháp

css=<[attribute^=prefix of the string]>                

• ^ – Ký hiệu tượng trưng để so khớp chuỗi sử dụng tiền tố
• Tiền tố – Đó là chuỗi dựa trên đó thao tác so khớp được thực hiện. Chuỗi có khả năng dự kiến ​​​​sẽ bắt đầu bằng chuỗi đã chỉ định

Ví dụ . Chúng ta hãy xem xét “Hộp văn bản mật khẩu”, vì vậy Bộ chọn CSS tương ứng sẽ là.

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

Khớp một hậu tố

Nó được sử dụng để tương ứng với chuỗi với sự trợ giúp của hậu tố phù hợp

cú pháp

css=<[attribute$=suffix of the string]>                

• # – Ký hiệu tượng trưng để khớp với một chuỗi bằng hậu tố
• Hậu tố – Đó là chuỗi dựa trên đó thao tác so khớp được thực hiện. Chuỗi có khả năng dự kiến ​​​​sẽ kết thúc bằng chuỗi đã chỉ định

Ví dụ: Hãy xem xét lại “Hộp văn bản mật khẩu”, vì vậy Bộ chọn CSS tương ứng sẽ là.

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

Khớp một chuỗi con

Nó được sử dụng để tương ứng với chuỗi với sự trợ giúp của chuỗi con phù hợp

cú pháp

css=<[attribute*=sub string]>                

• * – Ký hiệu tượng trưng để khớp một chuỗi bằng chuỗi phụ
• Chuỗi con – Đây là chuỗi dựa trên đó thao tác so khớp được thực hiện. Chuỗi có khả năng dự kiến ​​​​sẽ có mẫu chuỗi được chỉ định

Ví dụ: hãy xem xét lại “Hộp văn bản mật khẩu”, vì vậy Bộ chọn CSS tương ứng sẽ là.

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

Bộ chọn CSS. văn bản bên trong

Văn bản bên trong giúp chúng tôi xác định và tạo Bộ chọn CSS bằng cách sử dụng mẫu chuỗi mà Thẻ HTML hiển thị trên trang web

Hãy xem xét, "Bạn cần giúp đỡ?" . com

Thẻ neo đại diện cho siêu liên kết có một văn bản kèm theo bên trong. Do đó, văn bản này có thể được sử dụng để tạo Bộ chọn CSS để truy cập phần tử web được chỉ định

cú pháp

css=<:><(text)>

• – Dấu chấm dùng để tượng trưng cho phương thức chứa
• Chứa – Đó là giá trị của thuộc tính Lớp đang được truy cập
• 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ó

Đây là một trong những chiến lược được sử dụng thường xuyên nhất để xác định vị trí phần tử web vì cú pháp đơn giản hóa của nó

Do thực tế là việc tạo CSS Selector và Xpath đòi hỏi rất nhiều nỗ lực và thực hành, do đó, quá trình này chỉ được thực hiện bởi những người dùng được đào tạo và tinh vi hơn

Hướng dẫn tiếp theo #7 . Tiếp tục với hướng dẫn tiếp theo của chúng tôi, chúng tôi sẽ nhân cơ hội này giới thiệu với bạn phần mở rộng của các chiến lược định vị. Vì vậy, trong phần hướng dẫn tiếp theo, chúng ta sẽ nghiên cứu cơ chế định vị các phần tử web trên Google Chrome và Internet Explorer.

Chúng tôi sẽ trình bày chi tiết hơn về Bộ định vị Selenium vì đây là một phần quan trọng trong quá trình tạo Selenium Script

Hãy cho chúng tôi biết các truy vấn / nhận xét của bạn bên dưới

đề xuất đọc

• Cách định vị các phần tử trong trình duyệt Chrome và IE để xây dựng tập lệnh Selenium – Hướng dẫn Selenium #7

  Làm cách nào để tìm phần tử theo ID một phần trong Selenium?

  Chúng ta có thể tìm một phần tử theo is một phần với Selenium trong C#. Điều này có thể được thực hiện khi chúng tôi xác định các phần tử bằng CSS và xpath của bộ định vị . Biểu thức chính quy được sử dụng để tìm phần tử được khớp một phần. Hãy để chúng tôi điều tra thuộc tính id của một phần tử có giá trị là gsc−i−id1.

  Những phương pháp nào có thể được sử dụng để khớp một phần thuộc tính ID?

  Với biểu thức xpath, chúng ta có thể sử dụng phương thức contains() và thực hiện khớp một phần với id. Giá trị xpath sẽ là //*[contains(@id, 'id')].

  Làm cách nào để khớp một phần văn bản trong XPath?

  Contains() là một phương thức được sử dụng trong biểu thức XPath. Nó được sử dụng khi giá trị của bất kỳ thuộc tính nào thay đổi linh hoạt, ví dụ: thông tin đăng nhập. Tính năng chứa có khả năng tìm phần tử có một phần văn bản như trong ví dụ XPath bên dưới.

  Làm cách nào chúng ta có thể xác định vị trí một phần tử bằng cách chỉ khớp một phần giá trị thuộc tính của nó trong XPath?

  Chúng ta có thể xác định các phần tử bằng cách so sánh một phần với các thuộc tính của nó trong Selenium với sự trợ giúp của biểu thức chính quy. Trong xpath, có phương thức chứa () . Nó hỗ trợ khớp một phần với giá trị của các thuộc tính. Phương pháp này hữu ích khi xử lý các phần tử có giá trị động trong thuộc tính của chúng.