Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cypress blocks web app's inner xhr requests #29843

Open
Tur8008 opened this issue Jul 12, 2024 · 4 comments
Open

Cypress blocks web app's inner xhr requests #29843

Tur8008 opened this issue Jul 12, 2024 · 4 comments
Labels
stage: needs information Not enough info to reproduce the issue

Comments

@Tur8008
Copy link

Tur8008 commented Jul 12, 2024

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
Copy link
Author

Tur8008 commented Jul 12, 2024

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

@Tur8008
Copy link
Author

Tur8008 commented Jul 12, 2024

Just switched off blocking uncaught exception if it helps

@Tur8008
Copy link
Author

Tur8008 commented Jul 16, 2024

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 #26154 so I would say it's not my unique problem.

@senpl
Copy link

senpl commented Jul 25, 2024

Can You provide example repo that reproduce the problem?

@jennifer-shehane jennifer-shehane added the stage: needs information Not enough info to reproduce the issue label Aug 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stage: needs information Not enough info to reproduce the issue
Projects
None yet
Development

No branches or pull requests

3 participants