Search code examples
javascriptcypressuser-inpute2e-testinge2e

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?

Solution

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