The Problem Statement

Consider a scenario where you attempt to validate a required field error message such as: "Please fill out this field."

During automation, the following challenges are encountered:

1. The validation message cannot be reliably inspected using browser developer tools
2. The message does not exist within the HTML DOM structure
3. Locator strategies (XPath, CSS, or tools like SelectorsHub) fail to identify the element

"Please fill out this field" message

Developer Tool Investigation

Although the message is not present in the DOM, it can be accessed through the underlying DOM element’s JavaScript property:

The validationMessage property is part of the HTMLInputElement API and provides the localized validation message associated with the element.

Root Cause Analysis

HTML5 introduced built-in form validation features such as required, type="email", pattern, and more. These validations significantly improve user experience by preventing invalid data submission directly at the browser level—without requiring additional JavaScript or backend checks.

Example:

With this simple configuration, the browser automatically:

1. Blocks form submission if the field is empty or invalid
2. Displays an error message (e.g., “Please enter a valid email address”)
3. Highlights the input field

Validation Messages Are Not Truly in the DOM

Unlike custom error messages, browser-generated validation messages are not standard HTML elements. They are rendered internally by the browser. This means we cannot locate them using XPath/CSS selectors and tools like Selenium or Playwright cannot directly assert them

Inconsistent Across Browsers

Different browsers display different validation messages:

Chrome: “Please fill out this field.”

Firefox: “Please fill in this field.”

This makes text-based assertions unreliable and flaky.

Locale and Language Dependency

Validation messages change based on browser language settings.

English → “Please enter a valid email address”

Hindi → Localized equivalent

This introduces instability in cross-region test execution.

Solution implementation in Playwright

Using evaluate function

To retrieve this message in Playwright, it is necessary to execute code within the browser context using the .evaluate() function. This allows direct access to element properties that are not available through the DOM.

Using checkValidity function

Confirms whether the field passes validation rules.

Conclusion

HTML5 form validation is excellent for improving user experience with minimal effort. However, from an automation perspective, it introduces limitations due to its browser-controlled nature. and with time all automation tool improving themselves by introducing many new approach and implementation like checkValidity() and evaluate() function.