Search code examples
javascripttimeoutcypresswait

Alternative to { timeout: 10000 }

When I click the button "Add to cart", the value "2" is not saved and in my cart is one item only. The problem is, that Cypress runs to fast. Because when I wait a second between this steps, the value 2 will be saved.

it('add two items to cart', function() {

    cy.get('.cx-counter-value', { timeout: 5000 })
      .clear()
      .type(2)
      .should('have.value', '2')

   // .wait(1000)

    cy.contains('Add to cart').click()
})

Is there an alternative to "{ timeout: 5000 }" to wait for an expected condition?

Solution

  • Cypress doesn't have Selenium like Expected conditions; instead it has more advanced concepts of tapping the Events/ XHR etc.,

    For instance in your case, I assume there should be a XHR call fired by the application to add 2 items to the cart. You can probably wait for the XHR request to succeed and validate the presence of 2 items in your cart,

    // Wait for the route aliased as 'addToCart' to respond
// without changing or stubbing its response
cy.server()
cy.route('/cart/*').as('addToCart')
cy.visit('/cart/item/2')
cy.wait('@addToCart').then((xhr) => {
    cy.get('.cx-counter-value')
      .should('have.value', '2')
})

    Even if not XHR, just see if any events are triggered which you can depend on.

    Reference: https://docs.cypress.io/api/commands/wait.html#Alias