How Can I Wait Until Vue Finishes Processing?

Question

I'm using Selenium to test a web page and sometimes it gets unreliable because it's still processing "Vue" and the code starts to look for elements on screen. But I should wait until vue finishes loading.

How Can I Wait Until Vue Finished Processing?

For example, while it's loading, I can see vue tags:

Are you asking about waiting for specific element or the whole page? — AutomatedOwl, Jul 04 '18 at 20:49
Any case would work for me. I want to find an element, but wait until there are no "vue" tags on it. — alansiqueira27, Jul 04 '18 at 20:55

score 2 · Answer 1 · answered Jul 04 '18 at 21:20

Maybe something like this method worth trying, by customizing expected condition for vue tag non-existence:

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;
            }
        }
    });
}

Andrei Suvorkov · Answer 2 · 2018-07-04T21:26:15.873

2

You can use the wait function with the following xPath:

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

The xPath uses not and and. not means that will be selected elements without @v-on:click = 'drop' attribute. and is to select an element with @src = 'img/end_call.svg' but not with @v-on:click = 'drop'

More information about xPath operators can be found here.

edited Jul 04 '18 at 21:26

answered Jul 04 '18 at 21:20

Andrei Suvorkov

5,559
5
22
48

1

@AutomatedOwl you are right. I have changed to clickable. Thank you for feedback. – Andrei Suvorkov Jul 04 '18 at 21:26

undetected Selenium · Answer 3 · 2018-07-05T14:08:00.603

Functionally, Selenium have no direct dependency whether the AUT¹ is built through either Vue.js, ReactJS or JavaScript. From Selenium perspective what matters most is the different states (mentioned below) of an WebElement with whom you want to interact as follows:

present
visible
interactable (i.e. clickable)

So basiaclly you need to induce a waiter i.e. WebDriverWait for the desired element to be in your desired state as follows:

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);

As per the HTML you have shared to wait for the desired element to be clickable you can use the following solution:

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

_{¹Application Under Test}

Update

As per your comment update, if the element becomes interactable I don't see any obstacle in sending the character sequence. However, if the character sequence disappears on post Vue finish processing we can use the ExpectedConditions as stalenessOf

Here you can find a similar discussion on JavaScript __doPostBack in How do I wait for a JavaScript __doPostBack call through Selenium and WebDriver

sorry but I still should wait for the Vue to finish processing, because the page gets refreshed once it's done (that's 1 scenario). So Selenium can be unstable if it gets the element before the refresh is done. — alansiqueira27, Jul 05 '18 at 13:59
@alansiqueira27 Checkout my answer update and let me know if that answers your question. — undetected Selenium, Jul 05 '18 at 14:13

How Can I Wait Until Vue Finishes Processing?

3 Answers3

Update