Not able to click on elements in loop in protractor - loops

Question

I have a ecommerce website, which has list of products similar to amazon. i am trying to look for a element and click it. i have tried by filter and map and both not working for me. Please help.
Below is the code for each product:
<b class="productNameHover pcursor word-break">product1</b>
<b class="productNameHover pcursor word-break">product2</b>
<b class="productNameHover pcursor word-break">product3</b>
<b class="productNameHover pcursor word-break">product4</b>
say i have 4 elements in my page. so, i have tried to get the count and it working for me.
var products = element.all(by.className('productNameHover')) ;
expect(products.count()).toBe(4);
when i tried filter,
Solution A) not working, no error message but did nothing
var products = element.all(by.className('productNameHover'));
products.filter(function(elem) {
return products.getText().then(function(text) {
return text === 'product4';
});
}).click();
browser.sleep(5000);
Solution B) not working; index out of bound; Trying to access element at index: 0, but there are only 0 elements that match locator
var products = element.all(by.className('productNameHover'));
products.filter(function(elem) {
return products.getText().then(function(text) {
return text === 'product4';
});
}).first().click();
browser.sleep(5000);
Soluction C) no error message but did nothing
var products = element.all(by.className('productNameHover'));
products.filter(function(elem) {
return products
.element(by.xpath(
"//div[#class='item text-center slide-image-content active']/img"
))
.getText()
.then(function(text) {
expect(text).toContain(product4);
})
.then(function(filteredElements) {
filteredElements.first().click();
});
});
browser.sleep(5000);
Solution D) This is working and giving me all the products; but i need to either click on a single product or loop through
var products = element.all(by.className('productNameHover'));
products.map(function(item) {
return item.getText();
}).then(function(txt) {
console.log(txt);
//expect(txt).toContain("product 4")
});
Solution E) not working and no error message
products.map(function(item) {
return item.getText();
}).then(function(txt) {
console.log(txt);
if( txt== 'product4') {
console.log(item);
item.click();
browser.sleep(5000);
}
});
Solution F) I tried to click on all the elements in loop but it is clicking on the first element and not clicking on the second one; it is giving Failed: stale element reference: element is not attached to the page document.
products.map(function(item) {
browser.sleep(5000);
item.click();
browser.sleep(5000);
var backButton = element.all(by.className('btn btn-outline btn-big mt-3 ml-0 ml-sm-2')).first() ;
backButton.click();
browser.sleep(5000);
})

Answer 1

You have wrong understand the Protractor API: each() / map() / filter(). Recommend you to learn JavaScript Array's forEach() / map() / filter() to have a better understanding before you use Protractor API.
Solution A)
return products.getText() should be return elem.getText().
filter() return an element array, thus you can't call click() on array.
Solution B)
return products.getText() should be return elem.getText().
Solution E) map() return array too.
products.map(function(item) {
return item.getText();
}).then(function(txt) {
// txt = [ 'product1', 'product2', 'product3', 'product4']
console.log(txt);
if( txt == 'product4') { // this condition never be true
console.log(item);
item.click();
browser.sleep(5000);
}
});
// correct code example
products.map(function(item) {
return item.getText();
}).then(function(txts) {
// txts = [ 'product1', 'product2', 'product3', 'product4']
console.log(txts);
let index = txts.indexOf('product4');
if( index > -1) {
products.get(index).click();
browser.sleep(5000);
}
});

Answer 2

Have you tried using each() function of the protractor API ?
var products = element.all(by.className('productNameHover'));
products.each(function(element) {
return element.getText().then(function (text) {
if(text === 'product4') {
return element.click();
}
});
})
I would suggest you to switch to new async/await syntax of writing js code.
const products = element.all(by.className('productNameHover'));
products.each(async function(element) {
let text = await element.getText();
if(text === 'product4') {
await element.click();
}
});
You can also use map() function -
element.all(by.className('productNameHover')).map(function(element) {
return element.getText(function(text) {
return text === 'product4'
});
}).then(function(elements) {
for (var i = 0; i < elements.length; i++) {
elements.get(i).click();
}
});

Answer 3

Sounds like you got it working and I may be misunderstanding, but if you're just trying to click on a specific product in the list, you can use
element(by.cssContainingText('.productNameHover', 'product4')).click();