How do you add a promise to the flow control queue using protractor?

Question

In my test I am calling and outside library to seed data into our backend before running some ui tests using protractor.

'use strict'

var dataBuilder = require('data_builder.js');

describe('test', function () {
  var testData = {
    name: 'foo',
    title: 'bar',
    ...
  };

  beforeEach(function () {
    //create test data on the backend
    dataBuilder.create(testData).then(function (id) {
      testData.id = id.id;
    });
  });



  it('test something', function () {
    ...
  });

As such the promise returned by the dataBuilder isn't resolved before the it() actually finishes. How can I add the promise returned by the dataBuilder into webDriver's flow control?

Answer 1

Protractor exposes WebDriverJS promises on the protractor object so you could use either the flow.await method or create a new promise and use flow.execute.

The former could be achieved something like:

flow = protractor.promise.controlFlow()

flow.await(dataBuilder.create(testData)).then( function(id) {
    testData.id = id.id;
})

And you can see an example of the latter in this blog post.

This could be done in the it function itself or if this is common to all your tests consider placing it in the onPrepare function of your protractor config.

Answer 2

In my protractor tests I add something into webDriver's flow control using the following pattern. If one creates and returns a promise from these "various statements", the promise will be correctly inserted into the control flow.

browser.controlFlow().execute(function() {
    // various statements
});

Answer 3

In this specific case, you could use the done callback in the beforeEach like this:

beforeEach(function (done) {
   dataBuilder
      .create(testData)
      .then(function (id) {
         testData.id = id.id;
      })
      .finally(done);
});

Accepting a done callback parameter indicates that the setup is asynchronous.

Answer 4

I never remember the syntax, so I use a hack of sort that is easier to remember since it relies on the way promise behaves (so basically you can use this in every promise based system)

browser.sleep(1).then(()=> {
  return someAsyncPromiseAction();
})

Another thing you could do is simply rely on the action before it. So if you, for example, just clicked a button it will look like this

$(' ... ').click().then( () => { return someAsync(); })

While this doesn't add a promise to the flow control, you still get the same result.