Laravel Dusk: Wait for a load mask/overlay to finish

I am having difficulty getting some tests to pass because of a load mask I put over the entire screen during AJAX calls (transparent black with a loading gif in the middle).

I can get it to work if I pause(2000) each time, but the amount of AJAX calls in the app make that the slow solution. I am trying to use waitUntilMissing but it's not working.

• I have a div with two classes: load-mask and loading.
• load-mask is always there
• loading class applied to div during all vue.js AJAX calls; this is the load mask
• When AJAX response received, loading class removed

So in my test I am trying to do this:

$browser->loginAs($this->user)
    ->visit(new CustomInputPage)
    ->saveNarrative('Lorem ipsum dolor')
    ->visit(new CustomInputPage)
    ->waitUntilMissing('.load-mask')
    ->assertSee('Loarem ipsum dolor');

• Load a page
• Enter text & hit save
• reload page
• make sure text is still there

I get an error on the assertSee because once the page loads, the loading is applied as it makes it's AJAX call so it hasn't loaded the text yet.

I am assuming waitForMissing('.load-mask') is passing before the load mask even starts, so it tries to assertSee during the loading process, but it's an assumption.

Is there a working solution outside just using pause?

via Chebli Mohamed