1

I have an E-commerce application, in which i want to delete the products from my cart if anything is there before my automation tests starts(kind of cleaning up the cart before test starts). We are using cypress for test automation, i am not able to write any code for this since if-else statements are not reliable in cypress due to its Async nature. Moreover we won't be knowing how many products will be there in cart at any moment.

How can i do clean up process in this case using cypress? Right now i am making sure no products are added to cart before tests starts by manually.

Adding the code snippet:

cy.get('.Searchstyles__SearchResults-ihHuNq').then(($btn) => {
  cy.log($btn.find('.MiniBasketstyles__MiniBasket-bQdyQE').length)
  if ($btn.find('.MiniBasketstyles__MiniBasket-bQdyQE').length ===0) {
    // do this block if there are few items in cart
            
    cy.get('.MiniBasketstyles__Title-ddNEOV').then(($el) => {
      const product = $el.text();
      let products = product.split(' ');
      cy.log(products[1])
      const min_products = Number(products[1])
               
      for(let i =1;i<=min_products;i++){
               
        cy.get(':nth-child(1) > :nth-child(1) > .MiniBasketListItemstyles__CloseBtn-dyGqzc > svg > [fill="none"] > [fill="#000"]').click({force: true})
        cy.wait(7000)
        // closing all the items one by one
      }  
    })              
  }  else {
    // empty else block as there it has to go to next step when there is no items in cart
  }

Here even when there is no items in cart, its not going to else block rather executing if block only.

Fody
  • 23,754
  • 3
  • 20
  • 37
ss333iiii
  • 35
  • 1
  • 7
  • Can you add a code snippet? – Hesham Moneer Apr 18 '22 at 11:51
  • All cookies are cleared before each test. How is your app keeping track of session cart? Maybe the account you are using is adding random items to the cart in the test before you get to your step? – jjhelguero Apr 18 '22 at 14:59
  • @jjhelguero sometimes during test run some steps fails and products gets added to the cart which will not get cleared. Later for another test, it will fail at some validation point due to this. – ss333iiii Apr 19 '22 at 06:44

1 Answers1

0

There's nothing wrong with testing a condition on the page with if (...) as long as you know the page is stable (not fetching data from an API).

If your case I think it's ok. You have some previous tests that added data to the cart. Now at the start of the next test you want to empty the cart.

A recursive function fits this pattern

const removeCartItems = ($el, level = 0) => {

  if (level > 100) throw 'Error: too many iterations' // guard against infinite loop
  
  const closeButton = $el.find('[class^="MiniBasketListItemstyles__CloseBtn"]')

  if (closeButton.length === 0) return         // no more items so exit 

  closeButton.eq(0).click()                    // click one of the buttons
  cy.wait(7000)                                // wait for cart removal to finish
  removeCartItem($el, ++level)                 // look for another item to remove
}

cy.get('selector-for-cart').then(removeCartItems)

Since it takes up to 7 seconds to remove each cart item, a better strategy would be to identify how the cart is stored (by cookie perhaps?) and just destroy that cookie.

It may be that the cart isn't even stored between sessions, in which case a simple reload will work.

Fody
  • 23,754
  • 3
  • 20
  • 37
  • Thanks for your support, but in my case, it may or may not have items in cart when you start the test..in that case how can i implement conditional statement here? – ss333iiii Apr 19 '22 at 09:02
  • Also i tried clearing cookie before tests starts, but cart is not getting cleared with this. It seems there is a unique session ID identifying the user session in which the cart was created. But i am not sure how to get that session & get it cleared. Feels like closing the items seems to be better – ss333iiii Apr 19 '22 at 10:04
  • This line `if (closeButton.length === 0) return; // no more items so exit` is your conditional statement. – Fody Apr 19 '22 at 20:01
  • I am assuming that each item in the cart has this close button because of the class name `MiniBasketListItemstyles__CloseBtn`, and the way you use it above. – Fody Apr 19 '22 at 20:02
  • I tried the code, but i am getting this error. then function(){} Error: too many iterations "RangeError Maximum call stack size exceeded" even when there was only 1 product in cart – ss333iiii Apr 20 '22 at 06:53
  • To fix that, you'll need to provide the HTML of the loaded cart. – Fody Apr 20 '22 at 07:36