Handling Validation message due to lack of HTML tag in Selenium with Java

Usually getting the text for validation message upon error or warning condition if there is no directly assigned element (HTML tag) is difficult to inspect. Typically these are neither alert message nor pop-up message. I had the same scenario while working on the project where its unable to inspect the DOM (HTML tag) or x-path of the element for validation message.

Validation messages in the context of Selenium testing

When you are automating web applications with Selenium, crucial part of ensuring the application works as expected is to verifying that the correct validation messages appear at the right times.

• User Experience: Validation messages directly impact the user's understanding of what's happening and how to proceed with the web application.

• Functional Correctness: You need to ensure that the application correctly identifies and informs users about errors or warning actions.

• Data Integrity: Validation messages related to data input helps ensure the system maintains data integrity.

Common Scenarios for Validation Message Testing:

• Form Submissions: Verifying error messages when required fields are left blank, invalid data formats are entered, or passwords don't match.

• Login/Registration: Checking for messages related to incorrect credentials, existing usernames, or successful account creation.

• Data Manipulation: Confirming messages after actions like adding, editing, or deleting items.

Below is the example of Login page for validation message "Please fill out this field" when Username and Password fields are left blank and clicked on Login button:

How to handle validation message in selenium?

Locating the Message Element with HTML tag:

• First, identify the web element that contains the validation message. This could be a <span>, <div>, <p>, or any other HTML tag. Then asserting the Text message.

• Another way using ToolTip, Tooltips are usually not constantly visible. Tooltips often appear on hover or focus and might disappear automatically after a few seconds or when the mouse moves away. The tooltip element might be dynamically added to the DOM or its visibility might be toggled.

The above two ways are not accessible for the project I worked as there are no direct HTML tags are linked to the element for validation message.

Locating the Message with out HTML tag:

Solution

Use JavaScriptExecutor in Selenium with Java to handle validation messages when they aren't readily accessible through standard Selenium locators. When validation messages are manipulated directly by JavaScript, standard Selenium methods like findElement and getText() might not directly access the message.

JavaScriptExecutor is a powerful tool in Selenium Java for accessing validation messages that are not directly within standard HTML tags. JavaScriptExecutor allows you to execute JavaScript code within the context of the browser, giving you more flexibility to access and retrieve these dynamically generated messages.

Steps to Use JavaScriptExecutor for Validation Messages:

1. Cast WebDriver to JavaScriptExecutor: Need to cast the WebDriver instance to the JavaScriptExecutor interface.

2. Execute JavaScript Code: Use the executeScript() method of the JavaScriptExecutor to run JavaScript code in the browser.

3. Retrieve the Message: JavaScript code should be designed to locate and return the validation message.

4. Assert the Message: In Java test, cast the result of executeScript() to the appropriate type (usually String) and then perform your assertions.

   
   

Example code in Java

In Page Factory:

public String getValidationMessage(WebElement element) 
{

	return (String) ((JavascriptExecutor) driver).executeScript(

	"return arguments[0].validationMessage;", element);

}

In Step Definition:

 if (expectedResult.equals("Please fill out this field."))

{

	if (username.equals(""))

	{

	Assert.assertEquals(expectedResult, login_PF.getValidationMessage(login_PF.inputUsername));

	}

	else

	{

	Assert.assertEquals(expectedResult, login_PF.getValidationMessage(login_PF.inputPassword));

	}

}

To verify the validation message in the Console of the web application

There are 2 ways to get the validation message "Please fill out this field" as shown in the below snapshot highlighted in the yellow color.

1. For currently inspected element use $0 and type the below command in the console.

   $0.validationMessage

2. With using the ID of the element (Username text box) and type the below command in the console.

   document.querySelector("#id_username").validationMessage;

Important Considerations:

• Use browser's developer tools (Inspect Element, particularly the "Elements" and "Sources" tabs) to understand exactly how the validation message is being rendered and where the text content resides. Examine the surrounding HTML structure and any JavaScript code involved.

• Write the JavaScript code in executeScript() to precisely target the element or JavaScript variable holding the message. Avoid overly generic selectors if possible.

• Ensure that the validation has been triggered and the message is present before you attempt to retrieve it using executeScript(). Need to use WebDriverWait with custom ExpectedCondition if the message appearance is asynchronous.

• Include null checks in your JavaScript code to avoid errors if the target element or variable is not found.

  
  

Conclusion

Ultimately, the effort invested in creating effective validation messages – whether they appear as text within HTML tags, tooltips, or through dynamic JavaScript interactions – directly translates to a more reliable, user-friendly, and ultimately successful application. Poorly implementing validation can lead to user frustration, data corruption, and increased support costs. They serve as a critical communication channel between the application and the user, providing essential feedback about the correctness and acceptability of their input or actions. Therefore, validation messages should be treated as a fundamental aspect of the user interface and application logic, deserving careful design, implementation, and thorough testing.

 Thanks for reading the blog! Hope you found it helpful - Happy learning!