How to Test Forms with Cypress?

Question

I’m having a hard time understanding how form testing works with using Cypress.

I would like to test if the page form https://drbarakat.curseria.com/e-book is redirecting to the page https://drbarakat.curseria.com/e-book/obrigado.

So far, I was able to run the test, but I suspect that instead of giving Ubmit, Cypress simply "forces" a redirect, because when arriving at the second page (https://drbarakat.curseria.com/e-book/obrigado) appears the following error:

chainers.split is not a Function

My test code so far is like this :

// <reference types="cypress" />

context('Actions', () => {
    beforeEach(() => {

        Cypress.on('uncaught:exception', (err, runnable) => {
            // returning false here prevents Cypress from
            // failing the test
            return false
          })

      cy.visit('https://drbarakat.curseria.com/e-book',  { force: true })
    })
  
      it('.submit() - submit a form', () => {
        // https://on.cypress.io/submit
        

        cy.get('#_form_95_')
        .find('input[name="fullname"]').type('teste')

        cy.get('#_form_95_')
        .find('input[name="email"]').type('[email protected]')
    
        cy.get('#_form_95_').submit()
          .next().should(cy.visit('https://drbarakat.curseria.com/e-book/obrigado'))
      })

     
  })

Is he actually doing Ubmit successfully or is he simply forcing a redirect? I’ve never done any tests like this before.

Answer 1

I’m a new user of Cypress and testing automation in general, but I was able to notice two things that might be causing interference with your code.

1. Are you wearing a cy.visit() within the should() and this is directing to the page https://drbarakat.curseria.com/e-book/obrigado. Try to use the cy.url().should(...) to test whether the accessed page is the expected one. Documentation of cy.url().

2. The mistake "chainers.split is not a Function" is probably being caused by the call from next() before the should(). The next() is a command that returns the next element based on cy.get(). Documentation of next().

The submit(), according to the Cypress documentation is not a direct interaction command with DOM. I believe Cypress uses the type element "submit" inside the form because the command only interacts with form elements. Documentation of submit.