Locate Elements

Duy Văn | 31/03/2025

Như đã từng đề cập qua trong bài về CSS Selector và XPath trong Browser Automation, để xác định được element để thực hiện tương tác, chúng ta cần tìm nó trong DOM của trang web. Với Selenium, có 8 cách để xác định element:

  • Theo id
  • Theo class
  • Theo tag
  • Theo name
  • Theo link text (nếu nó có href)
  • Theo partial link text (nếu nó có href)
  • Theo CSS Selector
  • Theo XPath

Thứ tự ưu tiên thì thật ra là không có, mà chúng ta sẽ chọn sao cho phù hợp:

  • Đủ ngắn, đủ vững (trước các thay đổi của DOM)
  • Nhanh gọn, ví dụ CSS Selector sẽ nhanh hơn XPath, nên nếu có thể xác định được element dùng CSS Selector, vẫn thoả mãn ngắn và vững thì không tội gì phải dùng XPath

WebDriver cung cấp 2 method để tìm element:

  • findElement()
  • findElements()

Cách sử dụng sẽ rất khác nhau, khác là do nó sẽ gắn liền với 2 practice khác nhau

findElement()

Áp dụng khi chúng ta muốn tìm chỉ duy nhất một element, và locator để xác định element này là duy nhất trong DOM, ví dụ như id, class name, tag name, link text, partial link text. Cách sử dụng như sau:


WebElement element = driver.findElement(By.id("element-id"));
WebElement elementTwo = driver.findElement(By.className("element-class"));

Với syntax trên, method này sẽ lấy vào By object như argument và trả về WebElement object. Nếu không tìm thấy element nào thì nó sẽ ném ra NoSuchElementException

findElements()

Áp dụng khi element của chúng ta không phải duy nhất, hoặc là không biết trước được nó có duy nhất hay không, nó sẽ trả về một list các WebElement, nếu không tìm thấy element nào thì nó sẽ trả về một list rỗng. Cách sử dụng như sau:


List<WebElement> elements = driver.findElements(By.className("element-class"));
List<WebElement> elementsTwo = driver.findElements(By.tagName("element-tag"));

Tóm lại khác biệt giữa findElement và findElements là:

findElement()findElements()
Trả về web element đầu tiên tìm thấyTrả về list các web element tìm thấy
Method chỉ tìm được đúng 1 elementMethod tìm được nhiều element
Nếu không tìm thấy thì ném ra NoSuchElementExceptionNếu không tìm thấy thì trả về list rỗng, không có exception nào
Biến được gán sẽ là WebElementBiến được gán sẽ là List, để truy cập từng web element thì dùng index

By class

Để đi vào việc sử dụng By class, thì với 8 hướng xác định element thì cũng có 8 method trong By class

  • By.id(String id) - tìm theo id: Thường gặp nhất, vì khi một element có id thì tức là phía dev chủ động gắn id cho nó để phân biệt với các element khác. Theo convention thì id sẽ là duy nhất trong một nhóm element của trang web, ví dụ như nhóm (đại diện bởi class) thì trong class đấy chỉ có đúng 1 element có id thế thôi

WebElement element = driver.findElement(By.id("submit"));
  • By.name(String name) - tìm theo name: Tương tự như id, nhưng không phải lúc nào cũng duy nhất, vì có thể có nhiều element có cùng name. Để phục vụ việc phân biệt element thì thường cả id và name sẽ được gắn cho element input, ví dụ như trong một form đăng nhập, có thể họ sẽ không để id là username và password, mà id="login" sẽ là của div đang bọc lấy hai trường điền thông tin, còn bên trong nó thì name sẽ là username và password, cái này thì tuỳ DOM mà chúng ta sẽ linh động

WebElement element = driver.findElement(By.name("submit"));
  • By.className(String class) Sử dụng class là khi element đó thuộc một nhóm các element có cùng tính chất. Vì bản chất dev khi áp dụng class trong web design là để áp dụng style hoặc nhóm các element với nhau, nên bản thân các class này sẽ có những điểm chung. Khi sử dụng class thì thường chúng ta sẽ dùng findElements vì không thể nào mà một class lại chỉ có một element

List<WebElement> elements = driver.findElements(By.className("btn"));
  • By.tagName(String tag) - Tương tự như class, nhưng tag name thì sẽ là tên của element, ví dụ như div, input, button, a, span,… Thường thì tag name sẽ không được sử dụng nhiều trong việc xác định element, vì nó không có tính chất phân biệt giữa các element với nhau

List<WebElement> elements = driver.findElements(By.tagName("input"));
  • By.cssSelector(String selector) - Sử dụng CSS Selector để xác định element, thì chúng ta sẽ sử dụng CSS Selector như đã học trong Browser Automation. Cách sử dụng nó khá đơn giản, toàn bộ cú phát CSS sẽ được đẩy vào ngoặc kép "":

WebElement element = driver.findElement(By.cssSelector("div#submit > input[type='submit']"));
List<WebElement> elements = driver.findElements(By.cssSelector("div#submit > input[type='submit']"));
  • By.xpath(String xpath) - Sử dụng XPath để xác định element. Cách sử dụng cũng là đẩy toàn bộ cú phát XPath sẽ được đẩy vào ngoặc kép "":

WebElement element = driver.findElement(By.xpath("//div[@id='submit']/input[@type='submit']"));
List<WebElement> elements = driver.findElements(By.xpath("//div[@id='submit']/input[@type='submit']"));
  • By.linkText(String text) - Sử dụng link text để xác định element, ví dụ như chúng ta có một link như sau:
<a href="https://www.google.com">Google</a>

Thì chúng ta có thể xác định nó bằng cách:


WebElement element = driver.findElement(By.linkText("Google"));
  • By.partialLinkText(String text) - Tương tự như link text, nhưng không cần phải chính xác 100% với text của link. Ví dụ như chúng ta có một link như sau:
<a href="https://www.google.com">Google Search</a>

Thì chúng ta có thể xác định nó bằng cách:


WebElement element = driver.findElement(By.partialLinkText("Google"));