Application navigated using cy.origin is not able to open the page that appends dynamic key params to it

[varikaurtest]

I am automating a flow that involves 2 applications (both on different origins). I generated some data on application 1 and now want to validate the same in application 2, thus navigated to new using cy.origin

function login(username: string, password: string) {
cy.visit('/')
cy.origin('https://***//', {args: {username, password }}, ({username, password}) => {

cy.get('uname').type(username);
cy.get('#password').type(password);  
cy.get('loginBtn').click()  

}

In the same application2, I am able to perform various actions by calling the POM methods where the URL is static pages e.g. /payments or /search etc except at one click where the URL adds dynamic hostKey and other details to its URL. Observed that the URL is not changing on the click and the page remains in loading state forever.

Has anyone faced and solved this issue, please confirm.

[dipyomoy]

Core problem
Static routes work correctly inside cy.origin(), but navigation fails when a click triggers a redirect that: causes a full page reload, and/or appends runtime-generated query parameters (e.g. hostKey, tokens).

Observed behavior
The click is executed successfully. Cypress does not detect the resulting navigation. The page remains stuck in a loading state.

Why this appears Cypress-related
This appears to be a limitation of cy.origin() when handling:
full page reloads triggered by user interactions,
navigations that modify the URL using runtime-generated parameters,
redirects that Cypress does not recognize as navigation events.

SPA vs full page reload

Static SPA routes (e.g. /payments) work because they rely on client-side routing, which Cypress can track reliably.
Dynamic redirects often trigger full page reloads, which cy.origin() may not consistently reattach to or observe.

Workarounds

Extract the target URL before navigation and visit it explicitly:

   cy.origin('https://app2.com', () => {
  cy.get('#dynamicLink')
    .invoke('attr', 'href')
    .then((url) => {
      cy.visit(url)
    })
})

Wait for a post-navigation element instead of asserting on the URL (only works if Cypress stays attached):

cy.get('#dynamicLink').click()
cy.get('[data-expected-after-navigation]', { timeout: 10000 }).should('exist')

Best-effort approach: read the URL after click (not guaranteed if a full reload occurs):

   cy.get('#dynamicLink').click()
cy.window().its('location.href').then((url) => {
  // validate or use the URL
})

Clarification:-

The click itself works correctly. The issue is that Cypress does not detect or reattach to the navigation when it involves dynamic redirects or full page reloads.

[qa-ashutosh]

Hi @varikaurtest

Good analysis from the previous reply. I want to add a few things that might actually get this unstuck since the workarounds above don't always work when the dynamic URL is generated server-side and the href isn't available in the DOM before the click.

The issue is specifically that when a click inside cy.origin() triggers a full page reload to a URL with dynamic params, Cypress loses its attachment to the page. The origin callback exits, and Cypress is essentially watching a blank context. This is a known edge case with cy.origin() and cross-origin navigations that involve server-generated redirects.

The most reliable fix — intercept the navigation before it happens:

cy.origin('https://app2.com', () => {
  // Intercept the request that generates the dynamic URL
  cy.intercept('GET', '**/dynamicPath**').as('dynamicNav')

  cy.get('#dynamicButton').click()

  // Wait for the navigation request and grab the URL from it
  cy.wait('@dynamicNav').then((interception) => {
    const targetUrl = interception.request.url
    cy.visit(targetUrl)
  })
})

If the dynamic URL comes back as a redirect from an API call, grab it from the response instead:

cy.origin('https://app2.com', () => {
  cy.intercept('POST', '**/generateSession**').as('sessionRequest')

  cy.get('#dynamicButton').click()

  cy.wait('@sessionRequest').its('response.body.redirectUrl').then((url) => {
    cy.visit(url)
  })
})

Also worth checking — add this to your cypress.config.ts:

export default defineConfig({
  e2e: {
    experimentalModifyObstructiveThirdPartyCode: true,
    experimentalOriginDependencies: true, // if available in your Cypress version
  }
})

One more thing to verify: if the dynamic URL lands on a third origin (different from both app1 and app2), you'll need a nested cy.origin() call for that domain too, otherwise Cypress will silently fail to attach. For example:

cy.origin('https://app2.com', () => {
  cy.get('#dynamicButton').click()
}).then(() => {
  cy.origin('https://dynamic-host.app2.com', () => {
    // assertions here
    cy.url().should('include', 'hostKey')
  })
})

The cy.intercept approach inside the origin block is the most robust since it captures the URL before the full reload happens, rather than trying to chase the page after it's already navigating.