Vue.js form inputs blank after being typed

[gilbitron]

I'm using Laravel Spark and writing a Dusk test for the register form. The billing address is being filled by the test in the following standard way (using class selectors):

$browser->select('.form-country', 'US')
        ->type('.form-address', '44 Shirley Ave.')
        ->type('.form-city', 'Chicago')
        ->type('.form-state', 'IL')
        ->type('.form-zip', '60185');

However, some inputs (e.g. city/state) were being blanked after being filled by the Dusk test resulting in a failed test. The inputs in question have the Vue.js "lazy" modifier applied:

<input type="text" class="form-control form-city" v-model.lazy="registerForm.city">

For some reason, it looks like this is borking in Dusk.

[dmitryuk]

First you should waitForElement (VueJS ready)

[gilbitron]

@xakzona I tried that. I also tried a regular wait. The only thing that worked was removing the "lazy" modifier.

[ghost]

i put

->waitUntil('app.__vue__._isMounted')

i find this on google, but don't work

what is your solution for waitForElement with vue.js ?

[ghost]

i solved the problem by adding # to my id

->value('#titre','blablabla')

[ghost]

i solved my problem but the next expression :

->press('My button')

with vue.js code in blade, ignore my

->value('#titre','blablabla')

(no warning or error)

[driesvints]

Closing this issue because it's already solved, old or not relevant anymore. Feel free to reply if you're still experiencing this issue.