cypress: cypress.get(element) fails without waiting or retrying

Current behavior:

The cypress.get(element) function fails without waiting or retrying if the element is not visible on the page.

Desired behavior:

The cypress.get(element) function should wait and find the dom element in the page or timeout after the default timeout if the element is not visible in the page.

Steps to reproduce:

Non-working code:

describe('Starts a chat conversation', () => {
  describe('When visiting /chat ', () => {
    it('creates a new chat and the the chat bot starts sending messages', () => {
      cy.loginAs(clientWithMembership); // custom command that execute an http call

      const url = getChatUrl();
      cy.visit(url);
      cy.get('div[data-cy=chat-message-container]').should('have.length', 1); // Fails without waiting
    });
  });
});

Working code: (adding a wait before checking if the element exists)

describe('Starts a chat conversation', () => {
  describe('When visiting /chat ', () => {
    it('creates a new chat and the the chat bot starts sending messages', () => {
      cy.loginAs(clientWithMembership); // custom command that execute an http call

      const url = getChatUrl();
      cy.visit(url);
      cy.wait(3000);
      cy.get('div[data-cy=chat-message-container]').should('have.length', 1);
    });
  });
});

Versions

Cypress: 3.0.1 Mocha: 4.0.1 Browser: Chrome

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 20 (8 by maintainers)

Most upvoted comments

@dan19 It does appear from the information provided that Cypress attempted to retry for the duration of the timeout (4000ms), and did not find the DOM selector to have a length of 1. Could you try increasing the timeout of the actual get to see if this helps?

cy.get('div[data-cy=chat-message-container]', {timeout: 7000}).should('have.length', 1);

Also, make sure you are following some of our recommendations on waiting for you app to load before getting an element in your tests. https://on.cypress.io/using-cypress-faq#How-do-I-wait-for-my-application-to-load

@mikhaildzarasovvineti If you want to purely wait for an element to be present on the page, you can increase the timeout that Cypress waits for an element to be present. cy.get('button', {timeout: 60000}.

I do have the the problem, its not waiting even a second and failing. Waiting for api response wont help if you have a long list of data to render. Api got 200 response but react takes time to render huge amount of data from response. Any suggestions how to wait until element is presented?

@jennifer-shehane thanks for your answer. I’ve tried that already and it doesn’t even wait a second when I passing in the timeout option.