Selenium Form WebElement: TextBox, Submit Button, sendkeys(), click()

Forms là các yếu tố web cơ bản để nhận thông tin từ khách truy cập trang web. Web forms sẽ có các thành phần GUI khác nhau như Textboxes, Password fields, Checkboxes, Radio buttons, dropdowns, file inputs,... Trong bài viết này chúng ta sẽ tìm hiểu cách truy cập các phần tử của form khác nhau bằng Selenium Web Driver với Java. Selenium bao gồm mọi yếu tố như một đối tượng của WebElement. Nó cung cấp API để tìm các phần tử và thực hiện hành động như nhập văn bản vào textbox , nhấp vào button,... Chúng ta sẽ thấy các phương thức có sẵn để truy cập từng phần tử form.

Trong bài viết này, chúng ta sẽ xem cách xác định các thành phần sau:

  • Giới thiệu về WebElement, findElement(), findElements()
  • Input Box
  • Nhập dữ liệu vào các trường Input Box
  • Xóa dữ liệu các trường Input Box
  • Buttons
  • Submit Buttons
  • Code hoàn chỉnh
  • Xử lý sự cố

1.Giới thiệu về WebElement, findElement(), findElements()

Selenium Web Driver gói gọn một phần tử đơn giản như là một đối tượng của WebElement. WebDriver xác định các thành phần form dựa trên các thuộc tính khác nhau của các thành phần Web như ID, Name, Class, XPath, Tagname, CSS Selector, link Text,... Web Driver cung cấp hai phương thức để tìm các phần tử:

  • findElement() - tìm một thành phần web duy nhất và trả về dưới dạng đối tượng WebElement.
  • findElements() - trả về danh sách các đối tượng WebElement bổ sung phù hợp với tiêu chí.

Để lấy một phần tử duy nhất - Text Field trong trang web thì chúng ta sử dụng phương thức findElement(). Đối với phương thức findElements() chúng ta sẽ tìm hiểu ở các bài viết tiếp theo nhé.

Step 1: Chúng ta cần import package này để tạo các đối tượng của Web Elements.

import org.openqa.selenium.WebElement;

Step 2: Gọi phương thức findElement() có sẵn trên lớp WebDriver và nhập một đối tượng của WebElement vào. ví dụ:

WebElement email = driver.findElement(By.id("email"));

Để tìm hiểu kỹ hơn về phương thức findElement() các bạn hãy tham khảo các ví dụ bên dưới để xem cách thức hoạt động của nó.

2.Input Box

Input boxes đề cập đến một trong hai loại sau:

  • Text Fields - ô nhập văn bản chấp nhận các giá trị được nhập vào và hiển thị chúng.
  • Password Fields - ô nhập văn bản chấp nhận các giá trị được nhập nhưng che dấu chúng dưới dạng một loạt các ký tự đặc biệt (thường là dấu chấm và dấu hoa thị) để tránh các giá trị nhạy cảm được hiển thị.

3.Locators

Phương thức findElement() nhận một tham số là locator cho một phần tử. Các locator khác nhau như: By.id(), By.name(), By.xpath(), By.CSSSelector(),.. xác định vị trí các thành phần trong trang bằng cách sử dụng các thuộc tính của chúng như id, name hoặc link,...

Chúng ta sẽ sử dụng trang ví dụ http://demo.guru99.com/test/login.html để xác định trường "Email address" bằng cách sử dụng locator là id và trường "Password " bằng cách sử dụng locator là name.

  1. Trường Email xác định bởi id
  2. Trường Password xác định bởi name.

4.Nhập dữ liệu vào các trường Input Box

Để nhập văn bản vào Text Fields và Password Fields thì sendKeys() là phương thức khả dụng trên WebElement. Chúng ta cùng sử dụng trang web http://demo.guru99.com/test/login.html cho ví dụ này:

  1. Tìm trường "Email Address" bằng locator id.
  2. Tìm trường "Password" bằng cách sử dụng locator name.
  3. Nhập văn bản vào "Email Address" bằng phương thức sendKeys().
  4. Nhập mật khẩu vào trường "Password" bằng phương thức sendKeys().

5. Xóa dữ liệu các trường Input Box

Phương thức clear() được sử dụng để xóa văn bản trong hộp nhập. Phương pháp này không cần tham số. Đoạn code dưới đây sẽ thực hiện xóa văn bản khỏi các trường Email hoặc Password.

6. Buttons

Chúng ta có thể truy cập các button bằng phương thức click().

  1. Tìm nút để Sign-in
  2. Nhấp vào button "Sign-in" để đăng nhập vào trang. Bạn có thể tham khảo đoạn code dưới đây:

7. Submit Buttons

Submit Buttons được sử dụng để gửi toàn bộ biểu mẫu đến máy chủ. Chúng ta có thể sử dụng phương thức click() trên thành phần web như button bình thường như chúng ta đã nêu ở mục 5 hoặc sử dụng phương thức submit() trên bất kỳ thành phần web nào.

  1. submit() được gọi với button submit
  2. submit() có thể được gọi từ bất kỳ thành phần nào của form.

Khi submit() được sử dụng, WebDriver sẽ tra cứu DOM để biết phần tử thuộc về dạng nào và sau đó kích hoạt chức năng gửi của nó.

8. Code hoàn chỉnh

Dưới đây là đoạn code hoàn chỉnh, bạn có thể tham khảo:

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class Form {				
    public static void main(String[] args) {									
    		
    	// declaration and instantiation of objects/variables		
        System.setProperty("webdriver.chrome.driver", "D:\\Seleum\\Chrome\\chromedriver.exe"); 					
        WebDriver driver = new ChromeDriver();					
        		
        String baseUrl = "http://demo.guru99.com/test/login.html";					
        driver.get(baseUrl);					

        // Get the WebElement corresponding to the Email Address(TextField)		
        WebElement email = driver.findElement(By.id("email"));							

        // Get the WebElement corresponding to the Password Field		
        WebElement password = driver.findElement(By.name("passwd"));							

        email.sendKeys("[email protected]");					
        password.sendKeys("123456");					
        System.out.println("Text Field Set");					
         
        // Deleting values in the text box		
        email.clear();			
        password.clear();			
        System.out.println("Text Field Cleared");					

        // Find the submit button		
        WebElement login = driver.findElement(By.id("SubmitLogin"));							
                    		
        // Using click method to submit form		
        email.sendKeys("[email protected]");					
        password.sendKeys("123456");					
        login.click();			
        System.out.println("Login Done with Click");					
        		
        //using submit method to submit the form. Submit used on password field		
        driver.get(baseUrl);					
        driver.findElement(By.id("email")).sendKeys("[email protected]");							
        driver.findElement(By.name("passwd")).sendKeys("123456");							
        driver.findElement(By.id("SubmitLogin")).submit();					
        System.out.println("Login Done with Submit");					
         
		//driver.close();		
        		
    }		
}

9. Xử lý sự cố

  • Nếu bạn gặp lỗi NoSuchElementException() trong khi tìm các phần tử, điều đó có nghĩa là phần tử đó không được tìm thấy trong trang tại thời điểm Web driver truy cập trang.
  • Kiểm tra lại locator bằng Firepath hoặc Inspect Element trong Chrome.
  • Kiểm tra khi giá trị được sử dụng trong code khác với giá trị của phần tử trong Firepath hiện tại không
  • Trong trường hợp, bạn thấy rằng giá trị là khác nhau và đang thay đổi linh hoạt, hãy xem xét sử dụng By.xpath() hoặc By.cssSelector(). Nó đáng tin cậy hơn nhưng phức tạp hơn.
  • Đôi khi cũng xảy ra vấn đề chờ đợi tức là web driver đã thực thi đoạn code của bạn ngay cả trước khi trang được tải.

10. Summary

Dưới đây là bảng tóm tắt các lệnh để truy cập từng loại phần tử được nêu từ đầu bài:

Element Command Description
Input Box sendKeys() được sử dụng để nhập giá trị vào textbox
Input Box clear() được sử dụng để xóa giá trị hiện tại của textbox
Links click() được sử dụng để nhấp vào link và chờ tải trang hoàn tất trước khi tiếp tục lệnh tiếp theo.
Submit Button submit() gửi toàn bộ biểu mẫu đến máy chủ

WebDriver cho phép lựa chọn nhiều hơn một tùy chọn trong nhiều thành phần SELECT Bạn có thể sử dụng phương thức submit() trên bất kỳ phần tử nào trong form. WebDriver sẽ tự động kích hoạt chức năng gửi của form chứa phần tử đó.

Link demo các bạn tham khảo: https://drive.google.com/file/d/15_9XhfA4GcLv6jj-fzW-vconUDmzHxUo/view

Tài liệu tham khảo:

https://www.guru99.com/accessing-forms-in-webdriver.html