Транспортир: в чем разница между ignoreSynchronization и async / await в Protractor

Question

Я новичок в Транспортире. И я делаю тесты, чтобы с ним ознакомиться. Здесь я столкнулся с проблемой, заключающейся в том, что я не могу различить guish между ignoreSynchronization и async / await методом. У меня было 3 блока, чтобы проверить их. Первое понятно с собственными асинхронными c функциями транспортира.

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);
});

Понятно, что поток печати 1,3,4,6,2,5 Второй - это первый блок добавления 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);
});

Поток печати этого блока составляет 1,2,3,4,5,6. Для последнего блока это чистая версия с методом ignoreSynchronization

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);
});

Результат этого блока такой же, как и у первого? Не знаю почему. Возможно, я не использовал ignoreSynchronization как правильный способ. Но может ли кто-нибудь объяснить, в чем разница между этими двумя методами? Большое спасибо

Answer 1

, начиная с транспортира 6.0.0 ignoreSynchronization не существует в транспортире, вместо этого вы должны использовать browser.waitForAngularEnabled https://github.com/angular/protractor/issues/4187

, поэтому, когда вы делаете browser.ignoreSynchronization = true, это не имеет никакого эффекта, буквально он ничего не делает

, поэтому вы видите разные результаты, потому что вы не обрабатываете обещания, и они разрешаются в случайном порядке. есть два способа справиться с этим: async/await и .then() синтаксис, но последний очень длинный, нечитаемый и сложный, что делает процесс отладки кошмаром

, и я думаю, что первый ответ охватывает все остальное

Answer 2

ignoreSynchronization и async/ await сильно отличаются друг от друга.

ignoreSynchronization:

Эта функция уже устарела и заменена функцией waitForAngularEnabled().

Зачем он нужен?

Транспортир широко используется для тестирования Angular веб-сайтов. Поэтому, когда запускается выполнение, транспортир ищет angular компонентов в тестируемом приложении. Итак, если мы тестируем приложение angular, можно инициализировать

browser.waitForAngularEnabled(true)

, что также означает

browser.ignoreSynchronization = false

Но если кто-то захочет для тестирования веб-сайта, отличного от angular, необходимо отключить поиск компонентов angular во время выполнения. Следовательно, ниже используются настройки

browser.waitForAngularEnabled(false)

, что также означает

browser.ignoreSynchronization = true

asynch / await

Они используются ручкой обещал. Так как JavaScript является асинхронным языком, многие функции обратного вызова вызываются во время выполнения, и для обработки этих функций используется обещание.

Теперь я объясню результаты второй и третьей программ:

  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

Следовательно, op равен 1,2,3,4,5,6

для третьего кода

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

Следовательно op равен 1,3,4,6,2,5

Если вы хотите узнать больше об асинхронном программировании, проверьте это видео Филиппа Робертса из JSConfEU

Надеюсь, это решит ваш вопрос: -)