cypress: Some Calls to cy.visit() Fail with a Parse Error when experimentalNetworkStubbing is Turned On

I ran into this issue as well. Building on the workaround from @alim16, I added the following to cypress/support/commands.js. This should “fix” the built-in visit command to work around the issue so you don’t have to change any of your tests.

Caveats:

• It assumes your server can handle HTTP HEAD requests (if not you can just change the method to ‘GET’)
• It will apply to all visit calls, so it may slow things down a bit and/or have unintended side effects on tests that don’t experience the redirect issue at all
• EDIT: It only follows a single redirect, as written, per visit command

/**
 * Temporary patch for cy.visit() to address redirects causing errors with experimentalNetworkStubbing
 * See https://github.com/cypress-io/cypress/issues/8497
 */
Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  const timeout = { timeout: options?.timeout || Cypress.config('pageLoadTimeout') }
  Cypress.log({ name: 'visit', message: url })

  cy.request({ url, followRedirect: false, method: 'HEAD', log: false })
    .then(timeout, resp => {
      if ([301, 302, 303, 307, 308].includes(resp.status)) {
        url = resp.headers['location']
        Cypress.log({ name: 'visit', displayName: ' ', message: 'redirected to ' + url })
      }
      return originalFn(url, Object.assign({}, options, { log: false }))
    })
})

in case anyone is looking for a temporary workaround, here is mine I use cy.request to find the redirect url and then cy.visit

//my function looks like this

export const loadAppWithRedirect = (path:string) => cy.request({
  url: path,
  followRedirect: true
}).then((resp) => {
  const urlRegex = /(https?:\/\/[^ ]*)/
  //ts-ignore because ts claims"redirects" does not exist, but it does for me
  //@ts-ignore
  const stringWithRedirectedUrl = resp.redirects[resp.redirects.length - 1] //get the last link in the redirect chain
  const url = stringWithRedirectedUrl.match(urlRegex)[1].toString()
  cy.visit(url)
})

//and my test would look like this

   it("should go to my site even if it redirects", () => {
        loadAppWithRedirect('https://secure.vidyard.com/user/sign_in') 
        cy.contains("Welcome back").should('exist')
    })

@todd-m-kemp I needed an example url and can’t use mine, I hope you don’t mind

my experience with cypress is limited so if anyone has better/easier way, please let me know

I have the same problem and my route also redirects.

@todd-m-kemp I’m having the same issue with my app (using the visit command with “experimentalNetworkStubbing”) my best guess is that there is an issue with redirects your app does a 302 and mine does a 307

for example yours doesn’t work when you visit “https://secure.vidyard.com/user/sign_in” but if you visit whatever url it redirects to on cypress it does load “https://auth.vidyard.com/login?rid=CrNJRzNqAHJJJA”

@alim16 Agreed; I noticed the same thing and wondered if it was related to redirects. It certainly seems to make sense based on what we are both experiencing.