Một việc quan trọng trong automation project là xác định được locator của các phần tử trên trang web, hay là xác định vị trí của các phần tử ấy trên trang web. Tất nhiên bằng mắt thường thì ta thừa biết là button này, button kia ở chỗ nào trên trang rồi, hay là field này là field gì, nhập những cái gì, check box này đã check hay chưa …. Tuy nhiên để làm sao code auto của mình có cũng biết được những điều ấy thì ta phải dựa vào cấu trúc và thành phần của trang web đó.
Mỗi phần tử trên trang web sẽ có một locator tương ứng. Và locator của các phần tử cung cấp cho chúng ta cách để có thể truy cập tới các phần tử HTML trong trang web. Với Selenium ta có thể sử dụng các locator này để gửi yêu cầu thực thi các tương tác tới các text box, các đường dẫn (link) được tích hợp trên trang, checkbox, button hay các phần tử web khác.
Trong thực tế, đôi khi để xác định được vị trí của các phần tử trên giao diện web thì không phải lúc nào cũng dễ dàng, có khi lại lấy ra không đúng thông tin phần tử cần lấy, hoặc có khi là không thể lấy được ra nữa.
Vì vậy, một số cách dưới đây sẽ giúp bạn lấy locator của các phần tử hiệu quả hơn nhé.
Các cách này được sắp xếp theo thứ tự ưu tiên sử dụng từ cao xuống thấp, vì vậy trong khi làm, nếu có nhiều cách có thể lấy được locator thì hãy ưu tiên theo list dưới này nhé!
Đầu tiên, để xác định được phần tử HTML trên trang web, Selenium hỗ trợ 2 phương thức findElement(By by) và findElements(By by) được cung cấp bởi WebDriver và WebElement. Vậy 2 phương thức này khác nhau như thế nào?
findElement(By by)
- Nếu như không tìm thấy sẽ trả về lỗi (throw exception).
- Nếu như tìm thấy 1 element sẽ return WebElement element đó.
- Nếu như tìm thấy nhiều element sẽ return element tìm thấy đầu tiên.
findElements(By by)
- Nếu như không tìm thấy sẽ return 1 list rỗng (ko trả về lỗi).
- Nếu như tìm thấy 1 giá trị sẽ return list có 1 giá trị.
- Nếu như tìm thấy nhiều giá trị sẽ return list có nhiều giá trị element
Bảng sau liệt kê tất cả cú pháp Java để định vị các phần tử trong Selenium WebDriver theo thứ tự ưu tiên như sau:
| Phương thức | Cú pháp | Mô tả |
|---|---|---|
| Theo ID | driver.findElement(By.id (<element ID>)) | Định vị một phần tử bằng thuộc tính ID |
| Theo name | driver.findElement(By.name (<element name>)) | Định vị một phần tử bằng cách sử dụng thuộc tính Name |
| Theo class name | driver.findElement(By.className (<element class>)) | Định vị một phần tử bằng thuộc tính Class |
| Theo tag name | driver.findElement(By.tagName (<htmltagname>)) | Định vị một phần tử bằng cách sử dụng thẻ HTML |
| Bằng văn bản liên kết | driver.findElement(By.linkText (<linktext>)) | Tìm liên kết bằng văn bản liên kết |
| Bằng văn bản liên kết một phần | driver.findElement(By.partialLinkText (<linktext>)) | Định vị liên kết bằng văn bản một phần của liên kết |
| Theo CSS | driver.findElement(By.cssSelector (<css selector>)) | Định vị một phần tử bằng cách sử dụng bộ chọn CSS |
| Theo XPath | driver.findElement(By.xpath (<xpath>)) | Định vị một phần tử bằng cách sử dụng truy vấn XPath |
Nội dung
- 1. Theo Id – Lấy ra phần tử có thuộc tính @Id
- 2. Theo Name – Lấy ra phần tử đầu tiên tìm được có thuộc tính @Name
- 3. CSS Class name –Truy cập vào phần tử web theo class name
- 4. Theo Link text – Lấy ra phần tử hiển thị dòng text và có link tương ứng
- 5. Theo Partial Link Text – Lấy ra phần tử hiển thị dòng text và có partial link tương ứng
- 6. Theo Tag name – Lấy ra phần từ có HTML tag tương ứng cần lấy
- 7. CSS selector – Truy cập vào các phần tử web
- 8. XPath – Truy cập vào các phần tử sử dụng XPath Expression
1. Theo Id – Lấy ra phần tử có thuộc tính @Id
Mỗi phần tử trên trang thông thường sẽ được gắn 1 id duy nhất. Và đây là cách được đánh giá là tốt nhất khi sử dụng để lấy ra locator của phần tử. Tuy nhiên là có một lưu ý, một số framework hỗ trợ devevloper sinh ID động (ví dụ như angular, react) – có nghĩa là mỗi lần run thì phần tử đó lại sinh ra một ID khác nhau, lúc này thì bạn không thể sử dụng ID đó được. Bạn phải tìm một cách khác để xác định được locator cần lấy, và lúc này thì bạn nên chuyển sang cách lấy theo CSS or Xpath.
VD: Lấy ra phần tử có id = FirstName:
WebElement firstName= driver.findElement(By.id(“FirstName”));
2. Theo Name – Lấy ra phần tử đầu tiên tìm được có thuộc tính @Name
Gần giống như thuộc tính id, mỗi trường dữ liệu sẽ được gắn một tên duy nhất và thường thì tên này không bị thay đổi sau các lần nâng cấp hay sửa đổi. Đây là một trong những lựa chọn tốt nhất khi lấy locator cho các phần tử trong form login hoặc form mà có nhiều trường input tương tự nhau như khai báo hàng hóa hay là form đăng ký nào đó.
VD: Lấy ra phần tử có name = FirstName
WebElement firstName= driver.findElement(By.name(“FirstName”));
3. CSS Class name –Truy cập vào phần tử web theo class name
CSS class locator sử dụng thuộc tính class để lấy ra phần tử đầu tiên xuất hiện trong trang web, cách này hiệu quả trong việc lấy ra những item có một style duy nhất nào đó.
Dưới đây là ví dụ lấy ra phần tử có thuộc tính class name là button:
VD: Tìm ra các phần tử có class name là button:
WebElement elements =driver.findElement(By.className(“button”));
4. Theo Link text – Lấy ra phần tử hiển thị dòng text và có link tương ứng
Sử dụng link text là cách để bạn tìm ra các liên kết trong trang web của bạn. Rất thích hợp cho việc test điều hướng trang.
VD: Lấy ra phần tử có linktext: HTML Validator
WebElement linkText= driver.findElement(By.linkText(“HTML Validator”));
5. Theo Partial Link Text – Lấy ra phần tử hiển thị dòng text và có partial link tương ứng
Cách này thì cũng tương tự như lấy link text, chỉ khác ở chỗ cách sử dụng và dùng hàm để tìm ra element tương tứng với nó thôi.
Cùng xem ví dụ dưới đây để hiểu hơn nhé:
VD: Lấy ra phần tử có PartialLinkText: XPath
WebElement linkText = driver.findElement(By.PartialLinkText(“XPath“));
6. Theo Tag name – Lấy ra phần từ có HTML tag tương ứng cần lấy
Sử dụng thuộc tính tag name để lấy ra tất cả các element có tag name mà bạn muốn lấy. Để hiểu về tag name, thì các bạn xem ví dụ dưới này nhé!
Ở phía dưới là câu lệnh lấy ra tất cả các phần tử có tag name là input. Tương tự bạn có thể thay thế tag input này bằng một tag name khác (ví dụ như div, span …) , để lấy ra được các phần tử có tag name mà bạn cần lấy ra.
List<WebElement> elements = driver.findElements(By.tagName(“input”));
String[] linkTexts = new String[elements .size()];
7. CSS selector – Truy cập vào các phần tử web
CSS selector không khác so với XPath, nhưng cách này được đánh giá là linh hoạt và mạnh mẽ hơn nhiều so với sử dụng Xpath. Khác với XPath, CSS selector không phụ thuộc vào cấu trúc DOM. Giúp bạn có thể thực hiện được một số tương tác mà khi sử dụng XPath thì bạn khó có thể làm được.
Bạn sẽ dễ dàng để tìm ra được locator duy nhất của phần tử bằng cách kết hợp với nhiều thuộc tính CSS khác. Tuy nhiên nó cũng đòi hỏi người dùng phải có hiểu biết sâu hơn về CSS/Javascript.
VD: Lấy ra phần tử bằng cách sử dụng cssSelector:
WebElement element= driver.findElements(By.cssSelector(“input[id=FullName’]”));
8. XPath – Truy cập vào các phần tử sử dụng XPath Expression
XPath là viết tắt của ngôn ngữ đường dẫn XML. Nó là một ngôn ngữ truy vấn để chọn các node từ một tài liệu XML. XPath dựa trên biểu diễn cây của các tài liệu XML và cung cấp khả năng điều hướng xung quanh cây bằng cách chọn các node bằng cách sử dụng nhiều tiêu chí khác nhau. Đây là một sự lựa chọn phổ biến trong các project automation vì tính linh động của nó.
Bài viết được mình tham khảo từ:
https://viettuts.vn/selenium/selenium-webdriver-locators-xac-dinh-vi-tri-phan-tu-html
https://vananhtooo.wordpress.com/2017/08/05/cac-cach-lay-locator-cua-web-element/