1

I'm testing a form in a Laravel/Vue/Inertia application that can select from a list of users. The form adds a new user (an XHR post) to the database. The Laravel controller then redirects back to the form (an XHR GET). The form's user menu now contains the updated list of users.

This works manually. But when I test in Cypress, it fails. I set up an interceptor for each XHR request. But even though the redirect takes place, the second XHR request (the one aliased as "@loadPage") is still spinning around in the Cypress spec window. Even if I wait 10 seconds, it doesn't finish.

The relevant part of the Cypress spec looks like this:

       cy.get('#first_name').type('John')

        cy.get('#last_name').type('Coltrane')

        cy.get('#email').type('coltrane@myfavoritethings.com')

        cy.get('#netid').type('trane')

        cy.intercept('POST', '/auth/user').as('addUser')
        cy.intercept('GET','/auth/project/create').as('loadPage')

        cy.get('#add-user-form').submit()

      cy.wait('@addUser')

      cy.wait('@loadPage')

      //cy.wait(5000)

        cy.contains("New user")

      cy.contains('Coltrane')

I expect the page to contain 'Coltrane' in the select menu. But it doesn't -- except when you test the page manually. The XHR GET for this page will include an update to Inertia's props.users. But during the Cypress test, the XRH request never completes (even with the interceptor).

The Cypress spec results window looks like this:

enter image description here

Lola Ichingbola
  • 3,035
  • 3
  • 16
buckthorn
  • 1,727
  • 13
  • 15

1 Answers1

2

Not really an answer, as the root cause is somewhere in the implementation, but since the log shows cy.wait('@loadPage') is actually catching the call I suggest using the result to compare request and response to what happens when running outside the Cypress test runner.

cy.wait('@loadPage').then(interception => {
  console.log('request', interception.request)
  console.log('request', interception.response)
})

I suspect though actually it's missing the page load event after the redirect. The test is failing on your cy.contains() because it has a timeout of 4 seconds, whereas the page load timeout is 60 seconds.

If you remove everything after cy.wait('@loadPage') and the test fails with a page load error, that is the reason.

There is something strange going on with certain pages that cause Cypress to stall. The best explanation I've seen is an error in the console with code ERR_TOO_MANY_REDIRECTS.

Lola Ichingbola
  • 3,035
  • 3
  • 16
  • Thanks @Lola Ichingbola. I did the comparison you suggested and didn't see any errors. And even if I remove the interceptor and add a long cy.wait (like 30 seconds), the result doesn't change. It does seem as though Cypress is just plain missing the page load after the redirect. Thanks! – buckthorn Aug 18 '23 at 12:08