Handling Cypress url redirect

Question

I have a Cypress test which clicks on an image causing a redirect to a specific url. The test then checks the url contains a specific string.

However, clicking this image causes the tests to stop/fail with a "Whoops, there is no test to run." message when the redirect happens.

The Cypress test is very simple:

/* global describe, it, cy */
import loadStory from '../../../config/cypress/helpers/loadStory'

const component = 'product-card'
const productCardImage = '[data-test=component-product-card_imageContainer]'

describe(`${component} component interaction tests`, () => {
  it('clicking the image should open the products page', () => {
    loadStory(component, 'Default')
    cy.get(productCardImage).should('be.visible')
    cy.get(productCardImage).click()
    cy.url().should('contain', '/product')
  })
})

My tests run on http://localhost:9002 and it seems that redirecting to http://localhost:9002/product/productId while the test suit is running is what causes Cypress to crash/fail and instead Cypress tries to go to https://localhost:9002/__/

I am wondering how I can click this image and redirect to the url without causing this crash/fail in Cypress.

Answer 1

Cross domain is not supported in Cypress.

Example: step 1: You navigate to google step 2: Search for Gmail step 3: clicked on gmail link

You are switching from Google.com to gmail.com - cypress doesn't support this.

Workaround 1: You can remove set href attribute value to blank as below:

target="_blank" so that it will open in same page.

Workaround 2:

put step 1 and step 2 in one test iteration

and put step 3 in another iteration

Answer 2

Their is an issue of http to https .