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 – 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=
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=
- ^ – 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=
- # – 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=
- * – 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=
- – 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.