Selenium with async/await in JS, find and click on element

Question

I'm trying to refactor my tests using Selenium webdriver and Mocha to ES7 with async/await functionality. I have got following piece of code:

await loginPage.loginAsAdmin()

/* THIS DOES NOT WORK */
//await layout.Elements.routePageButton().click()

/* THIS DOES WORK */
let a = await layout.Elements.routePageButton()
await a.click()

I don't understand why the particular does not work - I get:

TypeError: layout.Elements.routePageButton(...).click is not a function

Function before click method returns webElement, as you can see:

Layout:

routePageButton:  async () => await findVisibleElement('#route_info a')
const findVisibleElement = utils.Methods.Element.findVisible

Method:

findVisible: async (cssSelector) => {
  let elm = await driver().findElement(by.css(cssSelector))
  return elm
}

Answer 1

The problem here is misunderstanding that await is a language keyword in ES2017 that allows you to block execution of the calling async function until a Promise returned by an invoked function resolves.

routePageButton() returns a Promise, and this is why the second syntax above works, as execution is blocked until the Promise resolves to a WebElement object.

However in the syntax you are using in the first example, the function that it is attempting to await on (click()) is never called, because a Promise does not have a click() function. Note that you have two awaits in your second syntax, but only one in your first.

To do what you are attempting to do in one line, you would have to do something like:

await (await layout.Elements.routePageButton()).click()