Async/Await with jasmine

Question

I am using protractor and Jasmine for testing.

Say I have an async it function.

it('something', async function(){

   for(var k = 0; k < 5 ; k++){
     (function(jj){

          /...........

          await something == whatever
         ............./

      })(k);
   }

})

i want to use await inside the for loop but I am unable to do so.

Also how can i use async/await to make the code cleaner inside a protractor each function like

 it('something', async function(){

   element.locator.each((x)=>{

     await element.locator.sendKeys('something')    
   })

 })

if anyone can help this would be awesome. As now my whole test spec looks like a big mess of promises and callbacks.

it('description', async function() {
        common.separator()
        console.log('***************************************')
        console.log('something');
        console.log('***************************************')
        common.separator();
        finished_ispresent = await common.finished.isPresent(); 
        if( finished_ispresent ==  true) {
          console.log('finished is present = ' + finished_ispresent);
          common.separator();
        }

        common.somebutton.click();
        await browser.sleep(1000);
        //array declaration for storing boolean results
        some_array =[];
        some_array1 =[];
        some_array2 =[];
        some_array3 =[];
        some_array4 =[];
        //the outer for loop 
        for(var k = 0; k < 5 ; k++){

                browser.wait(EC.visibilityOf(common.something),2000);
                common.something.click();

                Something_V = await common.something.get(k).getText(); 

                browser.wait(EC.visibilityOf(common.something),5000);
                common.something.click();
                common.datepicker(k);
         }  
});

what happens is things happen so quickly that nothing works and returns a slew of errors.

Sir I have one more doubt regarding .each functions. How do you handle each functions when using async await?

it('something', function(){
    element.all.locator.each((element_each)=>{
      console.log(element_each);
    })
});

How do you handle this with Each?

Answer 1

If you use async/await , no need to use closure and nested await in each .

Let's say there are 5 input boxes on page, we need to input some value for each box, I will show examples of using and non-using async/await

 // code non-using await
 let values= ['a', 'b', 'c', 'd', 'e'];

 it('something', function(){

   for(let i=0;i<5;i++) {

      (function(j){ // we have to use javascript closure at here
         element.all(by.css('input')).get(j).sendKeys(values[j])
      })(i);      
   }   
 })

 // code using await
 it('something', async function(){

   // you can use count() to get the total input box, rather than hardcode 5
   // let cnt = await element.all(by.css('input')).count();

   let cnt = 5;

   for(let i=0;i<cnt;i++) {
      await element.all(by.css('input')).get(i).sendKeys(values[i]) 
   }   
 })

Two points you should pay attention when use async/await .

1) disable protractor's promise management (control flow) in conf.js

// protractor conf.js
exports.config= {
   SELENIUM_PROMISE_MANAGER: false,
}

2) any code line which return promise, you need to add await ahead. otherwise the script execution order will become mess.

it('description', async function() {
        common.separator()
        console.log('***************************************')
        console.log('something');
        console.log('***************************************')
        common.separator();
        finished_ispresent = await common.finished.isPresent(); 
        if( finished_ispresent ==  true) {
          console.log('finished is present = ' + finished_ispresent);
          common.separator();
        }

        await common.somebutton.click();
        await browser.sleep(1000);
        //array declaration for storing boolean results
        some_array =[];
        some_array1 =[];
        some_array2 =[];
        some_array3 =[];
        some_array4 =[];
        //the outer for loop 
        for(var k = 0; k < 5 ; k++){

                await  browser.wait(EC.visibilityOf(common.something),2000);
                await  common.something.click();

                Something_V = await common.something.get(k).getText(); 

                await  browser.wait(EC.visibilityOf(common.something),5000);
                await  common.something.click();
                await common.datepicker(k);
         }  
});

using await in .each

it('using await in each()', async function(){

    await browser.get("https://www.npmjs.com/");

    element.all(by.css('nav > ul >li >a')).each(async function(item){
        var txt = await item.getText();
        console.log(txt);
    })
})