量角器：量角器中的 ignoreSynchronization 和 async/await 有什么区别

Question

我是量角器的新手。我正在做测试以熟悉它。在这里，我遇到了一个问题，我无法区分 ignoreSynchronization 和 async/await 方法。我有 3 个块来测试它们。首先是量角器自身的异步特性。

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

ignoreSynchronization 和 async/ await 彼此非常不同。

忽略同步：

此函数已被弃用并由 waitForAngularEnabled() 函数取代。

为什么需要它？

Protractor 广泛用于测试 Angular 网站。因此，当执行开始时，量角器会在被测应用程序中搜索 angular 组件。所以如果我们正在测试 angular 应用程序，可以初始化

browser.waitForAngularEnabled(true)

这也意味着

browser.ignoreSynchronization = false

但是如果有人想测试 non-angular 网站，则必须在执行期间禁用对 angular 组件的搜索。因此使用以下设置

browser.waitForAngularEnabled(false)

这也意味着

browser.ignoreSynchronization = true

异步/等待

它们是用来处理承诺的。由于JavaScript是一种同步语言，在执行过程中调用的回调函数意义上是异步的，promise用于处理这些函数

现在我将解释第 2 个和第 3 个程序的输出：

  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

如果您想了解有关异步编程的更多信息，请查看 Philip Roberts 在 JSConfEU 上的 this video

希望这会解决您的问题:-)

Answer 2

从量角器 6.0.0 开始 ignoreSynchronization 在量角器中不存在，您应该使用 browser.waitForAngularEnabled https://github.com/angular/protractor/issues/4187

所以当你做 browser.ignoreSynchronization = true 它没有效果，字面上它没有做任何事情

您看到不同结果的原因是您没有处理 promises 并且它们以随机顺序解决。有两种处理方法：async/await 和 .then() 语法，但最后一种很长，不可读且复杂，这使得调试过程成为一场噩梦

而且我认为第一个答案涵盖了其余部分

量角器：量角器中的 ignoreSynchronization 和 async/await 有什么区别

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

automated-tests

async-await

selenium-webdriver

protractor

忽略同步：

异步/等待