How to click on Button until a dependent value reaches a certain value?

With Protractor I'm trying to automate a part of a UI, in which with plus-minus buttons a min-max-range (i.e. 100'000-200'000) is selected.

There is an inputAmount (i.e. 250'000), defining the range to select. Now I should click to the plus-button until I get a range 200'000-300'000, identified by the dynamically adjusted <div class="currentMax">100'000</div>.

My issue is to convert the currentMax of the currently selected range from String to a number, so I can compare it to the inputAmount. The HTML looks like this:

<html>
<div class="max">100'000</div>
<div class="slider-buttons">
  <div class="slider-button">
    <div class="slider-button-plus"></div>
  </div>
  <div class="slider-button">
    <div class="slider-button-minus"></div>
  </div>
</div>
</html>

My protractor code looks something like this:

this.selectAmountRange = function() {
    var currentMax = $('.max').getText();  //How do I get this value as number?
    var btnPlus = $('.slider-buttons .slider-button-plus');
    for (i = currentMax; i <= inputAmount; i = currentMax) {
        btnPlus.click();
        browser.wait(300);
    };
};

One problem is that currentMax is thousand-delimited with "'", so I can't convert it straight forward. The other problem is, that getText() returns a promise, but even though I found some examples I failed so far to get the string and even remove the delimiter.

I tried this, but didn't work.

var currentMax = $('.max').getText().then(function(value){
    value.replace(/\'/,'');
    });

As I'm quite new to JavaScript and Protractor, I assume it's just some syntax I'm doing wrong. Grateful for any advice and a nudge towards a doable function.

Answers:

Answer

Since javascript is asynchronous, you need to resolve the promise before accessing the return value from the promise. In your case, you need to implement recursion to make your method to click the slider until required value is set. Have a look at below example.

var selectAmountRange = function(inputAmount) {
     $('.max').getText().then(function(currentMax){
         var btnPlus = $('.slider-buttons .slider-button-plus');
          if(currentMax < selectAmountRange){
              btnPlus.click();
              browser.sleep(3000);
              selectAmountRange(inputAmount); //call the same method untill required inputAmount is selcted.
          }
     }; 
};
Answer

I don't have the right to comment so I put it as an answer, did you put all your code inside then() - after the promise returns the value ?

The currentMax is a variable initialized once, does the loop ends once it enters it !?

You mentioned currentMax and in code there is max are they the same ? what does the btnPlus click increments, the max ?

Finally I would suggest something similar to:

$('.max').getText().then(function(value){
    var currentMax = parseInt(value.replace(/\'/,''));
    var btnPlus = $('.slider-buttons .slider-button-plus');
    for (i = currentMax; i <= inputAmount; i++) {
        btnPlus.click();
        browser.wait(300);
    };
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.