How to get all attribute value in array variable with product name?

Question

In parent div, there are 2 products available. I want to get product title name & product price. Product price will get by attribute value & product name will get by h4 tag within same div


Men Basic T-shirt

Here is the whole div's HTML


   
      Men Basic T-shirt
      
      
         
            Define Product Colors (1/21)
            
               
               
            
            
               
                  
                     Price
                     
                        
                     
                  
               
               Profit Per Sale€ 13.95
            
         
         
            
               
                  
               
            
         
      
      
         
         
            Please select your favourite product colors
            
               
               
               
               
               
               
               
               
               
               
               
               
               
               
               
               
               
               
               
               
               
            
         
         
            Please select your main product colors
            
               
            
         
      
   
   
      Women Basic T-shirt
      
      
         
            Define Product Colors (1/10)
            
               
               
            
            
               
                  
                     Price
                     
                        
                     
                  
               
               Profit Per Sale€ 13.95
            
         
         
            
               
                  
               
            
         
      
      
         
         
            Please select your favourite product colors
            
               
               
               
               
               
               
               
               
               
               
            
         
         
            Please select your main product colors
            
               
            
         
      
   
    
   
      
         Back
         Next

How to get both value in array in cypress? My code is :

cy.get('h4').then(($ele) => {
    const texts = Array.from($ele, el => el.innerText);
    texts.forEach(text => cy.log(text));
})

// Get price value
cy.get(step.product_list_sidebar).invoke('attr', 'value').then(($style) => {
    const styl = $style
    cy.log(styl)
})

user_4571271 · Answer

You can do something like this:

const productDetails = [];
cy.get('.box-product').each(($ele) => {
    productDetails.push($ele.find('h4').text())
    cy.wrap($ele).find('span.price-bg > div > input', {
        timeout: 10000
    }).should('be.visible')
    productDetails.push($ele.find('span.price-bg > div > input').attr('value'))
})
cy.log(productDetails) //product name 1, product price 1, product name 2, product price 2

user_1781772 · Answer

I'd tackle the extraction of each data separately, then merge the results.

This assumes there's always a price for a title (same number of each).

cy.get('h4')
.then($titles => {
  return [...$titles].map(title => title.innerText)
})
.as('titles')

// Wait for prices
cy.get('.price-bg input').eq(0)
  .should('not.have.attr', 'value', '')

cy.get('.price-bg input')
.then($prices => {
  return [...$prices ].map(price => price.getAttribute('value'))
})
.as('prices')

// Merge results
cy.get('@titles').then(titles => {
  cy.get('@prices').then(prices => {
    const titlesAndPrices = titles.map((title, index) => {
      return { title, price: prices[index]}
    })
    console.log(titlesAndPrices)
  })
})

From your last comment, if you want a single string

// Merge results
cy.get('@titles').then(titles => {
  cy.get('@prices').then(prices => {
    const titlesAndPrices = titles.map((title, index) => {
      return `${title} - ${prices[index]}`
    })
    console.log(titlesAndPrices)
  })
})

How to get all attribute value in array variable with product name?

2 Answers