Wait before selecting drop-downs Java Script - Protractor - Jasmine

Question

I have a list of 5 drop-downs in a single page and I want to wait for some time before selecting each drop-down because options appearing in an drop-down depends on the value selected in previous drop-down. What is the best approach for this?

HTML for one of the drop-down. All other drop-downs are similar with different values.

<select class="abc-inputBox ng-valid" formcontrolname="reportType" style="width: 200px">
<option value="null">Select Report Type</option>
<!---->
<option value="reportA" class="ng-star-inserted">reportA</option>
<option value="reportB" class="ng-star-inserted">reportB</option>
</select>

Answer 1

The easy answer is to just wait some amount of time in between selecting each dropdown, eg browser.sleep(1000) . This is basically a brute-force approach and can add unnecessary time to your tests.

The more reliable/correct way is to use Protractor's Expected Conditions . For example, you can wait until the first dropdown is populated with the selected value before clicking on the next dropdown, something like this:

let firstDropdown = element(by.id('dropdown1'));
let EC = protractor.ExpectedConditions;
browser.wait(EC.textToBePresentInElementValue(firstDropdown, 'selectedOption'));