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

admin管理员组

文章数量:1334161

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

Share Improve this question Follow asked Feb 23, 2022 at 15:19 J.LongJ.Long 33311 gold badge44 silver badges1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.')

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

本文标签： javascriptCypressTesting that a browserspecific alert exists when submitting invalid inputStack Overflow