Hướng dẫn css selector selenium
Trước khi đi vào chi tiết chúng ta cùng tìm hiểu: Show
CSS Selector là gì?Trong CSS, selector (bộ chọn) là mẫu (được định nghĩa trước đó) để chọn phần tử HTML mà bạn muốn định nghĩa style cho chúng. Phần tử web nào muốn theo style của mẫu này thì chỉ cần gán tên selector mẫu này cho chúng là xong. Ví dụ:
Sử dụng CSS Selector như một Locator:CSS Selector là sự kết hợp giữa bộ chọn thành phần (element selector) và giá trị bộ chọn (selector value); dùng để xác định thành phần web. Tổng hợp của một bộ chọn phần tử và giá trị bộ chọn được gọi là Selector Pattern. Selector Pattern được xây dựng bằng thẻ HTML, thuộc tính và giá trị của chúng. Thủ tục tạo CSS Selector và Xpath rất giống nhau, đều dựa trên 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 thành phần web không có : ID, lớp hoặc Tên. Các loại CSS selector: CSS Selector: IDTrong ví dụ này, chúng ta sẽ truy cập vào hộp văn bản "Email" 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ị là "Email". Do đó, thuộc tính ID và giá trị của nó có thể được sử dụng để tạo CSS Selector để truy cập hộp văn bản email. Tạo CSS Selector cho thành phần web:Bước 1: Locate/inspect phần tử web (trong trường hợp này là hộp văn bản "Email") : thẻ HTML là “input” và value của thuộc tính ID là “Email”, cả hai đều tham chiếu đến textbox "Email". Do đó, dữ liệu này sẽ được sử dụng để tạo CSS Selector (ảnh dưới đây) Verify (xác nhận) giá trị locatorBước 1: Nhập giá trị của locator - text “css=input#Email” vào trường Target của Selenium IDE và sau đó click nút "Find" => Textbox "Email" sẽ được highlight lên (hình dưới đây) Syntax:
Lưu ý: Áp dụng cho cả những loại CSS Selector khác:
CSS Selector: ClassTrong ví dụ này, chúng ta sẽ truy cập checkbox “Stay signed in” ở bên dưới biểu mẫu đăng nhập tại gmail.com. Checkbox “Stay signed in” này có giá trị thuộc tính class là “remember". Do đó, thuộc tính class và giá trị của nó có thể được sử dụng để tạo CSS Selector để truy cập checkbox này. Định vị 1 phần tử bằng cách sử dụng class giống với sử dụng ID, chỉ khác 1 chút ở syntax: Tạo CSS Selector cho thành phần web:Bước 1: Locate/inspect phần tử web (trong trường hợp này là checkbox “Stay signed in”) : thẻ HTML là “label” và value của thuộc tính class là “remember”, cả hai đều tham chiếu đến checkbox “Stay signed in”. Do đó, dữ liệu này sẽ được sử dụng để tạo CSS Selector. Verify (xác nhận) giá trị locator Bước 1: Nhập giá trị của locator - text “css=label.remember” vào trường Target của Selenium IDE và sau đó click nút "Find" => Checkbox “Stay signed in” sẽ được highlight lên (hình dưới đây) Syntax:
CSS Selector: AttributeTrong ví dụ này, chúng ta sẽ truy cập vào nút "Sign in" hiển thị bên dưới biểu mẫu đăng nhập tại gmail.com. Nút "Sign in" có một thuộc tính type có giá trị là “submit”. Do đó, thuộc tính type này và giá trị của nó có thể được sử dụng để tạo CSS Selector để truy cập nút này. Tạo CSS Selector cho thành phần web:Bước 1: Locate/inspect phần tử web (trong trường hợp này là button “Sign in”) : thẻ HTML là “input”, attribute là "type" và value của thuộc tính type này là “submit”, tất cả chúng đều tham chiếu đến button “Sign in”. Do đó, dữ liệu này sẽ được sử dụng để tạo CSS Selector. Verify (xác nhận) giá trị locator Bước 1: Nhập giá trị của locator - text “css=input[type=’submit’]” vào trường Target của Selenium IDE và sau đó click nút "Find" => button “Sign in” sẽ được highlight lên (hình dưới đây) Syntax:
CSS Selector: ID/Class và attribute (Kết hợp giữa ID/Class và attribute)Trong ví dụ này, chúng ta sẽ truy cập vào textbox "Password" trong biểu mẫu đăng nhập tại gmail.com. Textbox "Password" có một thuộc tính ID có giá trị là “Passwd” và thuộc tính "type" có giá trị là "password". Do đó, thuộc tính ID và type và các giá trị của chúng có thể được sử dụng để tạo CSS Selector để truy cập textbox password này. Tạo CSS Selector cho thành phần web:Bước 1: Locate/inspect phần tử web (trong trường hợp này là textbox “Password”) : thẻ HTML là “input”, thuộc tính là ID và "type", và value tương ứng của các thuộc tính này là ”Passwd” và “password”, tất cả chúng đều tham chiếu đến textbox “Password”. Do đó, dữ liệu này sẽ được sử dụng để tạo CSS Selector. Verify (xác nhận) giá trị locator Bước 1: Nhập giá trị của locator - text “css=input#Passwd[name='Passwd']” vào trường Target của Selenium IDE và sau đó click nút "Find" => textbox “Password” sẽ được highlight lên (hình dưới đây) Syntax:
Có thể kết hợp 2 hoặc nhiều thuộc tính dễ dàng theo cú pháp trên. Ví dụ: “css=input#Passwd[type='password'][name='Passwd']” CSS Selector: Sub-stringCSS trong Selenium cho phép khớp chuỗi một phần và do đó có được một tính năng rất thú vị để tạo bộ CSS Selector bằng cách sử dụng các chuỗi con (Sub-string). Có ba cách tạo CSS Selector dựa trên cơ chế được sử dụng để khớp với chuỗi con:
Match a prefixSyntax:
Ví dụ : css=input#Passwd[name^='Pass'] (truy nhập vào input có ID là "Passwd", name có tiền tố là "Pass") Match a suffix Syntax:
Match a substringSyntax:
Ví dụ : css=input#Passwd[name*='ssw'] (truy nhập vào input có ID là "Passwd", name có chứa substring "ssw") CSS Selector: Inner textInner text giúp chúng ta xác định và tạo CSS Selector bằng cách sử dụng chuỗi mẫu (string pattern) mà thẻ HTML biểu thị trên trang web. Ví dụ, link “Need help?” bên dưới mẫu đăng nhập tại gmail.com. Thẻ neo đại diện cho đường link có một văn bản kèm theo. Do đó, văn bản này có thể được sử dụng để tạo CSS Selector để truy cập phần tử web được chỉ định. Syntax:
Ví dụ : css=href:contains("Need help?") (truy nhập vào href có text là "Need help?") Lời kếtTrên đây chỉ là 1 số cách tạo CSS Selector phổ biến, bạn có thể tìm hiểu thêm nhiều cách khác nữa nhé. Bài được dịch từ : https://www.softwaretestinghelp.com/css-selector-selenium-locator-selenium-tutorial-6/ |