How to test HTML5 built in validation popup? Cypress TypeScript Cypress Community #i-need-help

How to test HTML5 built in validation popup? Cypre...

calm-translator-52

05/26/2023, 10:31 AM

Hi, I'm new to cypress automation and I want to know how to write a test for HTML5 built-in popup validation error in Cypress TypeScript. This is the message I get when I click on the submit button: I tried to add the below code, but then I got an error like this. Email field code (inspect):

https://cdn.discordapp.com/attachments/1111602492149596160/1111602492170571816/Screenshot_2023-05-26_135811.png▾

https://cdn.discordapp.com/attachments/1111602492149596160/1111602493449846834/Screenshot_2023-05-26_135715.png▾

powerful-orange-86819

05/26/2023, 1:42 PM

cy.get('[error]').should('contain',"Please fill out this field.") dont overcomplicate stuff

calm-translator-52

05/26/2023, 2:17 PM

this is not working. getting "Timed out retrying after 4000ms: Expected to find element: [error], but never found it." message

calm-translator-52

05/26/2023, 2:23 PM

I found the working code. This will tell TypeScript that the element is actually an HTMLInputElement, and it will allow us to access the validationMessage property. cy.get('[id=UserEmail]').then(($input) => { expect((($input)[0]).validationMessage).to.eq('Please fill out this field!') })

powerful-orange-86819

05/26/2023, 2:24 PM

cy.get will no trigger retryability

powerful-orange-86819

05/26/2023, 2:24 PM

try with the html tag and contains

powerful-orange-86819

05/26/2023, 2:24 PM

cy.contains("div","Please fill out this field.").should("be.visible")

gray-kilobyte-89541

05/26/2023, 3:21 PM

These are NOT dom elements, but a special browser tooltips that you cannot access using

cy.get

command. But there is a way to verify the form validation is working, see https://glebbahmutov.com/blog/form-validation-in-cypress/

3 Views

Previous Next