Search code examples
javascriptcypressbrowser-automation

How to click on each payment method in cypress using iteration?

My requirement is to click on each and every payment method (pay-safe, visa, bit-pay etc.) and then validate using assert method by comparing URL.

Problem : Unable to click on element. I'm getting null value in variable. Tried using val() as well as html() method.

I tried below code.

//cy.get('.real-money--providers-list') = allPaymentMethods

  depositFiat.allPaymentMethods().find('[src*="providers/logo"]').each(($element, index, $list) => {
    var namePaymentProvider = $element.find('[alt*="safe"]').text()
    cy.log(namePaymentProvider)
    cy.wait(1000)

      if(namePaymentProvider.includes('class')){
        $element.find('.provider-content--choice').click()
        //cy.get('.provider-content').invoke('removeAttr','src').click()
        //depositFiat.secureCheckout().click()
        //cy.back()
      }
})

As cypress unable to handle child windows I tried to use invoke method but no luck.

Find HTML here Log file shows null value

Solution 
  • <div class="provider-img"><img alt="safecharge_paysafecard" class="style__Logo-a3ugi5-2 fAwRoV visible" src="https://static.xyz.com/1234123463/img/providers/logo_safecharge_paysafecard.svg"></div>

    As per your HTML fiddle, I could see that for every payment provider you can use the css selector img[class*="style__Logo"]

    For one payment method you can use:

    cy.get('img[class*="style__Logo"]').eq(0).invoke('attr', 'src').should('contain', 'https: //static.xyz.com/')