javascript - How to make cy.visit() wait for ajax requests to complete? - Stack Overflow

admin管理员组

文章数量:1291492

I would like to use Cypress.Commands.overwrite() to make the cy.visit() method do what it normally does and then wait until a loader element is no longer in the DOM, indicating that AJAX requests have pleted. My goal is exactly this instead of creating a new mand. The reason is to avoid situations where, e.g., someone might unknowingly use the unmodified cy.visit() and then assert that some elements not exist, when they possibly could exist and just not have loaded yet.

While overwriting the default mand, I appear to be running into problems with Cypress' use of promises. From the manual, it is clear how to overwrite cy.visit() when one wants to do stuff before calling the original function. However, I am unable to find an example, where the original function is called first and custom stuff happens only after that.

So what I would like to do with the overwrite() mand is this:

Cypress.Commands.add('visitAndWait', (url) => {
  cy.visit(url);
  cy.get('[data-cy="loader"]').should('not.exist');
});

I have tested and can confirm that the above does what I need it to. Here are some attempts to make this work as an overwrite, all of which fail:

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  return originalFn(url, options).then(() => cy.get('[data-cy="loader"]').should('not.exist'));
});

Cypress.Commands.overwrite('visit', async (originalFn, url, options) => {
  const res = await originalFn(url, options);
  await cy.get('[data-cy="loader"]').should('not.exist');
  return res;
});

Both fail with this:

Cypress detected that you returned a promise from a mand while also invoking one or more cy mands in that promise.

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  originalFn(url, options);
  return cy.get('[data-cy="loader"]').should('not.exist');
});

And the last one fails with this:

Is this kind of an overwrite possible at all in Cypress, and if so, how is it done? Thank you!

EDIT:

The test code which causes the error in the last case is here:

cy.visit('/');
cy.get('[data-cy="switch-to-staff"]').click();

Basically it tests a user role mocking panel by clicking a button that should mock a staff role.

I would like to use Cypress.Commands.overwrite() to make the cy.visit() method do what it normally does and then wait until a loader element is no longer in the DOM, indicating that AJAX requests have pleted. My goal is exactly this instead of creating a new mand. The reason is to avoid situations where, e.g., someone might unknowingly use the unmodified cy.visit() and then assert that some elements not exist, when they possibly could exist and just not have loaded yet.

While overwriting the default mand, I appear to be running into problems with Cypress' use of promises. From the manual, it is clear how to overwrite cy.visit() when one wants to do stuff before calling the original function. However, I am unable to find an example, where the original function is called first and custom stuff happens only after that.

So what I would like to do with the overwrite() mand is this:

Cypress.Commands.add('visitAndWait', (url) => {
  cy.visit(url);
  cy.get('[data-cy="loader"]').should('not.exist');
});

I have tested and can confirm that the above does what I need it to. Here are some attempts to make this work as an overwrite, all of which fail:

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  return originalFn(url, options).then(() => cy.get('[data-cy="loader"]').should('not.exist'));
});

Cypress.Commands.overwrite('visit', async (originalFn, url, options) => {
  const res = await originalFn(url, options);
  await cy.get('[data-cy="loader"]').should('not.exist');
  return res;
});

Both fail with this:

Cypress detected that you returned a promise from a mand while also invoking one or more cy mands in that promise.

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  originalFn(url, options);
  return cy.get('[data-cy="loader"]').should('not.exist');
});

And the last one fails with this:

Is this kind of an overwrite possible at all in Cypress, and if so, how is it done? Thank you!

EDIT:

The test code which causes the error in the last case is here:

cy.visit('/');
cy.get('[data-cy="switch-to-staff"]').click();

Basically it tests a user role mocking panel by clicking a button that should mock a staff role.

• javascript
• cypress

Share Improve this question Follow edited Aug 11, 2023 at 10:55 basse asked Apr 17, 2020 at 15:30 bassebasse 1,33911 gold badge2525 silver badges4141 bronze badges 5

• 4 The first two attempts using .then() and await are wrong because Cypress mands are not promises, they are enqueued test steps. The third attempt is basically correct, but the error you show obviously has nothing to do with the test steps in the overwrite, since it refers to cy.click(). Please show the plete test usage of the overwritten mand. – user12697177 Commented Apr 18, 2020 at 20:39
• @MarionMorrison updated with the code you requested. As you can see, I'm just calling the overwritten cy.visit() and then cy.click(). The button is visible at all stages and the test passes if I don't overwrite cy.visit(). – basse Commented Apr 22, 2020 at 6:10
• 1 How does your latest edit relate to the problem? – Jan Nash Commented Aug 11, 2023 at 21:52
• 1 ...asking in order to get some clarity. – Jan Nash Commented Aug 19, 2023 at 10:39
• 3 As the question stands, the error cannot be reproduced. – Jan Nash Commented Aug 19, 2023 at 10:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9 +25

As mentioned by @richard-matsen, you should check that your loader exists before waiting for it to disapear. That may be why you get the detached from DOM error with your switch-to-staff element.

Something like this might work for you:

Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
  originalFn(url, options);
  cy.get('[data-cy="loader"]').should('be.visible');
  cy.get('[data-cy="loader"]').should('not.be.visible');
});

You could use cy.wait() to wait for the page to pletely load then check for the loader to not exist

it('Visit the app', function () {
    cy.visit('http://localhost:3000')
    cy.wait(3000)
    cy.get('[data-cy="loader"]').should('not.exist');
  }) 

Wait Reference: https://docs.cypress.io/api/mands/wait.html

I worked around the first error by using .then() like that:

Cypress.Commands.overwrite('visit', (originalFn, url) => {
    originalFn(url).then(() => {
        // cy...
    });
});

For waiting on requests I'm using two approaches.

First Approach: Like the other answer suggests watch the loading icon.

Second Approach: Intercept the actual request like that:

cy.intercept({
        method: 'GET',
        url: '**random/part/of/the/ajax/request/url**',
    }).as("request");

// Here should be the line that triggers the ajax request
// for example: originalFn(url)...
// or cy.click();

cy.wait("@request", { timeout: 10_000 });

本文标签： javascriptHow to make cyvisit() wait for ajax requests to completeStack Overflow