How to Handle HTML5 Constraint Validation Pop-Up Using Selenium

How to handle html5 constraint validation pop-up using Selenium?

The popup which you are referring is the outcome of Constraint API's element.setCustomValidity() method.

Note: HTML5 Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.

Solution

To retrieve the text which results out from the element.setCustomValidity() method, you can use either of the following Locator Strategies:

Using Python, Mozilla and CssSelector:

Code Block:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

driver = webdriver.Firefox(executable_path=r'C:\Utility\BrowserDrivers\geckodriver.exe')
driver.get("https://accounts.us1.advisor.ws/user/login")
email_username = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.cell.small-21.form-text.required#edit-name[name='name']")))
print(email_username.get_attribute("validationMessage"))

Console Output:
```
Please fill out this field.
```

Using Java, Chrome and Xpath:

Code Block:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class validationmessage {

    public static void main(String[] args) {

        System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
        ChromeOptions options = new ChromeOptions();
        options.addArguments("start-maximized");
        options.addArguments("disable-infobars");
        options.addArguments("--disable-extensions"); 
        WebDriver driver =  new ChromeDriver(options);
        driver.get("https://accounts.us1.advisor.ws/user/login");
        WebElement email_username = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='cell small-21 form-text required' and @id='edit-name'][@name='name']")));
        System.out.println(email_username.getAttribute("validationMessage"));
    }
}

Console Output:
```
Please fill out this field.
```

How to get HTML5 validation message with selenium?

The validation messages are not the part of your DOM. They are generated because your input fileds have required attribute. If you see the HTML of your fields -

<input type="text" placeholder="Enter Username" name="uname" required="">

You can see it has required attribute turned on. Check this out. You can verify that your fields have this required attribute or not, like this-

WebElement inputElement = driver.findElement(By.name("uname"));
JavascriptExecutor js = (JavascriptExecutor) driver;  
boolean isRequired = (Boolean) js.executeScript("return arguments[0].required;",inputElement)
if(isRequired )
{
   //element is required and validation error will popup if the field is empty.
}

There is no need to care about whether the message appears or not because that will handled by the browser.

How to get the text from the HTML5 input field error message in Selenium?

The Selenium API doesn't support directly a required field. However, you can easily get the state and the message with a piece of JavaScript (Java):

JavascriptExecutor js = (JavascriptExecutor)driver;

WebElement field = driver.findElement(By.name("email"));
Boolean is_valid = (Boolean)js.executeScript("return arguments[0].checkValidity();", field);
String message = (String)js.executeScript("return arguments[0].validationMessage;", field);

Note that it's also possible to use getAttribute to get the validationMessage even though it's a property:

String message = driver.findElement(By.name("email")).getAttribute("validationMessage");

How to get the text from mouseover popup element using Selenium Webdriver

The text of the mousehover on the login page from the email field which you are referring is the outcome of Constraint API's element.setCustomValidity() method.

Note: HTML5 Constraint validation doesn't remove the need for validation on the server side. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.

Solution

To retrieve the text which results out from the element.setCustomValidity() method, you can use either of the following Locator Strategies:

Using Python and CssSelector:

Code Block:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

driver.execute("get", {'url': 'https://app.involve.me/login/?_ga=2.49216998.1374332121.1660294616-36640509.1660294616'})
print(WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[name='email']"))).get_attribute("validationMessage"))

Console Output:
```
Please fill out this field.
```

Using Java and Xpath:

Code Block:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class validationmessage {

    public static void main(String[] args) {

        driver.get("https://app.involve.me/login/?_ga=2.49216998.1374332121.1660294616-36640509.1660294616");
        System.out.println(new WebDriverWait(driver, Duration.ofSeconds(10)).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@name='email']"))).getAttribute("validationMessage"));
    }
}

Console Output:
```
Please fill out this field.
```

How to Handle HTML5 Constraint Validation Pop-Up Using Selenium