Hot topic
Vanna  

How to get HTML5 validation message with Selenium?

To get an HTML5 validation message using Selenium, you need to interact with form validation in a way that can capture the browser’s built-in error messages. Typically, HTML5 validation occurs when a form is submitted, and if the fields don’t meet the required constraints (like required, pattern, minlength, etc.), the browser displays a validation message.

Selenium, by default, does not directly capture browser validation messages as they are shown by the browser UI, but you can handle this in the following ways:

Steps to Get HTML5 Validation Messages with Selenium:

1. Trigger the Form Validation:

First, you need to trigger the form validation by interacting with the form element (e.g., clicking the submit button) to invoke the browser’s HTML5 validation mechanism.

2. Access the validationMessage Property:

The browser sets a validationMessage property on the form input field when validation fails. You can retrieve this property using JavaScript and Selenium.

Here’s how you can implement this:

Example Using Python and Selenium:

python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

# Initialize WebDriver (e.g., Chrome)
driver = webdriver.Chrome()

# Open a webpage with a form that has HTML5 validation (adjust URL as needed)
driver.get('your_form_page_url')

# Find the form or input element that you want to trigger the validation on
input_element = driver.find_element(By.ID, 'your_input_field_id')

# Trigger the HTML5 validation by submitting the form or clicking the submit button
submit_button = driver.find_element(By.ID, 'submit_button_id')
submit_button.click()

# Wait for validation message to be visible
driver.implicitly_wait(2)

# Get the validation message
validation_message = driver.execute_script("return arguments[0].validationMessage;", input_element)

# Print out the validation message
print("Validation message:", validation_message)

# Close the browser
driver.quit()

Key Points:

  1. validationMessage: This property will return the validation error message set by the browser. If the field passes validation, it will return an empty string.
  2. Trigger Validation: By clicking the submit button or triggering a form submission, the validation message (if any) will be displayed.
  3. JavaScript Execution: The driver.execute_script() method is used to retrieve the validationMessage directly from the browser using JavaScript.

Example Using Java (with Selenium WebDriver):

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

public class Html5ValidationMessage {
    public static void main(String[] args) {
        // Set up the WebDriver (Chrome)
        WebDriver driver = new ChromeDriver();

        // Navigate to the page with the form
        driver.get("your_form_page_url");

        // Find the input element to trigger validation
        WebElement inputElement = driver.findElement(By.id("your_input_field_id"));

        // Submit the form or click the submit button
        WebElement submitButton = driver.findElement(By.id("submit_button_id"));
        submitButton.click();

        // Wait for the validation message to appear
        try {
            Thread.sleep(2000); // This is just for example; better to use WebDriverWait
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        // Get the validation message using JavaScript
        JavascriptExecutor js = (JavascriptExecutor) driver;
        String validationMessage = (String) js.executeScript("return arguments[0].validationMessage;", inputElement);

        // Print the validation message
        System.out.println("Validation message: " + validationMessage);

        // Close the driver
        driver.quit();
    }
}

Additional Notes:

  • Wait for Validation: Sometimes you may need to wait for the validation message to appear (if it’s not immediate). Using WebDriverWait is a better practice than Thread.sleep().
  • JavaScript Validation: Some browsers provide the validation message through native JavaScript, so retrieving it via validationMessage is necessary.
  • Browser Support: Ensure that the browser you’re using supports HTML5 form validation. Modern browsers like Chrome, Firefox, and Edge do.

By following the steps above, you can easily retrieve the HTML5 validation message using Selenium in your automation tests.

Leave A Comment