cy.intercept, beforeEach, and inconsistent wait()

[bared-dave]

Hi there,

I'm working on introducing Cypress tests into our codebase, and am having inconsistent results when trying to intercept API requests in beforeEach block, and inconsistent results in visit() waiting for pages to load.

I've created a minimal repo which shows the problem. https://github.com/bared-dave/cypress-remote-url-test/

Sometimes this works locally, sometimes it doesn't. It almost never works in CI context. https://github.com/bared-dave/cypress-remote-url-test/actions

If we take this test as an example:

    beforeEach(() => {
      cy.setLocalStorage('headless:subscribe', { value: 'hidden', expiry: 0 })
      cy.intercept({ url: 'https://ipapi.co/json/?*', middleware: true }, mockLocationAPI('au')).as('LocationAU')
      cy.intercept({ url: '**/api/*/graphql.json', middleware: true }, mockShopifyAPI)
      cy.visit('/products/aluminium-black-lace-ups')
      cy.wait(['@GetShopSettings', '@CheckoutCreate', '@GetProduct', '@LocationAU'])
    })

    it('clicking trigger should display available currencies', () => {
      cy.get(priceNormalSelector).first().should('have.text', '$289')
      cy.get(priceDiscountedSelector).first().should('have.text', '$210')
      cy.get(triggerSelector).click({ force: true })
      cy.get(audSelector).should('be.visible')
      cy.get(nzdSelector).should('be.visible')
      cy.get(usdSelector).should('be.visible')
      cy.get(usdSelector).click({ force: true })
      cy.wait(['@GetShopSettings', '@CheckoutCreate'])
      cy.get(priceNormalSelector).first().should('have.text', 'USD$246')
      cy.get(priceDiscountedSelector).first().should('have.text', 'USD$179')
      cy.get(nzdSelector).click({ force: true })
      cy.wait(['@GetShopSettings', '@CheckoutCreate'])
      cy.get(priceNormalSelector).first().should('have.text', 'NZD$315')
      cy.get(priceDiscountedSelector).first().should('have.text', 'NZD$229')
      cy.get(audSelector).click({ force: true })
      cy.wait(['@GetShopSettings', '@CheckoutCreate'])
      cy.get(priceNormalSelector).first().should('have.text', '$289')
      cy.get(priceDiscountedSelector).first().should('have.text', '$210')
    })

I have noticed that sometimes when visit() is called, the XHR requests that I'm attempting to intercept (and replace with a fixture) are called before the wait() function is called, so then the wait() function times out and the test fails because the XHR request has already been and gone.

If I remove the wait(), sometimes the tests pass locally if the XHRs are intercepted before the individual tests are run, but most of the time they don't. I've been banging my head against the wall for 2 days trying to fix this.

Is there a way to make these tests more consistent that I'm missing?

See below screenshot:

For reference we are using Gatsby, Gatsby cloud and Gitlab. I have setup Gatsby cloud webhook notification that calls a Gitlab webhook to trigger a job which runs the Cypress tests against a remote URL.

[bahmutov]

1. Why is the app throwing so many errors "Cannot set property status ..."?
2. In this test and in others you are creating an alias LocationNZ but waiting for LocationAU

  context('NZD', () => {
    beforeEach(() => {
      cy.setLocalStorage('headless:subscribe', { value: 'hidden', expiry: 0 })
      cy.intercept({ url: 'https://ipapi.co/json/?*', middleware: true }, mockLocationAPI('nz')).as('LocationNZ')
      cy.intercept({ url: '**/api/*/graphql.json', middleware: true }, mockShopifyAPI)
      cy.visit('/products/aluminium-black-lace-ups')
      cy.wait(['@GetShopSettings', '@CheckoutCreate', '@GetProduct', '@LocationAU'])
    })

Fixing the alias names fixes the tests for me

[bared-dave]

@bahmutov I've fixed that, however the tests are still failing periodically. See video from test that I ran locally that failed.

currency.spec.ts.mp4

[jennifer-shehane]

I see these google.firestore.v1... XHRs seem to not be resolving when the test hangs on the cy.wait(). Not sure it it's relevant, but are these requests necessary for you tests? You could try using blockHosts config to block those and see if it helps.