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

Question

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.

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?

kegne · Accepted Answer · 2022-02-23T18:47:27.263

5

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.')

edited Feb 23 '22 at 18:47

answered Feb 23 '22 at 18:36

kegne

583
1
8

1

Thanks much! This is much better than my solution. The only thing I would add is checking that :invalid doesn't exist beforehand, and checking that it exists after the submission attempt. – J.Long Feb 23 '22 at 20:49

score 3 · Answer 2 · answered Feb 23 '22 at 16:27

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.

score 2 · Answer 3 · answered Feb 23 '22 at 18:26

2

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.`
  )
})

answered Feb 23 '22 at 18:26

Alapan Das

17,144
3
29
52

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

3 Answers3