Locators Trong Selenium WebDriver Là Gì?
Trong Selenium WebDriver, locators – bộ định vị (hay bộ tìm kiếm) được dùng để xác định và định vị Web element – phần tử trên trang web. Phần tử Web có thể là link, button, dropdown box, text box, checkbox, v.v..
Người dùng có thể xác định các phần tử web bằng cách kiểm tra mã nguồn HTML của trang web thông qua sử dụng “Inspect Tools” của trình duyệt. Còn trong kiểm thử tự động, việc xác định phần tử web sẽ thông qua các bộ chọn – selectors. Chúng giúp Selenium WebDriver tương tác với các phần tử web và mô phỏng hành động của người dùng.
Việc định vị phần tử web với Selenium WebDriver có thể được sử dụng qua các cách sau đây:
| Locator | Mô tả | Cú pháp (trong Java) |
|---|---|---|
| ID | Sử dụng thuộc tính ID để xác định phần tử | driver.findElement(http://by.id/(“IdValue”)); |
| Name | Sử dụng thuộc tính Name để xác định phần tử | driver.findElement(http://by.name/(“nameValue”)); |
| ClassName | Sử dụng class name để xác định phần tử | driver.findElement(By.className(“classValue”)); |
| LinkText | Sử dụng text trong hyperlink để xác định phần tử web | driver.findElement(By.linkText(“textofLink”)); |
| Partial LinkText | Sử dụng một phần text trong hyperlink để xác định phần tử web | driver.findElement(By.partialLinkText(“PartialTextofLink”)); |
| TagName | Sử dụng tag name để xác định phần tử | driver.findElement(By.tagName(“htmlTag”)); |
| CssSelector | Sử dụng kiểu quy tắc trong CSS để xác định phần tử web | driver.findElement(By.cssSelector(“cssValue”)); |
| XPath | Sử dụng XPath để xác định phần tử | driver.findElement(By.xpath(“xpathValue”)); |
Trong đó, định vị bằng id là cách nhanh nhất và đảm bảo tính duy nhất của phần tử web trên trang. Nó được ưu tiên sử dụng hơn bất kỳ bộn định vị nào khác. Tuy nhiên, không phải phần tử web nào cũng có id, do vậy cần một số cách khác để định vị như: LinkText, Name, NameTag, CSS hay Xpath, v.v..
Định Vị Phần Tử Web Thông Qua ID
Bộ định vị ID trong Selenium là cách được ưa thích nhất và nhanh nhất để định vị các phần tử Web mong muốn trên trang. Bộ định vị ID Selenium là duy nhất cho từng phần tử trong DOM.
Dưới đây là một ví dụ về trang Google https://www.google.com.vn/ để minh họa việc định vị thanh tìm kiếm thông qua ID như sau:
Step 1: Mở trang web https://www.google.com.vn/ trên trình duyệt Google
Step 2: Đưa chuột tới thanh tìm kiếm, click chuột phải chọn “Inspect” để mở Dev Tools
Step 3: Viết method để định vị phần tử mong muốn bằng ID
driver.findElement(By.id("APjFqb"));
Định Vị Phần Tử Web Thông Qua Name
Phần tử Web cũng có thể được xác định thông qua Name. Tuy nhiên, không giống như ID là duy nhất, bộ định vị bằng Name có thể có hoặc không có giá trị duy nhất. Nếu các phần tử Web có cùng Name, hàm findElement sẽ chọn phần tử đầu tiên có Name trên trang web đó, còn hàm findElements sẽ trả về danh sách các phần tử có Name như chỉ định.
Cũng trong ví dụ trên, ta có thể dùng Name để định vị phần tử bằng method sau đây:
driver.findElement(By.name("q"));
Định Vị Phần Tử Web Thông Qua ‘Link Text’
Các phần tử có thể được định vị thông qua link text có trong các hyperlinks.
Trong ví dụ trên, phần tử ‘A/B Testing’ có Text link = “A/B Testing”, mình sẽ sử dụng giá trị này để định vị trong Selenium như sau:
driver.findElement(By.linkText("A/B Testing"));
Định Vị Phần Tử Web Thông Qua ClassName
Bộ định vị Class name được sử dụng để định vị các phần tử Web được xác định bằng thuộc tính class.
Định vị phần tử Web với class Name = “example”, mình sẽ sử dụng giá trị này để định vị trong Selenium như sau:
driver.findElement(By.className("example"));
Tuy nhiên, như các bạn quan sát, dưới class=”example” có 2 phần tử là title “Number” và phần input có type = input. Do vậy, để chỉ định chính xác phần tử nào cần một method phức tạp hơn chút. Có nhiều cách định vị, nhưng mình thường sử dụng Css Selector. Về chi tiết cách định vị bằng Css Selector các bạn có thể tham khảo trong bài viết sau.
Định Vị Phần Tử Web Thông Qua XPath
XPath giúp định vị các phần tử Web bằng các biểu thức XML. Cú pháp cơ bản được sử dụng cho XPath làm công cụ định vị như một CSS locator trong Selenium WebDriver như sau:
1XPath: //tagname[@attribute = ‘value’]
TagName là thẻ trong cấu trúc DOM của trang Web. TagName có thể là input tag, anchor tag, v.v..
Các thuộc tính được xác định thông qua tiền tố ‘@’ và giá trị tương ứng của chúng. Do đó, các thuộc tính như Name, ID, Class, v.v.. có thể được sử dụng cùng tới TagName.
Có nhiều cách sử dụng XPath trong Selenium, chúng ta sẽ lần lượt tìm hiểu dưới đây:
- Standard XPath
Như tên gọi, đây là cách cơ bản (hoặc tiêu chuẩn) để viết XPath. Để minh họa cách sử dụng công cụ định vị XPath tiêu chuẩn trong Selenium, hãy tìm phần tử username trên trang Login dưới đây: https://the-internet.herokuapp.com/login
XPath tiêu chuẩn của thuộc tính username là //type[@name= ’value of name’]. Đây là cách XPath được sử dụng với phương thức findElement() để định vị phần tử.
Cú pháp:
driver.findElement(By.xpath("//type[@name='value of name']"));
Trong ví dụ trên, Standard XPath được sử dụng với phương thức findElement() để định vị phần tử như sau:
driver.findElement(By.xpath("//input[@name='username']"));
- XPath Contains
XPath contains làm việc giống như CSS selector ‘contains’. Chúng được sử dụng cho việc tìm kiếm các phần tử Web có giá trị thay đổi linh hoạt.
Cú pháp:
driver.findElement(By.xpath("//tagName[contains(@attribute, 'partial value of attribute')]"));
Trong ví dụ trên, XPath contains được sử dụng với phương thức findElement() để định vị phần tử như sau:
driver.findElement(By.xpath("//input[contains(@name,'user')]"));
- XPath Starts-with
Phương thức starts-with() trong XPath cung cấp các chức năng tương tự như Bộ chọn CSS trong Selenium. Nó giúp định vị các phần tử bắt đầu bằng một giá trị thuộc tính được chỉ định. Phương thức started-with() trong XPath chủ yếu được sử dụng để định vị các phần tử Web có giá trị thay đổi khi làm mới trang.
Cú pháp:
driver.findElement(By.xpath("//input[starts-with(@attribute,'prefix of attribute')]"));
Trong ví dụ trên, XPath starts-with được sử dụng với phương thức findElement() để định vị phần tử như sau:
driver.findElement(By.xpath("//input[starts-with(@name,'user')]"));
- XPath using ‘and’ & ‘or’
Các toán tử ‘and’ & ‘or’ trong bộ chọn XPath trong Selenium được sử dụng khi định vị một phần tử Web dựa trên các bộ điều kiện nhất định. Trong trường hợp ‘and’, cả hai điều kiện phải là Đúng. Mặt khác, một trong hai điều kiện có thể đúng với ‘or’ trong toán tử XPath.
Trong ví dụ trên, XPath ‘and’ được sử dụng với phương thức findElement() để định vị phần tử như sau:
driver.findElement("//input[@name='username' and @id='username']");
XPath ‘or’ được sử dụng với phương thức findElement() để định vị phần tử như sau:
driver.findElement(By.xpath("//input[@name='username'or @id='username']"));
- XPath text
Text trong bộ định vị XPath trong Selenium giúp định vị phần tử Web thông qua XPath bằng cách sử dụng kết hợp văn bản chính xác. Nó được sử dụng khi các phần tử phải được định vị bằng cách xem xét các thẻ chứa văn bản nhất định.
Cú pháp
driver.findElement(By.xpath("/div[text()='content of text]"));
XPath Text được sử dụng với phương thức findElement() để định vị phần tử như sau:
driver.findElement(By.xpath("//i[text()='Login']"));
Trên đây mình đã điểm qua một số cách định vị phần tử Web trong Selenium. Bài viết đến đây đã khá dài, hẹn gặp lại cách bạn trong bài viết tiếp theo về định vị phần tử Web thông qua việc sử dụng CSS Selector. Hy vọng bài viết hôm nay giúp được phần nào cho các bạn trong học tập và công việc.
Hẹn gặp lại các bạn trong bài viết tiếp theo!
Happy Testing!