Ở bài viết trước, chúng ta đã cùng tìm hiểu Bộ định vị Locator trong Selenium WebDriver thông qua ID, Name, ClassName, LinkText, Partial LinkText, TagName, XPath. Việc kiểm thử tự động với Selenium WebDriver, trong trường hợp các đối tượng web phức tạp khó định vị các phần tử web, CSS Selectors là một công cụ mạnh mẽ để xác định, định vị và tương tác với các phần tử web trên trang web.
Hãy cùng tìm hiểu thêm về CSS selectors trong Selenium trong bài viết hôm nay cùng mình nhé.
CSS Selector Là Gì?
CSS là viết tắt của Cascading Style Sheets. Bằng cách sử dụng bộ chọn CSS – CSS Selectors trong Selenium, chúng ta có thể xác định và định vị các phần tử web dựa trên id, class name, name hoặc các thuộc tính khác của chúng như type, value, v.v. CSS nhanh hơn và đơn giản hơn XPath và cho phép một phương pháp rõ ràng và sắc nét hơn để định vị các phần tử web.
Chúng được hỗ trợ trong tất cả các trình duyệt hiện đại và là một cách tuyệt vời để định vị nhanh chóng và chính xác các phần tử trong một trang web.
Trong Selenium WebDriver, CSS selectors có thể được sử dụng để định vị các phần tử web bằng phương pháp By.cssSelector(). Phương thức này chấp nhận một chuỗi CSS selectors làm đối số của nó, xác định tiêu chí lựa chọn cho phần tử được định vị.
Tìm Kiếm Phần Tử Web Thông Qua CSS Trong Selenium WebDriver
Dưới đây là các cách khác nhau sử dụng CSS selectors để định vị các phần tử Web trong Selenium WebDriver:
Định Vị Thông Qua ID
Định vị phần tử Web thông qua thuộc tính ID như sau:
Cú pháp
// Định vị phần tử web có id = username
driver.findElement(new By.ByCssSelector("#username"));Định Vị Thông Qua Tag Name
Cú pháp
// Định vị phần tử web có tagName = input
driver.findElement(new By.ByCssSelector("input"));
Định Vị Thông Qua Class Name
Cú pháp
// Định vị phần tử web có class name = caption
driver.findElement(new By.ByCssSelector(".caption"));
Định Vị Thông Qua Name
Cú pháp
// Định vị phần tử web có name = userid
driver.findElement(new By.ByCssSelector("[name=\"userid\"]"));
Trên đây là 4 thuộc tính phổ biến thường được sử dụng khi định vị phần tử Web trong Selenium. Tuy vậy, đôi khi việc định vị thông qua từng thuộc tính có thể ra nhiều kết quả. Vì vậy, việc tìm đến chính xác một phần tử Web nào đó đòi hỏi phải có sự kết hợp giữa các loại thuộc tính khác nhau. Hãy cùng mình tiếp tục tìm hiểu nhé!
Kết Hợp Các Thuộc Tính Tìm Kiếm Trong Việc Định Vị Phần Tử Web
CSS selectors trong Selenium có thể được sử dụng bằng cách xâu chuỗi chúng lại với nhau. Ví dụ: bạn có thể định vị phần tử web bằng thuộc tính id với tag name HTML, class name với tag name HTML, class name với name, v.v… Bạn cũng có thể thêm substring bắt đầu, kết thúc hay bao gồm một giá trị nhất định. Hoặc bạn cũng có thể định vị giá trị đầu tiên, kết thúc hay bất cứ vị trí nào trong danh sách trả về thông qua index number.
Điều này mang lại rất nhiều tính linh hoạt và cho phép bạn viết các kịch bản thử nghiệm chính xác. Nó cũng giúp xác định chính xác và tương tác với các phần tử web cần thiết trên trang web.
Để dễ hình dung các ví dụ, mình sẽ demo trong một trang web thực tế để các bạn cùng theo dõi.
Trang web tham khảo: https://the-internet.herokuapp.com/login
Kết hợp Type và ClassName
Định vị phần tử web có thể sử dụng bằng cách kết hợp tìm kiếm thông qua thuộc tính ID và Type.
Trong trang Login Page, mình sẽ tiến hành tìm kiếm button Login bằng Css Selector thông qua type=button và classname = “radius”.
Một cách đơn giản để biết cách định vị của bạn đúng không, là trong trang inspector, nhấn Crtl+F tìm kiếm theo đúng cú pháp bạn viết trong code của mình. Nếu kết quả tìm kiếm đánh dấu đúng vào vị trí phần tử bạn cần xác định, thì cách sử dụng của bạn đã đúng.
Theo cách tìm kiếm trên, mình định vị Button Login bằng câu lệnh sau:
public WebElement findLoginButton(){
return driver.findElement(new By.ByCssSelector("button.radius"));
}
Kết hợp thuộc tính ID và Type
Định vị phần tử web có thể sử dụng bằng cách kết hợp tìm kiếm thông qua thuộc tính ID và Type.
Trong trang Login Page, mình sẽ tiến hành tìm kiếm button Login bằng Css Selector thông qua id = login và type = button
Theo cách tìm kiếm trên, mình định vị Button Login bằng câu lệnh sau:
public WebElement findLoginButton(){
return driver.findElement(new By.ByCssSelector("#login button"));
}
Kết hợp thuộc tính Name và Type
Cũng trong ví dụ trên, chúng ta có thể tìm kiếm button Login thông qua name và type. Câu lệnh sẽ như sau:
public WebElement findLoginButton(){
return driver.findElement(new By.ByCssSelector("[name=\"login\"]"));
}
ClassName với “:first-of-type”
Tiếp tục sử dụng ví dụ trên để tìm kiếm trường userName nằm trong class=”row”. Nếu chỉ sử dụng id=login và class name = row, công cụ tìm kiếm sẽ trả về cho bạn 2 kết quả một cho username một cho password.
Để định vị đúng phần tử username, bạn cần chỉ định vị trí trả về của phần tử từ danh sách bằng cách sử dụng “:first-of-type” – trả về kết quả tìm kiếm đầu tiên của danh sách như sau:
driver.findElement(new By.ByCssSelector("#login .:first-of-type"))
ClassName với “:last-of-type”
Tương tự trong ví dụ trên, bạn cũng có thể tìm kiếm phần tử cuối cùng trong danh sách trả về thông qua “:last-of-type”
public WebElement findLoginButton(){
return driver.findElement(new By.ByCssSelector('#login .row:last-of-type'));
}
ClassName với “:nth-of-type(n)”
Khi danh sách trả về của bạn không chỉ là 2 phần tử như ví dụ trên đây của mình. Và bạn cần phải tìm đích xác phần tử thứ n trong danh sách. Đừng lo, câu lệnh có điều kiện tìm kiếm “:nth-of-type(n)” sẽ giúp bạn thực hiện điều đó.
Ví dụ dưới đây tìm kiếm phần tử thứ 2 trong danh sách các kết quả trả về sử dụng kết hợp bằng id=login và className=row:
public WebElement findLoginButton(){
return driver.findElement(new By.ByCssSelector('#login .row:last-of-type(2)'));
}
ID với “:first-child”, “:last-child” và “:nth-child(n)”
Hãy quan sát lại trang web của chúng ta một lần nữa. Các bạn có thể nhìn thấy form với name=”login” id=”login” có 3 phần tử con tương ứng trên web là trường username, password và button Login. Một cách tìm kiếm khác để định vị các phần tử này thông qua “:first-child” – tìm kiếm con đầu tiên, “:last-child” – tìm kiếm con cuối cùng và “:nth-child(n)” – tìm kiếm con thứ n trong danh sách các phần tử con.
Ví dụ dưới đây thực hiện tìm kiếm phần tử con thứ 3 của phần tử web nằm trong from có id = login:
public WebElement findLoginButton(){
return driver.findElement(new By.ByCssSelector('#login .row:last-of-type(3)'));
}
TagName với SubString – Starts With, Ends with, Contains
Định vị phần tử web với tag name có thể sử dụng chuỗi con bắt đầu, kết thúc hay bao gồm một giá trị nhất định.
- Matching a Prefix (Starts With)
- Matching a Suffix (Ends with)
- Matching a Substring (Contains)
Cú pháp
//Matching a Prefix (Starts With)
driver.findElement(new By.ByCssSelector("<[attribute^='prefix of the string']>"));
//Matching a Suffix (Ends With)
driver.findElement(new By.ByCssSelector("<[attribute$='suffix of the string']>"));
//Matching a Substring (Contains)
driver.findElement(new By.ByCssSelector("<[attribute*='substring']>"));
Ví dụ
Trong trang web mình sử dụng, dùng css selector tìm kiếm phần tử có class name = figure và tagName =3 sẽ ra 3 kết quả tìm kiếm. Do đó để định vị chính xác phần tử muốn sử dụng, mình sẽ sử dụng thêm substring cho thuộc tính href như sau:
driver.findElement(new By.ByCssSelector("a[href*=\"users/1\"]"));
Tổng Kết
Có rất nhiều cách bạn có thể sử dụng để tìm kiếm phần tử web dựa vào CSS Selector. Nó tuỳ thuộc vào các thuộc tính của phần tử đó và vào sự sáng tạo của người kiểm thử. Trên đây chỉ là một số trong rất nhiều cách bạn có thể vận dụng. Hi vọng bài viết phần nào giúp ích được cho quá trình học và làm việc với Selenium WebDriver của bạn.
Hẹn gặp lại các bạn vào các bài viết tiếp theo!
Happy Testing!