Protractor: what's the difference between ignoreSynchronization and async/await in Protractor

Question

I am new in Protractor. And I am doing tests to be familiar with it. Here, I met a problem what I cannot distinguish between ignoreSynchronization and async/await method. I had 3 blocks to test them. The first is clear with protractor's own async features.

it('without await and ignoreSynchronization', async function() {
  await browser.waitForAngularEnabled(false);
  await browser.driver.get('https://www.baidu.com');

  console.log('1');
  element(by.css('#kw')).sendKeys('protractor').then(() => {
    console.log('2');
  });
  console.log('3');
  console.log('4');
  element(by.css('#su')).click().then(() => {
    console.log('5');
  })
  console.log('6');

  browser.driver.sleep(2000);
});

It is clear that the print flow is 1,3,4,6,2,5 The second is the first block adding await

it('with await', async function() {
  await browser.waitForAngularEnabled(false);
  await browser.driver.get('https://www.baidu.com');

  await console.log('1');
  await element(by.css('#kw')).sendKeys('protractor').then(() => {
    console.log('2');
  });
  await console.log('3');
  await console.log('4');
  await element(by.css('#su')).click().then(() => {
    console.log('5');
  })
  await console.log('6');

  browser.driver.sleep(2000);
});

The print flow of this block is 1,2,3,4,5,6. For the last block, it is a clear version with ignoreSynchronization method

it('with ignoreSynchronization is True', async function() {
  await browser.waitForAngularEnabled(false);
  await browser.driver.get('https://www.baidu.com');
  browser.ignoreSynchronization = true;

  console.log('1');
  element(by.css('#kw')).sendKeys('protractor').then(() => {
    console.log('2');
  });
  console.log('3');
  console.log('4');
  element(by.css('#su')).click().then(() => {
    console.log('5');
  })
  console.log('6');

  browser.driver.sleep(2000);
});

The result of this block is the same as the first one? I don't know why. Perhaps, I did not use ignoreSynchronization as a correct way. But can anyone explain what's difference between these two methods? Many thanks

Answer 1

ignoreSynchronization and async/ await are very different from each other.

ignoreSynchronization :

This function is already deprecated and replaced by waitForAngularEnabled() function.

Why is it needed?

Protractor is widely used to test Angular websites. So when execution starts, the protractor searches for angular components in the application under test. So if we are testing angular application, one can initialize

browser.waitForAngularEnabled(true)

which also means

browser.ignoreSynchronization = false

But if anyone wants to test a non-angular website, one must disable searching for angular components during execution. Hence below settings are used

browser.waitForAngularEnabled(false)

which also means

browser.ignoreSynchronization = true

asynch / await

They are used to handle promised. As JavaScript is a synchronous language, and it is asynchronous in the sense of callback functions that are called during execution, and promise is used to handle these functions

Now I will explain the outputs on 2nd and 3rd programs:

  await console.log('1'); // 1 will be printed
  await element(by.css('#kw')).sendKeys('protractor').then(() => {
    console.log('2'); // as `await` keyword is used, execution will wait till promise is resolved and then 2 is printed
  });
  await console.log('3'); // print 3
  await console.log('4'); // print 4
  await element(by.css('#su')).click().then(() => {
    console.log('5'); // again execution will wait till promise is resolved and 5 is printed
  })
  await console.log('6'); // print 6

Hence op is 1,2,3,4,5,6

for 3rd code

console.log('1'); // print 1
  element(by.css('#kw')).sendKeys('protractor').then(() => {
    console.log('2'); // this block will be handled by browser for execution and executed once stack is emppty
  });
  console.log('3'); // print 3
  console.log('4'); // print 4
  element(by.css('#su')).click().then(() => {
    console.log('5'); // this block will be handled by browser for execution and executed once stack is empty, after printing 2
  })
  console.log('6'); // print 6. Now stack is empty and after printing 6, 2 will be printed

Hence op is 1,3,4,6,2,5

If you want to learn more about asynchronous programming, do check out this video by Philip Roberts at JSConfEU

Hope this will solve your query :-)