There are many tutorials but just can't figure it out... So i am practicing on https://www.saucedemo.com/inventory.html and trying to get the list of elements, and compare it to a list, to see that it is ok. Will do the same after sorting Z to A, and same with price. But i am quite a noob and beginner and really struggling. Until now i managed to get the list and reverse it (?)
const array1 = $$('.inventory_item_name').forEach(element => {
console.log(element.getText())
});
const array2 = $$('.inventory_item_name').reverse().forEach(element => {
console.log(element.getText())
});
If i try to compare these with === it will be true :/ i am trying it in VScode -Js - webdriverIO - Mocha
Found a great tutorial on udemy
const itemNameLocators = $$('.inventory_item_name'); //gets the item names
const originalItemNameText = itemNameLocators.map(item => item.getText()); //maps the item names and covnerts to text (?)
console.log(originalItemNameText) //prints the value- item names- in an array
const itemNameCopy = originalItemNameText.slice() //creates a copy of the item names - not to change the original array
const sortedItemNames = itemNameCopy.reverse() //sorts the copied list - to match the websites copy
console.log(sortedItemNames) //logs it - for personal use only
expectChai(originalItemNameText).to.eql(sortedItemNames) //compares the 2 array texts
where I added the .reverse(), in this case the test will fail. without the .Slice it was passing whatever the values were and in what order. there it will be .sort(), and in the test case where I will sort on the page itself, I will change it accordingly. The same thing can be done on the price.
Of course, there was an easier way, just to check the first item name = x and when sorting check the name again to contain the last item, but that was too basic.