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

Current behavior:

Some (but not all) of my calls cy.visit are failing with a generic Parse Error when I have experimentalNetworkStubbing turned on. One such failing call is in the provided below.

Desired behavior:

Calls to cy.visit succeed regardless of whether or not experimentalNetworkStubbing is on.

Test code to reproduce:

it('Issue with cy.visit when experimentalNetworkStubbing is On', function () {
  // This test will pass when experimentalNetworkStubbing is off, but will fail when it is on.
  cy.visit('https://secure.vidyard.com/user/sign_in')
})

Versions:

Cypress version 5.1.0 on macOS 10.14.6 using Chrome 85.

[rbell-mfj]

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

[alim16]

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