javascript - 解释 Protractor 中的 async/await

Question

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

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

Answer 1

这都是关于 JavaScript 的异步特性。

目前 Protractor 提出了几种处理异步操作的方法，(我没有在这里描述直接的 promise 链和生成器):

1) Promise 经理/控制流程

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

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

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

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

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

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

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

将 async/await 与 protractorJS 结合使用时的一些建议:

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

2. 不要忘记在所有异步操作前加上 await(通常这是所有 Protractor 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