How to get HTML5 validation message with Selenium

1. Get HTML5 Message on input

Ví dụ có element là Email input trên website demo CMS: https://cms.anhtester.com/login

WebElement inputEmail = driver.findElement(By.xpath("//input[@id='email']"));

Bản chất của cái phần Message đó là thuộc tính đính kèm trong ô input chứ không phải là một đối tượng element rời rạc trong DOM (cây thư mục HTML) nên chúng ta không inspect để xác định nó được. Mà phải thông qua element input đó để xác định dựa trên thuộc tính của nó.

Lưu ý các thuộc tính đính kèm không hiện diện để chúng ta nhìn thấy khi inspect, mà phải tự ngầm hiểu nếu nó là thẻ HTML5 (ví dụ Bootstrap ưa dùng) thì nó sẽ tự tồn tại trong chính cái thẻ input đó, chúng ta chỉ việc chỉ định đúng tên thuộc tính để xử lý.

Để lấy giá trị text từ HTML5 validation message trong ô input ấy chúng ta sử dụng attribute name là "validationMessage", mặc dù không nhìn thấy nó xuất hiện trong DOM tại thẻ input email 😁

String validationMessage = inputEmail.getAttribute("validationMessage");
System.out.println(validationMessage);

Code demo sử dụng Selenium Java và TestNG Framework

@Test
public void testGetHTML5Message() {
    driver.get("https://cms.anhtester.com/login");

    driver.findElement(By.xpath("//button[normalize-space()='Login']")).click();
    sleep(1);

    WebElement inputEmail = driver.findElement(By.xpath("//input[@id='email']"));

    //Get HTML5 Message on input
    String validationMessage = inputEmail.getAttribute("validationMessage");
    System.out.println(validationMessage);

    Assert.assertEquals(validationMessage, "Please fill out this field.", "The validation message of Email field not match.");
}

2. Check HTML5 Has Required Validation Message

Kiểm tra xem ô input đó có tồn tại cái validation message hay không.

Sử dụng class JavascriptExecutor của Selenium để thực thi đoạn script

return arguments[0].required;

@Test
public void testCheckHTML5HasRequiredMessage() {
    driver.get("https://cms.anhtester.com/login");

    driver.findElement(By.xpath("//button[normalize-space()='Login']")).click();
    sleep(1);

    WebElement inputEmail = driver.findElement(By.xpath("//input[@id='email']"));

    //Check HTML5 Has Required Message
    System.out.println("Required: " + ((JavascriptExecutor) driver).executeScript("return arguments[0].required;", inputEmail));
    Assert.assertTrue((Boolean)((JavascriptExecutor) driver).executeScript("return arguments[0].required;", inputEmail), "Email not required field.");
}

3. Check HTML5 Message with Value Valid or Invalid

Kiểm tra xem ô input đó có chấp nhận đúng kiểu giá trị điền vào hay chưa, nếu đúng trả về true và không thông báo message nữa, còn nếu sai format giá trị thì trả về false và báo message lên.

Trong ví dụ là format của email đang điền vào ô email input.

Sử dụng class JavascriptExecutor của Selenium để thực thi đoạn script

return arguments[0].validity.valid;

@Test
public void testCheckHTML5MessageWithValueValid() {
    driver.get("https://cms.anhtester.com/login");

    driver.findElement(By.xpath("//button[normalize-space()='Login']")).click();
    sleep(1);

    WebElement inputEmail = driver.findElement(By.xpath("//input[@id='email']"));

    inputEmail.sendKeys("admin@example.com");
    sleep(2);

    //Check HTML5 Message With Value Valid - True
    System.out.println("Check Valid: " + ((JavascriptExecutor) driver).executeScript("return arguments[0].validity.valid;", inputEmail));
    Assert.assertTrue((Boolean)((JavascriptExecutor) driver).executeScript("return arguments[0].validity.valid;", inputEmail), "Email value not valid.");

    inputEmail.clear();
    inputEmail.sendKeys("admin");
    driver.findElement(By.xpath("//button[normalize-space()='Login']")).click();
    sleep(2);

    //Check HTML5 Message With Value Valid - False
    System.out.println("Check Valid: " + ((JavascriptExecutor) driver).executeScript("return arguments[0].validity.valid;", inputEmail));
    Assert.assertTrue((Boolean)((JavascriptExecutor) driver).executeScript("return arguments[0].validity.valid;", inputEmail), "Email value not valid.");
}