Như bạn biết, data-capture control được sử dụng để xác định văn bản (text), kích thước (size), vị trí (location) và giá trị CSS của phần tử web, v.v. trong đó getText() và getAttribute() là hai phương thức phổ biến của data-capture controls.
Trong bài viết này, chúng ta sẽ cùng tìm hiểu về phương thức getText(), getAttribute() và sự khác biệt giữa chúng trong Selenium WebDriver.
Thẻ (tag) và thuộc tính (attributes) HTML
Trước khi bắt đầu, chúng ta cùng tìm hiểu nhanh về thẻ (tags) và thuộc tính (attributes) của HTML nhé.
Các thẻ (tags) HTML đánh dấu điểm bắt đầu và kết thúc của các phần tử HTML và các thuộc tính(attributes) HTML được sử dụng để xác định các đặc điểm của một phần tử HTML và được đặt bên trong thẻ mở của phần tử. Tất cả các thuộc tính được tạo thành từ hai phần – tên và giá trị. Phần nằm bên trái của dấu “=” được gọi là tên thuộc tính, và phần bên phải là giá trị thuộc tính.
Ví dụ: Như hình bên dưới của Date of birth
- td là thẻ (tag) chứa phần tử (element) Date of birth
- Trong thẻ input kế đó có type=”text” … là thuộc tính có tên là type và giá trị là “text”
Phương thức String getText()
Phương thức getText() được khai bao báo trong interface WebElement, nó trả về dữ liệu kiểu String là văn bản innerText (mà không bị ẩn bởi CSS – Ví dụ “2020” thuộc thẻ span ở trên sẽ không được hiển thị vì giá trị “display:none;“) của phần tử web, bao gồm các sub-element, không có bất kỳ khoảng trắng nào ở đầu hoặc cuối.
innerText là văn bản nằm giữa thẻ mở và đóng.
Ví dụ: Xuất ra màn hình nội dung tên field ‘Date of birth', ‘2020' , ngày được nhập (hình trên).
- Xác định locator của ‘Date of birth', ‘2020' và ngày được nhập
- Nhập ngày (“01/28/2023”) – sử dụng phương thức sendkeys();
- Sử dụng phương thức getText() để lấy nội dung văn bản và xuất ra màn hình
Code example
package SeleniumWebDriverTutorial;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.security.Key;
import java.time.Duration;
public class SeleniumPractice {
public static void main (String[] args){
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("D:\\PROJECTS\\workspace\\MyPractice\\seleniumTutorial\\src\\main\\java\\registrationForm.html");
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
WebElement dob, year, date;
//WebElement of 'Date of birth'
dob = driver.findElement(By.xpath("//tr[@id='birthday']/td[1]"));
//WebElement of year '2000' is hidden in CSS
year = driver.findElement(By.xpath("//tr[@id='birthday']/td[2]/span"));
//WebElement of date field
date = driver.findElement(By.id("from_filter"));
date.sendKeys("01/28/2023");
date.sendKeys(Keys.TAB);
//Print out
System.out.println("getText() - Print lable of \"Date of birth\" : " + dob.getText());
System.out.println("getText() - Print lable of \"year\" : " + year.getText());
System.out.println("getText() - Print value of \"selected date\" : " + date.getText());
driver.quit();
}
}Kết quả
Sau khi chạy đoạn chương trình trên, bạn sẽ thấy kết quả chỉ có Date of birth được trả về như bên dưới.
Vậy làm cách nào để chúng ta lấy được text của field bị ẩn bởi CSS và field ngày? – Có hai cách để lấy giá trị, đó là:
- Sử dụng phương thức getAttribute(String name). Các bạn xem bên dưới.
- Sử dụng JavascriptExecutor. Các bạn xem ở đây.
Phương thức String getAttribute(String name)
Phương thức getAttribute() được khai bao báo trong interface WebElement, nó sẽ đi tìm và trả về giá trị thuộc tính (kiểu chuỗi – String) của phần tử web trong mã HTML.
- getAttibute() trả về ‘null' nếu không có thuộc tính nào
- getAttribute() sẽ trả về giá trị “true” hoặc null cho các thuộc tính có giá trị là Boolean.
Sử dụng getAttribute(String name) để lấy giá trị của một thuộc tính chẳng hạn như checkbox hoặc radio button. Cũng có thể được sử dụng để lấy giá trị của dữ liệu vừa được nhập vào một trường
Ví dụ: Chúng ta đi tiếp ví dụ ở trên – Xuất ra màn hình nội dung tên field ‘Date of birth' và ‘2020' , ngày được nhập và placeholder của ngày nhập
- Xác định locator của ‘Date of birth', ‘2020' , ngày được nhập
- Nhập ngày (“01/28/2023”) – sử dụng phương thức sendkeys();
- Sử dụng phương thức getAttribute() để lấy nội dung văn bản và xuất ra màn hình
Kiểm tra HTML và properties của WebElement
Ở trên chúng ta không thể dùng getText() để lấy giá trị ‘ 2020' trong thẻ span và giá trị ngày nhập vào. Chúng ta cùng kiểm tra lại HTML và properties của các field này để xác định vì sao và sử dụng thuộc tính nào khi dùng phương thức getAttribute() cho chính xác nhé.
- F12 (hoặc Ctrl +Shift+I) để mở chrome developer mode (trên window)
- Nhấp vào phần tử (WebElement) cần kiểm tra trên tab Elements
- Nhấp vào Properties tab và kiểm tra các thuộc tính innerHTML, innerText, value , …
- ‘Date of birth' có chứa trong innerText và nó không bị ẩn bởi CSS, nên có thể sử dụng cả hai phương thức getText() và getAttribute(“innerText”)
- ‘ 2020' có chứa trong innerText và nó bị ẩn bởi CSS, nên chỉ có thể sử dụng phương thức getAttribute(“innerText”)
- Ngày được nhập (01/28/2023) không chứa trong innerText/innerHTML, nhưng nó được chứa trong thuộc tính “value”, nên chỉ có thể sử dụng phương thức getAttribute(“value”)
- placeholder là thuôc tính của input field, nên có thể sử dụng dụng getAttribute(“placeholder”) để lấy giá trị “04/03/2017”
Code example
package SeleniumWebDriverTutorial;
import io.github.bonigarcia.wdm.WebDriverManager;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.security.Key;
import java.time.Duration;
public class SeleniumPractice {
public static void main (String[] args){
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("D:\\PROJECTS\\workspace\\MyPractice\\seleniumTutorial\\src\\main\\java\\registrationForm.html");
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
WebElement dob, year, date;
//WebElement of 'Date of birth'
dob = driver.findElement(By.xpath("//tr[@id='birthday']/td[1]"));
//WebElement of year '2000' is hidden in CSS
year = driver.findElement(By.xpath("//tr[@id='birthday']/td[2]/span"));
//WebElement of date field
date = driver.findElement(By.id("from_filter"));
date.sendKeys("01/28/2023");
date.sendKeys(Keys.TAB);
//Print out
System.out.println("getText() - Print lable of \"Date of birth\" : " + dob.getText());
System.out.println("getText() - Print lable of \"year\" : " + year.getText());
System.out.println("getText() - Print value of \"selected date\" : " + date.getText());
System.out.println("getAttribute() - Print lable of \"Date of birth\" : " + dob.getAttribute("innerText"));
System.out.println("getAttribute() - Print lable of \"year\" : " + year.getAttribute("innerText"));
System.out.println("getAttribute() - Print value of \"selected date\" : " + date.getAttribute("value"));
System.out.println("getAttribute() - Print \"placeholder\" of date field : " + date.getAttribute("placeholder"));
driver.quit();
}
}
Kết quả
Sau khi chạy đoạn chương trinh trên, bạn sẽ thấy phương thức getAttribute() sẽ lấy được giá trị của các trường.
Cheers! 🙂
