How to verify login text box validation error message using Selenium

Question

URL- https://www.vtiger.com/begin-free-trial

Enter an invalid email address such as "abcde" and now click on Next Button. You will notice an error message which will appear for 4/5 seconds ( image below )

How can we verify this error message, I am not able to get xpath of this also.

Answer 1

Try Below Code -

from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
action = ActionChains(driver)

driver.get('https://www.vtiger.com/begin-free-trial/')

driver.find_element_by_name('email').send_keys("xyz")
driver.find_element_by_xpath('//button[contains(text(),"Next")]').click()

messagetoVerify = "Please include an '@' in the email address. 'xyz' is missing an '@'."
myValidationmsg = driver.find_element(By.NAME, 'email').get_attribute("validationMessage")

if myValidationmsg == messagetoVerify:
    print("Verified Validation Message")

Output -

Please include an '@' in the email address. 'xyz' is missing an '@'.

Answer 2

The error message which you are referring is a validation message which 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 error message Please fill out this field. you need to:

• Induce WebDriverWait for the desired element to be clickable.

• Now, to extract the validationMessage and you can use either of the following Locator Strategies:

• Using CSS_SELECTOR:

  • Code Block:

    driver.get("https://www.vtiger.com/begin-free-trial/")
    work_email = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[name='email']")))
    work_email.send_keys("dggf")
    print(work_email.get_attribute("validationMessage"))
    

  • Console Output:

    Please include an '@' in the email address. 'dggf' is missing an '@'.
    

• Using XPATH:

  • Code Block:

    driver.get("https://www.vtiger.com/begin-free-trial/")
    work_email = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@name='email']")))
    work_email.send_keys("dggf")
    print(work_email.get_attribute("validationMessage"))
    

  • Console Output:

    Please include an '@' in the email address. 'dggf' is missing an '@'.
    

---

Reference

You can find a detailed relevant discussion in:

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