Как я могу ждать, пока Vue завершит обработку?

Question

Я использую Selenium для тестирования веб-страницы, и иногда она становится ненадежной, потому что она все еще обрабатывает «Vue», и код начинает искать элементы на экране. Но я должен подождать, пока vue завершит загрузку.

Как я могу дождаться завершения обработки Vue?

Например, во время загрузки я вижу теги vue:

Answer 1

Вы можете использовать функцию 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 операторах можно найти здесь .

Answer 2

Функционально, Селен не имеет прямой зависимости от того, построен ли AUT ¹ через Vue.js , ReactJS или JavaScript . С точки зрения Selenium наиболее важны различные состояния (упомянутые ниже) WebElement , с которыми вы хотите взаимодействовать следующим образом:

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

Таким образом, вам нужно вызвать официанта, т. Е. WebDriverWait , чтобы требуемый элемент находился в нужном вам состоянии следующим образом:

• наличие :

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

• видимость

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

• интерактивность (т. Е. Clickablity) :

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

В соответствии с HTML , который вы указали для , ждите , пока желаемый элемент не станет активным , вы можете использовать следующее решение:

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

_{¹ Тестируемое приложение}

---

Обновление

Согласно вашему обновлению комментария, если элемент становится интерактивным Я не вижу никаких препятствий в отправке character sequence. Однако, если character sequence исчезает на после обработки Vue , мы можем использовать ExpectedConditions как stalenessOf

Здесь вы можете найти аналогичное обсуждение JavaScript __doPostBack в Как мне ждать вызова JavaScript __doPostBack через Selenium и WebDriver

Answer 3

Возможно, стоит попробовать этот метод, настроив ожидаемое условие отсутствия тега 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;
            }
        }
    });
}