CODEWITHSUNDEEP
javascriptcypressuser-inpute2e-testinge2e
J.Long
J.Long

Reputation: 333

Cypress - Testing that a browser-specific alert exists when submitting invalid input

I'm trying to test that invalid input warns the user. The html "type" of that input is "email", so the browser actually displays this bubble rather than an element we expose on the site.

browserSpecificAlert

This bubble in question as far as I can tell is browser-specific and as far as I can tell it doesn't appear in the DOM. Also, I can't use the "select an element" cursor tool on it, it ignores that bubble as if it wasn't there. If it helps, it's a browser-specific event triggered by the input form.

Is there a way to confirm that this alert exists using Cypress assertions?

Upvotes: 4

Views: 1929

Answers (3)

kegne
kegne

Reputation: 853

For the record, I found a great example here

Cypress examples (v9.4.1) - Form validation

<form id="form-validation" action="/action_page.php">
  <div>
    <label for="item">Item:</label>
    <input id="item" type="text" name="item" required />
  </div>

cy.get('#item:invalid')
  .invoke('prop', 'validationMessage')
  .should('equal', 'Please fill out this field.')

Upvotes: 5

Alapan Das
Alapan Das

Reputation: 18626

As mentioned in the cypress docs, you can do the validation like this:

cy.get('username-selector').then(($input) => {
  expect($input[0].validationMessage).to.include(
    `Please include an '@' in your email address.`
  )
})

Upvotes: 2

J.Long
J.Long

Reputation: 333

Okay, found a workable solution. If someone has a better solution please feel free to post.

As HTML form validation alert bubble text is browser specific, it's probably not a good idea to test for specific content within the bubble. Instead, we can test that the form fired an invalid event and giving the input form the :invalid pseudo-class, and that the browser blocked the form from submitting.

These two things happen regardless of browser. The easiest way to detect this behavior in the DOM is to go from selecting input to asserting that input:invalid exists and that login did not happen.

Upvotes: 3

Related Questions