Waiting for asynchronous calls in Protractor

Waiting for asynchronous calls in Protractor

Sometimes when dealing with tests the asynchronous objects are just a little ugly and hard to read. For instance if you have 3 buttons on a page and you wanted to make sure that all 3 were the same size. You would have to wrap all 3 elements together with a promise all. I am sure you can imagine the fun. With ES6 there is as new option to await asynchronous calls.

First you will need to add some libraries to your project

$ npm install babel-core babel-plugin-transform-async-to-generator

Then you will need to add some information to the protractor-conf.js

//You can add this either at the top of the file or you can put it within your onPrepare section.
require('babel-core/register');

Now create a .bashrc file

{
  "plugins": ["transform-async-to-generator"]
}

Now the fun part accessing the power of async and await. On you it statement we need to add an async.

it('should give us text', async function() {...

or like this if your are more current in syntax

it('should give us text', async() => {...

Now lets say you want to write the text to the console within your test.

it('should give us text', async() => {
  let someTxt = await $('.someElement').getText();
  console.log(someTxt);<
});

It is that simple. To compare the same using a then.

it('should give us text', () => {
  $('.someElement').getText()
    .then((val) => { console.log(val) });
});