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?

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?

• javascript
• cypress
• user-input
• e2e-testing
• e2e

3 Answers 3

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

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.

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