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

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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('Lorem 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?

EDIT: I am currently trying to click around the page to reload the AJAX instead of a full page load. I am still experiencing the same issue.

Now I am trying this instead:

$browser->loginAs($this->user)

    ->visit(new CustomInputPage)

    ->saveNarrative('Lorem ipsum dolor')

    ->clickLink('Tab 2')

    ->waitUntilMissing('.load-mask')

    ->assertSee('Lorem ipsum dolor');

Clicking a tab will load the AJAX call I'm referring to. I notice in the screenshot it's always showing my .loading animation.

So...Tab 2 should be an empty box but the screenshot shows the text hasn't been cleared yet and load mask is still present (happens after response is received).

So I can't get the timing on a completed AJAX call down without using pause. Should I try another way?

EDIT 2

Here is where my load mask is being inserted. The vue.js axios library.

import store from '../store';



let numberOfAjaxCAllPending = 0;



axios.interceptors.request.use(function (config) {

  // Do something before request is sent

  numberOfAjaxCAllPending++;

  store.commit('isLoading', true);

  return config;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with request error

  return Promise.reject(error);

});



// Add a response interceptor

axios.interceptors.response.use(function (response) {



  // Do something with response data

  numberOfAjaxCAllPending--;

  if (numberOfAjaxCAllPending === 0) {

    store.commit('isLoading', false);

  }

  return response;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with response error

  return Promise.reject(error);

});

And on each Laravel blade template, I tried this first:

<div :class="{ loading: $store.state.isLoading }" class="load-mask"></div>

But now I am trying this way, with the loading class always present and just toggling display none/block

<div :style="{display: $store.getters.getLoadingDisplay }" class="loading"></div>

Same issue occurs this way as well. The load mask is present and I am also noticing the text box isn't being cleared when switching tabs in Laravel Dusk (the tabs clear fine in a regular browser).

EDIT 3

The first assertion passes, then it fails when trying to ->press('Save'). I get this error:

FacebookWebDriverExceptionUnknownServerException: unknown error: Element <button type="button" class="btn btn-sm mt-3 btn-primary" style="float: left;">...</button> is not clickable at point (440, 912). Other element would receive the click: <div class="loading" style="display: block;"></div>

This is the test I am trying to run. As you can see, I have a waitUntilMissing and an assertMissing right after each other. Then I press Save and it says there's still a load mask. If I wait 2 seconds before the keys statement, it works fine.

$browser->loginAs($this->user)

  ->visit(new CustomInputPage)

  ->waitUntilMissing('.loading')

  ->assertMissing('.loading')

  ->keys('.ql-editor', 'Test Text')

  ->press('Save')

  ->waitUntilMissing('.loading');

edited Jan 3 at 22:15

asked Jan 3 at 15:57

Nathan

1,39053866

1

What does the error screenshot show?

– Jonas Staudenmeir
Jan 3 at 16:38

It shows my screen as expected with the load mask still present. If I pause for 2 seconds, load mask is no longer there.

– Nathan
Jan 3 at 18:03

Added more info to OP

– Nathan
Jan 3 at 18:49

1

Where exactly are you inserting the pauses?

– Jonas Staudenmeir
Jan 3 at 19:24

Added EDIT 2 above showing the axios code

– Nathan
Jan 3 at 20:18

add a comment |

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('Lorem 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?

EDIT: I am currently trying to click around the page to reload the AJAX instead of a full page load. I am still experiencing the same issue.

Now I am trying this instead:

$browser->loginAs($this->user)

    ->visit(new CustomInputPage)

    ->saveNarrative('Lorem ipsum dolor')

    ->clickLink('Tab 2')

    ->waitUntilMissing('.load-mask')

    ->assertSee('Lorem ipsum dolor');

Clicking a tab will load the AJAX call I'm referring to. I notice in the screenshot it's always showing my .loading animation.

So...Tab 2 should be an empty box but the screenshot shows the text hasn't been cleared yet and load mask is still present (happens after response is received).

So I can't get the timing on a completed AJAX call down without using pause. Should I try another way?

EDIT 2

Here is where my load mask is being inserted. The vue.js axios library.

import store from '../store';



let numberOfAjaxCAllPending = 0;



axios.interceptors.request.use(function (config) {

  // Do something before request is sent

  numberOfAjaxCAllPending++;

  store.commit('isLoading', true);

  return config;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with request error

  return Promise.reject(error);

});



// Add a response interceptor

axios.interceptors.response.use(function (response) {



  // Do something with response data

  numberOfAjaxCAllPending--;

  if (numberOfAjaxCAllPending === 0) {

    store.commit('isLoading', false);

  }

  return response;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with response error

  return Promise.reject(error);

});

And on each Laravel blade template, I tried this first:

<div :class="{ loading: $store.state.isLoading }" class="load-mask"></div>

But now I am trying this way, with the loading class always present and just toggling display none/block

<div :style="{display: $store.getters.getLoadingDisplay }" class="loading"></div>

Same issue occurs this way as well. The load mask is present and I am also noticing the text box isn't being cleared when switching tabs in Laravel Dusk (the tabs clear fine in a regular browser).

EDIT 3

The first assertion passes, then it fails when trying to ->press('Save'). I get this error:

FacebookWebDriverExceptionUnknownServerException: unknown error: Element <button type="button" class="btn btn-sm mt-3 btn-primary" style="float: left;">...</button> is not clickable at point (440, 912). Other element would receive the click: <div class="loading" style="display: block;"></div>

$browser->loginAs($this->user)

  ->visit(new CustomInputPage)

  ->waitUntilMissing('.loading')

  ->assertMissing('.loading')

  ->keys('.ql-editor', 'Test Text')

  ->press('Save')

  ->waitUntilMissing('.loading');

edited Jan 3 at 22:15

asked Jan 3 at 15:57

Nathan

1,39053866

1

What does the error screenshot show?

– Jonas Staudenmeir
Jan 3 at 16:38

It shows my screen as expected with the load mask still present. If I pause for 2 seconds, load mask is no longer there.

– Nathan
Jan 3 at 18:03

Added more info to OP

– Nathan
Jan 3 at 18:49

1

Where exactly are you inserting the pauses?

– Jonas Staudenmeir
Jan 3 at 19:24

Added EDIT 2 above showing the axios code

– Nathan
Jan 3 at 20:18

add a comment |

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('Lorem 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?

EDIT: I am currently trying to click around the page to reload the AJAX instead of a full page load. I am still experiencing the same issue.

Now I am trying this instead:

$browser->loginAs($this->user)

    ->visit(new CustomInputPage)

    ->saveNarrative('Lorem ipsum dolor')

    ->clickLink('Tab 2')

    ->waitUntilMissing('.load-mask')

    ->assertSee('Lorem ipsum dolor');

Clicking a tab will load the AJAX call I'm referring to. I notice in the screenshot it's always showing my .loading animation.

So...Tab 2 should be an empty box but the screenshot shows the text hasn't been cleared yet and load mask is still present (happens after response is received).

So I can't get the timing on a completed AJAX call down without using pause. Should I try another way?

EDIT 2

Here is where my load mask is being inserted. The vue.js axios library.

import store from '../store';



let numberOfAjaxCAllPending = 0;



axios.interceptors.request.use(function (config) {

  // Do something before request is sent

  numberOfAjaxCAllPending++;

  store.commit('isLoading', true);

  return config;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with request error

  return Promise.reject(error);

});



// Add a response interceptor

axios.interceptors.response.use(function (response) {



  // Do something with response data

  numberOfAjaxCAllPending--;

  if (numberOfAjaxCAllPending === 0) {

    store.commit('isLoading', false);

  }

  return response;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with response error

  return Promise.reject(error);

});

And on each Laravel blade template, I tried this first:

<div :class="{ loading: $store.state.isLoading }" class="load-mask"></div>

But now I am trying this way, with the loading class always present and just toggling display none/block

<div :style="{display: $store.getters.getLoadingDisplay }" class="loading"></div>

Same issue occurs this way as well. The load mask is present and I am also noticing the text box isn't being cleared when switching tabs in Laravel Dusk (the tabs clear fine in a regular browser).

EDIT 3

The first assertion passes, then it fails when trying to ->press('Save'). I get this error:

FacebookWebDriverExceptionUnknownServerException: unknown error: Element <button type="button" class="btn btn-sm mt-3 btn-primary" style="float: left;">...</button> is not clickable at point (440, 912). Other element would receive the click: <div class="loading" style="display: block;"></div>

$browser->loginAs($this->user)

  ->visit(new CustomInputPage)

  ->waitUntilMissing('.loading')

  ->assertMissing('.loading')

  ->keys('.ql-editor', 'Test Text')

  ->press('Save')

  ->waitUntilMissing('.loading');

edited Jan 3 at 22:15

asked Jan 3 at 15:57

Nathan

1,39053866

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('Lorem 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?

EDIT: I am currently trying to click around the page to reload the AJAX instead of a full page load. I am still experiencing the same issue.

Now I am trying this instead:

$browser->loginAs($this->user)

    ->visit(new CustomInputPage)

    ->saveNarrative('Lorem ipsum dolor')

    ->clickLink('Tab 2')

    ->waitUntilMissing('.load-mask')

    ->assertSee('Lorem ipsum dolor');

Clicking a tab will load the AJAX call I'm referring to. I notice in the screenshot it's always showing my .loading animation.

So...Tab 2 should be an empty box but the screenshot shows the text hasn't been cleared yet and load mask is still present (happens after response is received).

So I can't get the timing on a completed AJAX call down without using pause. Should I try another way?

EDIT 2

Here is where my load mask is being inserted. The vue.js axios library.

import store from '../store';



let numberOfAjaxCAllPending = 0;



axios.interceptors.request.use(function (config) {

  // Do something before request is sent

  numberOfAjaxCAllPending++;

  store.commit('isLoading', true);

  return config;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with request error

  return Promise.reject(error);

});



// Add a response interceptor

axios.interceptors.response.use(function (response) {



  // Do something with response data

  numberOfAjaxCAllPending--;

  if (numberOfAjaxCAllPending === 0) {

    store.commit('isLoading', false);

  }

  return response;

}, function (error) {

  numberOfAjaxCAllPending = 0;

  store.commit('isLoading', false);

  // Do something with response error

  return Promise.reject(error);

});

And on each Laravel blade template, I tried this first:

<div :class="{ loading: $store.state.isLoading }" class="load-mask"></div>

But now I am trying this way, with the loading class always present and just toggling display none/block

<div :style="{display: $store.getters.getLoadingDisplay }" class="loading"></div>

Same issue occurs this way as well. The load mask is present and I am also noticing the text box isn't being cleared when switching tabs in Laravel Dusk (the tabs clear fine in a regular browser).

EDIT 3

The first assertion passes, then it fails when trying to ->press('Save'). I get this error:

FacebookWebDriverExceptionUnknownServerException: unknown error: Element <button type="button" class="btn btn-sm mt-3 btn-primary" style="float: left;">...</button> is not clickable at point (440, 912). Other element would receive the click: <div class="loading" style="display: block;"></div>

$browser->loginAs($this->user)

  ->visit(new CustomInputPage)

  ->waitUntilMissing('.loading')

  ->assertMissing('.loading')

  ->keys('.ql-editor', 'Test Text')

  ->press('Save')

  ->waitUntilMissing('.loading');

laravel-5 laravel-dusk

edited Jan 3 at 22:15

asked Jan 3 at 15:57

Nathan

1,39053866

edited Jan 3 at 22:15

asked Jan 3 at 15:57

Nathan

1,39053866

edited Jan 3 at 22:15

asked Jan 3 at 15:57

Nathan

1,39053866

asked Jan 3 at 15:57

Nathan

1,39053866

asked Jan 3 at 15:57

Nathan

1,39053866

1

What does the error screenshot show?

– Jonas Staudenmeir
Jan 3 at 16:38

It shows my screen as expected with the load mask still present. If I pause for 2 seconds, load mask is no longer there.

– Nathan
Jan 3 at 18:03

Added more info to OP

– Nathan
Jan 3 at 18:49

1

Where exactly are you inserting the pauses?

– Jonas Staudenmeir
Jan 3 at 19:24

Added EDIT 2 above showing the axios code

– Nathan
Jan 3 at 20:18

add a comment |

1

What does the error screenshot show?

– Jonas Staudenmeir
Jan 3 at 16:38

It shows my screen as expected with the load mask still present. If I pause for 2 seconds, load mask is no longer there.

– Nathan
Jan 3 at 18:03

Added more info to OP

– Nathan
Jan 3 at 18:49

1

Where exactly are you inserting the pauses?

– Jonas Staudenmeir
Jan 3 at 19:24

Added EDIT 2 above showing the axios code

– Nathan
Jan 3 at 20:18

What does the error screenshot show?

– Jonas Staudenmeir
Jan 3 at 16:38

It shows my screen as expected with the load mask still present. If I pause for 2 seconds, load mask is no longer there.

– Nathan
Jan 3 at 18:03

Added more info to OP

– Nathan
Jan 3 at 18:49

Where exactly are you inserting the pauses?

– Jonas Staudenmeir
Jan 3 at 19:24

Added EDIT 2 above showing the axios code

– Nathan
Jan 3 at 20:18

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54025744%2flaravel-dusk-wait-for-a-load-mask-overlay-to-finish%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu