Some DOM elements are not loaded when using global intercept with custom header

[Lalamo14154]

Hello everyone.

I will try to describe my problem as best as I can but before I do I need to explain a little bit about our environment setup and how we run our tests.

In our company we have 3 environments - QA, pre-prod, prod. I will talk about prod here. After each sprint there is a production deployment which happens this way - we have let's say 20 production nodes (servers) that are named something like web001, web002, web003 etc. and we do a so called "canary deployment" which basically means that we isolate web012 node, upload the newest build there and we want to run our cypress smoke tests there to check if everything is fine before we enable all these changes to other nodes.

Here is the first important point - for reasons that are a bit too difficult to explain, we cannot access this web012 node directly using some modified url.. lets say a url that would be web012-prod-github.com. Instead we have to use a special modified header via cy.intercept() command opposite a regular url which would simply be something like prod-github.com.

We have this intercept in our e2e.js file

beforeEach('Adds headers to web012 env', () => {
  if (Cypress.env('ENVIRONMENT') === 'web012') {
    cy.intercept(
      /^https:\/\/.*\.ourTestedWebsite\.com\/(?!web\/assets\/typescript\/vue\/project\/show\/).*/,
      (req) => {
        req.headers['ourCustomHeader'] = 'withAnyValue';
      }
    );
  }
});

Before you ask why we exclude certain assets (bundles) from the intercept, that's because for some unknown reason cypress completely freezes unless we do so - this is not an issue in our application but rather a consequence of using the header the way we use it. Simply intercepting these specific assets with a custom header made cypress completely frozen on page load and had to be restarted. Not intercepting the assets makes the tests run smoothly, until those assets actually need to be loaded. And that's when the problem happens.. Notice in the intercept that we exclude assets from a specific page "project/show". That is because most of the assets are actually loaded on that page and when we cy.visit() that page, the console look like this:

Normally we wouldn't necessarily care about console errors in this case as long as the tests are running and doing what they are supposed to do, but there are some elements that are not loaded on the page and obviously failing the tests that are supposed to interact with them.

So we are basically trapped in 2 scenarios - either we don't intercept some of the assets but cypress gets frozen on project/show page load, or we intercept them but some elements are not loaded because the javascript bundles are not loaded as well and the tests fail because of that.

I don't expect anyone in the world to have the same weird production deployment as we do, but maybe someone had a similar issue and knows a solution to this? Obviously the solution to this on our side would be to get an access to web012 server directly without using the header, but let's just ignore this mythical option for a moment... thank you :)