javascript - Protractor 和异步/等待

Question

这是我的页面对象类

export class TopMenu {
  topbarMenu: ElementFinder;
  menuItems;
  numberofMenuItems: number;

  constructor() {
    console.log("TopMenu constructor called");
    this.setMenus();
  }

  async setMenus() {
    console.log("aaaaaaaaaa");
    this.topbarMenu = await element(by.css("ul[class*='topbar-menu']"));
    console.log("bbbbbbbbbb");
    this.menuItems = await this.topbarMenu.all(by.xpath("./li"));
    console.log("ccccccccc");
  }
}

这是我的“it” block 。这是程序的起点。

it("Click all Submenues 3", async () => {
    browser.waitForAngularEnabled(true);


    let topMenu: TopMenu = await new TopMenu();
    console.log("ddddddddddddddd");
}

我的输出是这样的

**TopMenu constructor called
aaaaaaaaaa
bbbbbbbbbb
ddddddddddddddd
ccccccccc

正如您从我上面的输出中看到的那样，“console.log("dddddddddddddddd")”在该行解析之前被调用“this.menuItems = await this.topbarMenu.all(by.xpath("./li) ")); 在 TopMenu 类中"

可以省略吗？

我想在“TopMenu”完全创建后执行“it block”中的任何行。

如何控制流量？

Answer 1

await构造函数，除非你正在构造一个 Promise(你不是)是没有意义的，因为构造函数不能返回一个 Promise(创建一个 Promise 时除外)

你可能想做类似的事情

export class TopMenu {
  topbarMenu: ElementFinder;
  menuItems;
  numberofMenuItems: number;
  somePromise;

  constructor() {
    console.log("TopMenu constructor called");
    this.somePromise = this.setMenus();
  }

  async setMenus() {
    console.log("aaaaaaaaaa");
    this.topbarMenu = await element(by.css("ul[class*='topbar-menu']"));
    console.log("bbbbbbbbbb");
    this.menuItems = await this.topbarMenu.all(by.xpath("./li"));
    console.log("ccccccccc");
  }
}

it("Click all Submenues 3", async () => {
    browser.waitForAngularEnabled(true);


    let topMenu: TopMenu = new TopMenu();
    await topMenu.somePromise;
    console.log("ddddddddddddddd");
}

现在您的 it block 将等待 setMenus 返回的 promise

注意:根据您得到的输出，我可以有把握地说 element(... 不是异步的(好吧，它不返回 Promise，它很可能具有异步性，但这根本没有“暴露”) - 因此你不需要 await element(....