解释 Protractor 中的 async/await [英] Explain about async/ await in Protractor

问题描述

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

I'm new to protractor. How does async/await in this function works? Can anybody explain it to me?

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

推荐答案

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

This is all about asynchronous nature of JavaScript.

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

Currently protractor proposes several ways to handle asynchronous actions, (I didn't describe direct promise chaining, and generators here):

1) 承诺管理器/控制流

https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs#控制流

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

This is abstraction that makes all your actions to be called one by one, like a queue. Each action returns a special object - a Promise. It represents result of async operation, that will be received in future.

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

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

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

It is new abstraction around promises objects and allows to easily chain actions one by one. Advantage is this is native language construction, instead of Promise Manager, and makes your code look like synchronized, with try/catch and other familiar constructions.

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

You can think of await like "suspend code execution until promise that returned from action is resolved"

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

But async/await still works with promises inside.

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

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

1. Make sure you disabled control flow / promise manager: https://github.com/angular/protractor/blob/master/lib/config.ts#L714 Mixing awaits with enabled control flow may lead to unpredictable results.

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

Do not forget to prepend ALL your async actions with await (usually this is all protractor api methods). If you will forgot to do this - action without await won't be queued with other actions, so order of actions will be broken

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

Make sure you are using nodejs that supports this - at least nodejs 7.8.x (or newer). If TypeScript is used, set compile target as "target": "es2017"

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

To not forget where await should be used, and where is not, i can suggest to setup eslint with plugin - https://www.npmjs.com/package/eslint-plugin-no-floating-promise and configure eslint to throw errors for this rule: 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

这篇关于解释 Protractor 中的 async/await的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！