cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.66k stars 3.16k forks source link

Cypress blocks web app's inner xhr requests #29843

Open Tur8008 opened 1 month ago

Tur8008 commented 1 month ago

Current behavior

I test an SPA web app that issues hxr requests sent under the hood and triggered by visiting some pages. So they are triggered by cy.visit() method. The problem exists on mac only. It works fine on windows. I have rather the simple test

describe('User login test', () => {
  beforeEach(() => {
    cy.viewport(1280, 1080);
    cy.visit('');
    cy.getBySel('login-link').click();
  });

  it.only('Simple login story test', () => {
    cy.url().should('include', 'auth');
    //User has to fill in the field with phone number
    cy.getBySel('phone-field').as('phoneField').type('+79289888509');
    cy.getBySel('login-btn').click();
    cy.url().should('include', 'auth/login');
    cy.getBySel('passwd-field').type('qwertyqwe');
    cy.contains('button', ' Login').click();
  });
});

The test fails with cypress info.

Снимок экрана 2024-07-12 в 12 29 53

Browser's console shows that all the XHR sent failed with EMPTY RESPONSE ERR

Снимок экрана 2024-07-12 в 12 33 26

If I try to test the same using Selenium Web Driver or manually -- everything is OK. If I paste the url of API endpoint to ordinary browser outside the cypress -- everything is OK.

Снимок экрана 2024-07-12 в 12 38 15

But if I paste the same in the browser launched via cypress it fails -- displays nothing because of empty response

Снимок экрана 2024-07-12 в 12 40 28

I can't get why it stoped working cause it was OK initially some time. I guess it can be connected with cross origin browser's constrains but I can't explain why it goes with cypress only. Neither manually nor by Selenium nor pytest it haven't been reproduced.

Desired behavior

The test passes and all the inner XHR passes too.

Test code to reproduce

describe('User login test', () => {
  beforeEach(() => {
    cy.viewport(1280, 1080);
    cy.visit('');
    cy.getBySel('login-link').click();
  });

  it.only('Simple login story test', () => {
    cy.url().should('include', 'auth');
    //User has to fill in the field with phone number
    cy.getBySel('phone-field').as('phoneField').type('+79289888509');
    cy.getBySel('login-btn').click();
    cy.url().should('include', 'auth/login');
    cy.getBySel('passwd-field').type('qwertyqwe');
    cy.contains('button', 'Войти').click();
  });
});

Cypress Version

13.13.0

Node version

v21.6.2

Operating System

macOS Sohoma 14.5

Debug Logs

Here is some log info it's seen that some requests left without response

Снимок экрана 2024-07-14 в 23 57 26

No response

Other

No response

Tur8008 commented 1 month ago
Снимок экрана 2024-07-12 в 13 26 13
Tur8008 commented 1 month ago

Just switched off blocking uncaught exception if it helps

Tur8008 commented 1 month ago

The problem is in that cypress blocks the requests with the same domain but different ports. For example, I have frontend on http://localhost:3000/ and backend server running on http://localhost:8000/. Requests to frontend are addressed fine, but all the requests to backend issued like XHR are blocked. I found the workaround -- added alias on localhost like 127.0.0.1 localhost back.localhost --- that solved the problem but created another one with httponly cookies -- axios refuse to match domains. So that a pitty it turns out cypress are not able testing spa apps. There is the discussions connected to my problem direcly https://github.com/cypress-io/cypress/issues/26154 so I would say it's not my unique problem.

senpl commented 1 month ago

Can You provide example repo that reproduce the problem?