如何等待Vue完成处理？

Question

我正在使用Selenium来测试网页，有时它变得不可靠，因为它仍在处理“ Vue”，并且代码开始在屏幕上查找元素。但是我应该等到vue完成加载。

如何等待Vue完成处理？

例如，在加载时，我可以看到vue标签：

Answer 1

通过定制不存在vue标签的预期条件，也许这种方法值得尝试：

protected void waitForTagNonExistence(WebElement element) {
    WebDriverWait wait = new WebDriverWait(getDriver(), ELEMENT_WAIT_TIMEOUT_SECONDS);
    wait.until(new ExpectedCondition<Boolean>() {
        public Boolean apply(WebDriver driver) {
            try {
                return (element.getAttribute("v-touch:tap") == null);
            } catch (NullPointerException nullPointerException) {
                return false;
            }
        }
    });
} 

Answer 2

您可以将wait函数与以下xPath一起使用：

driver.wait(until.elementIsClickable(By.xpath("//img[not(@v-on:click = 'drop') and @src = 'img/end_call.svg']")), 15000);

xPath使用not和and。 not表示将被选择为没有@v-on:click = 'drop'属性的元素。 and将选择带有@src = 'img/end_call.svg'的元素，而不是选择@v-on:click = 'drop'

有关xPath运算符的更多信息，请参见here。

Answer 3

在功能上，硒与AUT ¹ 是通过Vue.js，ReactJS还是JavaScript构建的，没有直接的依赖关系。从 Selenium 角度来看，最重要的是您要与之交互的 WebElement 的不同状态（如下所述）：

• present
• visible
• interactable (i.e. clickable)

因此，您需要诱使服务生，即 WebDriverWait ，以使所需元素处于所需状态，如下所示：

• presence：

  var EC = protractor.ExpectedConditions;
  // Waits for the element with id 'abc' to be present on the dom.
  browser.wait(EC.presenceOf($('#abc')), 5000);
  

• visibility：

  var EC = protractor.ExpectedConditions;
  // Waits for the element with id 'abc' to be visible on the dom.
  browser.wait(EC.visibilityOf($('#abc')), 5000);
  

• interactibility (i.e. clickablity)：

  var EC = protractor.ExpectedConditions;
  // Waits for the element with id 'abc' to be clickable.
  browser.wait(EC.elementToBeClickable($('#abc')), 5000);
  

根据您已共享给 wait 的 HTML ，以使所需的元素可点击，您可以使用以下解决方案：

browser.wait(until.elementIsClickable(By.xpath("//img[@src='img/end_call.svg']")), 20);

_{¹ 正在测试的应用程序}

---

更新

根据您的评论更新，如果该元素变得可交互，则在发送character sequence时没有任何障碍。但是，如果character sequence在 post Vue完成处理中消失了，我们可以将ExpectedConditions用作stalenessOf

在这里您可以在How do I wait for a JavaScript __doPostBack call through Selenium and WebDriver

中找到有关 JavaScript __doPostBack的类似讨论。