How to chain selectors in order to get element inside with webdriverio

Question

I have a page with list of products on it.
This is how HTML DOM looks like for one product item:



    
        
            
                
            
                
                        
                        
                    
                
        
    
    
        
            
                Schweppes
            
            
                
                    
                        
                                    33 x 24
                        
                            
                                123
                        
                    

                    
                        box
                    
            
        

        
            
                
                    61,83 € HT/CHACUN
                            
                                    soit 10,00 €
                                
                            
            
            
                Add to cart

I am calling this function:

isSortedAlphabeticallyAscending($$('div.js-product-card'));

And the function implementation is:

isSortedAlphabeticallyAscending(list) {
    for (let i = 0; i < (list.length - 1); i++) {
        let outOfStockCurrent = list[i].getAttribute('data-out-of-stock');
        let outOfStockNext = list[i + 1].getAttribute('data-out-of-stock');

        let idCurrent = list[i].getAttribute('id');
        let idNext = list[i + 1].getAttribute('id');

        console.log("outOfStockCurrent " + outOfStockCurrent + " " + idCurrent);
        console.log("outOfStockNext " + outOfStockNext + " " + idNext);

        let productIdCurrent = idCurrent.split('-').pop();
        let productIdNext = idNext.split('-').pop();


        let currentText = list[i].$('a[href*="' + productIdCurrent + '"]').getText();
        let nextText = list[i+1].$('a[href*="'+ productIdNext + '"]').getText();

        console.log("currentText " + currentText);
        console.log("nextText " + nextText);

        if(outOfStockCurrent === "true" || outOfStockNext === "true") continue;
        if (currentText > nextText) return false;
    }
    return true;
}

I ignore out of stock products since they are always at the bottom of the page.
But the list[i].$('a[href*="' + productIdCurrent + '"]').getText() is always returning empty text.
I would like it to get "Schweppes" text, i.e. product name.

Is there a way to chain somehow differently part with .$a[href ...] to get the text from the tag inside the

element of the list of products using webdriverio 5?

Thanks!

mismas · Accepted Answer

The above selector list[i].$('a[href*="' + productIdCurrent + '"]').getText() targeted 2 elements.
What I needed to go one div further and find it there:

list[i].$('div.product-entry__body-actions-wrapper').$('a[href*="' + productIdCurrent + '"]').getText()

And voila, text appeared :)
Hope it will help someone with the similar issue :D

How to chain selectors in order to get element inside with webdriverio

Answers (1)

Related Questions