Browser Command Part 3

Duy Văn | 27/03/2025

Bài viết này thì đến lượt nhóm method thuộc interface WebElement. Một object WebElement khi khởi tạo sẽ tham chiếu đến một element trên trang web, và tham chiếu này là tạm thời, tức là nó chỉ trỏ đến đúng element đấy, trong tình huống trang web thay đổi về DOM, id của element thay đổi thì object WebElement sẽ không còn hợp lệ nữa, nếu tương tác sẽ dính lỗi StaleElementReferenceException

Ban đầu, một WebElement sẽ cần được khởi tạo và gán với tham chiếu đến HTML element sử dụng các method findElement hay findElements của interface WebElement thuộc WebDriver


WebDriver driver = new ChromeDriver();
WebElement element = driver.findElement(By.id("element-id"));

Sau đó object WebElement sẽ có thể sử dụng các method sau mà trong bài viết này mình sẽ cover

  • clear():void
  • click():void -findElement(By by):WebElement và findElements(By by):List<WebElement> - cái này thì thuộc về driver để khởi tạo -getAttribute(String name):String
  • getCssValue(String propertyName):String
  • getLocation():Point
  • getTagName():String
  • getText():String
  • isDisplayed():boolean
  • isEnabled():boolean
  • isSelected():boolean
  • sendKeys(CharSequence... keysToSend):void
  • submit():void

clear():void

Method này sẽ xóa hết text trong một element input, textarea hoặc textfield


WebElement element = driver.findElement(By.id("element-id"));
element.clear();

Nó sẽ không hoạt động trên các dạng element khác

sendKeys(CharSequence… keysToSend):void

Method này sẽ mô phỏng việc gõ một chuỗi ký tự khi tương tác với một element, nếu element là dạng input, hoặc trang web có trigger JS để thay đổi trạng thái thì method này sẽ hoạt động


WebElement element = driver.findElement(By.id("element-id"));
element.sendKeys("Hello World");

Ở ví dụ trên, nếu element là một trường text (input, textarea) thì nó sẽ gõ chuỗi Hello World vào trường đấy

click():void

Quá đơn giản và cơ bản rồi, method này sẽ mô phỏng việc click chuột vào một element


WebElement element = driver.findElement(By.id("element-id"));
element.click();

Method này thường gặp một vấn đề, đó là thứ nhất, element phải thuộc nhóm visible (displayed), thứ hai, element phải thuộc nhóm interactable (enabled), nếu không sẽ gặp lỗi ElementNotInteractableException. Thường thì để xử lý vấn đề này (mình sẽ có một bài viết riêng), chúng ta cần ít nhất là đợi để trang web load hoàn toàn, hoặc đợi cho element đó xuất hiện, nên né việc phụ thuộc hoàn toàn vào findElement và click()

Hay nhiều khi element chúng ta đang muốn click bị chặn bởi element khác với lỗi ElementClickInterceptedException và messageError "Element is not clickable at point (x, y)... Other element would receive the click..." cũng cần một cách xử lý thông minh mà mình sẽ nêu trong bài viết khác

Một yêu cầu nữa là element cần có chiều rộng (width) và chiều cao (height) lớn hơn 0

isDisplayed():boolean

Method này trả về boolean, nó kiểm tr xem element có đang được hiển thị hay không. Nếu một element có tồn tại trong trang, nằm trong DOM, nhưng không hiển thị (display: none, hay là visibility: hidden) thì method này sẽ trả về false


WebElement element = driver.findElement(By.id("element-id"));
boolean isDisplayed = element.isDisplayed();

isEnabled():boolean

Method này kiểm tra xem element có đang enabled hay không, nếu element không thể tương tác được (disabled) thì method này sẽ trả về false, CSS property cho element thường là dạng


element:disabled {
    pointer-events: none;
    opacity: 0.5;
}



WebElement element = driver.findElement(By.id("element-id"));
boolean isEnabled = element.isEnabled();

isSelected():boolean

Method này kiểm tra xem element có đang được chọn hay không, thường dùng cho các element input như radio, checkbox, select options, mình sẽ cover nhiều hơn về sau


WebElement element = driver.findElement(By.id("element-id"));
boolean isSelected = element.isSelected();

submit():void

Method này sẽ mô phỏng việc submit form, nó sẽ submit form mà element đó thuộc về


WebElement element = driver.findElement(By.id("element-id"));
element.submit();

getText():String

Method này sẽ trả về text của element (innerText), nếu element là một input, textarea thì nó sẽ trả về giá trị của element đó, nếu element là một element khác thì nó sẽ trả về text bên trong element đó


WebElement element = driver.findElement(By.id("element-id"));
String text = element.getText();

getTagName():String

Method này sẽ trả về tên của tag HTML của element


WebElement element = driver.findElement(By.id("element-id"));
String tagName = element.getTagName();

getCssValue(String propertyName):String

Method này sẽ trả về giá trị của một CSS property của element, nếu property không tồn tại thì nó sẽ trả về null


WebElement element = driver.findElement(By.id("element-id"));
String color = element.getCssValue("color");

getAttribute(String name):String

Method này sẽ trả về giá trị của một attribute của element, nếu attribute không tồn tại thì nó sẽ trả về null


WebElement element = driver.findElement(By.id("element-id"));
String href = element.getAttribute("href");

getSize():Dimension

Method này sẽ trả về kích thước của element, nó sẽ trả về chiều rộng và chiều cao của element dưới dạng Dimension


WebElement element = driver.findElement(By.id("element-id"));
Dimension size = element.getSize();
System.out.println("Width: " + size.getWidth());
System.out.println("Height: " + size.getHeight());

getLocation():Point

Method này sẽ trả về tọa độ của element, nó sẽ trả về tọa độ x và y của element dưới dạng Point


WebElement element = driver.findElement(By.id("element-id"));
Point location = element.getLocation();
System.out.println("X: " + location.getX());
System.out.println("Y: " + location.getY());