Currently, I am focusing on parsing elements where the tag might contain the word "example". Here is an example snippet of code that I am working with:
<div class="stock-controller" style="transition: border-bottom 0.3s ease 0s, opacity 0.3s ease 0s;">
<div class="message">
<svg width="14" height="14" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd">
<path fill="#E00751" d="M14 7A7 7 0 1 1 0 7a7 7 0 0 1 14 0z"></path>
<path fill="#FFF" fill-rule="nonzero" d="M8.45 7.036L10.414 9 9 10.414 7.036 8.45 5.07 10.414 3.657 9l1.964-1.964L3.5 4.914 4.914 3.5l2.122 2.121L9.156 3.5l1.415 1.414L8.45 7.036z"></path>
</g>
</svg>Sorry, we only have 10000 of this product.</div> //Need to read here how many available products
<div class="quantity-input invalid">
<button class="btn left" aria-label="Decrease"> //How many users have chosen - how many are in stock = number of clicks required.
<svg class="svg-icon" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7 11h10v2H7z"></path>
</svg>
</button>
<input type="number" pattern="[0-9]*" min="0" max="10002" value="10002"> //Need to read how many we have chosen
<button class="btn right" aria-label="Increase" disabled="">
<svg class="svg-icon" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M13 17v-4h4v-2h-4V7h-2v4H7v2h4v4z"></path>
</svg>
</button>
</div>
</div>
https://i.sstatic.net/o68UH.png
Essentially, there are three elements to consider. First, we need to determine the quantity of products in stock (in this instance, it's 10000). Second, we must ascertain the number of items a user has selected, which is 10002. Therefore, we would need to calculate 10002 - 10000 = The amount of times to click the
<button class="btn left" aria-label="Decrease">Thus far, I have worked on:
it('Check decrease button', function (done) {
let allBtns = element.all(by.className('stock-controller'));
element.all(by.className('stock-controller')).each(function (element, index) {
// This will output: Sorry, we only have 4 of this product., Sorry, we only have 10000 of this product.
element.getText().then(function (text) {
console.log(index, text);
});
});
allBtns.count()
.then(function (countElement) {
console.log('Find decrease buttons: ', countElement)
//for (let i = 0; i < countElement; i++) {
//browser.executeScript("arguments[0].click();", allBtns.get(i).getWebElement())
//browser.sleep(1000) // sleep for 1 second
//}
})
.then(() => {
done();
})
});
Another issue arises when there are multiple instances of 'stock-controller'. For instance, there could be 5 'stock-controllers' each containing different quantities of products in stock and selected by the user.
Therefore, my query is as follows:
How can I determine the number of 'stock-controllers' present and subsequently calculate the requisite number of clicks for the decrease button for each 'stock-controller'?
The functional code is displayed below:
it('Clicked all decrease buttons', function (done) {
let allProds = element.all(by.css('div.stock-controller'));
allProds.count()
.then(function (cnt) {
for(let index=0;index<cnt;index++) {
let section = allProds.get(index),
stock_qty_str = section.element(by.css('div.message')).getText(),
user_qty_str = section.element(by.css('input[type="number"]')).getAttribute('value'),
btn_dec = section.element(by.css('button[aria-label="Decrease"]'));
Promise.all([stock_qty_str, user_qty_str])
.then(function(data){
let group = data[0].trim().match(/^Sorry.*?(\d+)/)
if(group) {
let stock_qty = group[1] * 1,
user_qty = data[1].trim() * 1,
gap = user_qty - stock_qty;
for (let i = 0; i < gap; i++) {
browser.executeScript("arguments[0].click();", btn_dec.getWebElement());
}
}
})
}
})
.then(()=>{
done();
})
});