量角器在出现在页面之前单击元素答案

【问题标题】：Protractor click element before its appears at the page量角器在出现在页面之前单击元素
【发布时间】：2018-07-19 15:33:46
【问题描述】：

我在量角器中等待时遇到了一些问题。例如，我正在加载的页面之间导航，然后我需要单击一个按钮。但是，有时，按钮会在加载消失之前出现。所以量角器点击这个按钮，在加载的后面，按钮没有任何动作，因为加载是在屏幕上。那么，我该如何使用等待这种情况呢？

我一直在尝试：

EC.invisibilityOf(loading)
    .then(() => {
        EC.elementToBeClickable(button)
            .then(() => {
                browser.actions().mouseMove(button).click().perform();
            });
    });
});

【问题讨论】：

标签： javascript typescript protractor e2e-testing gulp-protractor

【解决方案1】：

您应该为一般等待创建一些辅助方法。假设您将具有以下等待功能：

async waitForDisplayed(element: ElementFinder, timeout = 20000): Promise<boolean> {
  try {
     return await browser.wait(element.isDisplayed());
  } catch (error) {
    return false;
  }
}

假设您具有上述功能，您可以等待元素显示。结合检查页面是否仍在加载的功能非常有用。

要创建一个确定页面是否仍在加载的函数，您必须搜索在页面加载时显示的某个元素或显示为最新的元素之一。在我们的测试套件中，我们一直在等待微调器消失。

等待页面加载示例：

async function waitForTestability(timeout = 20000): Promise<boolean> {
  let spinner = element(by.css('.spinner'));
  try {
    await browser.wait(async function () { return !await spinner.isDisplayed(); });
    return true;
  } catch (error) {
    return false;
  }
}

然后您可以使用waitForTestability() 函数修改您的waitForDisplayed() 函数，这样每当您使用waitForDisplayed() 时，首先测试页面是否仍在加载：

async waitForDisplayed(element: ElementFinder, timeout = 20000): Promise<boolean> {
      try {
         await waitForTestability();
         await browser.wait(element.isDisplayed());
         return true
      } catch (error) {
        return false;
      }
    }

干杯！

【讨论】：

【解决方案2】：

您是否尝试在点击前让浏览器休眠一点？

browser.sleep(2000);

【讨论】：

我已经尝试过了，但我认为这不是解决问题的最佳方法。
Idk，我经常在我的应用程序中使用安静的 browser.sleep，它解决了许多与网络浏览器同步的问题。

【解决方案3】：

尝试等待元素：

static forElementVisible(element) {
    return new Promise<any>(async (resolve) => {
        await browser.driver.wait(ExpectedConditions.visibilityOf(element), 10000,
            `Timed out waiting for element to become visible`).then(() => {
                resolve();
            });
    });
}

【讨论】：