解释 Protractor 中的 async/await

Question

我是量角器的新手。这个函数中的 async/await 是如何工作的？谁能给我解释一下？

it('TC_01 - Verify Home page title', async () => {
    await headerPage.waitForTitleContain('Homepage', 30000);
    await expect(headerPage.getTitle()).toEqual('Homepage');
});

Answer 1

这完全是关于 JavaScript 的异步特性。

目前量角器提出了几种处理异步操作的方法，（我没有在这里描述直接的承诺链和生成器）：

1) 承诺管理器/控制流

https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs#control-flows

这是一种抽象，使您的所有操作都被一个一个地调用，就像一个队列。每个动作都会返回一个特殊的对象——一个 Promise。它表示异步操作的结果，将在将来接收。

2) 第二种方式 - 异步/等待

https://ponyfoo.com/articles/understanding-javascript-async-await#using-async-await

它是围绕 Promise 对象的新抽象，允许轻松地逐个链接操作。优点是这是本地语言构造，而不是 Promise Manager，并且使您的代码看起来像同步的，带有 try/catch 和其他熟悉的构造。

您可以将 await 想象为“暂停代码执行，直到从操作返回的承诺得到解决”

但是 async/await 仍然可以在内部使用 Promise。

在 protractorJS 中使用 async/await 时的一些建议：

1. 确保您禁用了控制流/承诺管理器：https://github.com/angular/protractor/blob/master/lib/config.ts#L714 将等待与启用的控制流混合可能会导致不可预知的结果。

2. 不要忘记在所有异步操作前加上 await（通常这都是量角器 api 方法）。如果您忘记执行此操作 - 没有 await 的操作不会与其他操作一起排队，因此操作顺序将被破坏

3. 确保您使用的是支持此功能的 nodejs - 至少 nodejs 7.8.x（或更高版本）。如果使用 TypeScript，请将编译目标设置为 "target": "es2017"

4. 为了不忘记应该在哪里使用 await，而在哪里不使用，我可以建议使用插件设置 eslint - https://www.npmjs.com/package/eslint-plugin-no-floating-promise 并配置 eslint 以针对此规则抛出错误：https://eslint.org/docs/user-guide/configuring/rules#configuring-rules

更多阅读： https://github.com/angular/protractor/blob/master/docs/control-flow.md

https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs#option-3-migrate-to-asyncawait