Question

由于在AJAX调用过程中我在整个屏幕上放置了一个加载蒙版（中间带有加载gif的透明黑色），我很难通过一些测试。

如果每次pause(2000)，我都可以使用它，但是应用程序中AJAX调用的数量使解决方案变慢。我正在尝试使用waitUntilMissing，但无法正常工作。

我有一个div，有两个班级：load-mask和loading。
load-mask一直在那里
loading类应用于div；这是防毒面具
收到AJAX响应后，loading类已删除

所以在我的测试中，我正在尝试这样做：

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

加载页面
输入文字并点击保存
刷新页面
确保文本仍然存在

我在assertSee上遇到错误，因为一旦页面加载，就应用loading，因为它是AJAX调用，因此尚未加载文本。

我假设waitForMissing('.load-mask')在加载掩码甚至未启动之前就已通过，因此它在加载过程中尝试assertSee，但这是一个假设。

仅使用pause外面是否有可行的解决方案？

编辑：我目前正尝试在页面上单击以重新加载AJAX，而不是整个页面。我仍然遇到同样的问题。

现在，我正在尝试这种方法：

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

单击选项卡将加载我指的AJAX调用。我在屏幕截图中注意到，它始终显示我的.loading动画。

所以... Tab 2应该是一个空白框，但屏幕截图显示该文本尚未清除，并且加载掩码仍然存在（在收到响应后发生）。

因此，如果不使用pause，就无法完成AJAX通话的计时。我应该尝试另一种方法吗？

编辑2

在这里插入我的载荷面罩。 vue.js axios库。

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

在每个Laravel刀片模板上，我首先尝试了此方法：

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

但是现在我正在尝试这种方式，加载类始终存在并且仅切换显示无/阻止

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

同样的问题也会通过这种方式发生。存在加载掩码，并且我还注意到在Laravel Dusk中切换选项卡时，文本框未清除（在常规浏览器中，这些选项可以很好地清除）。

编辑3

第一个断言通过，然后在尝试->press('Save')时失败。我收到此错误：

Facebook\WebDriver\Exception\UnknownServerException: 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>

这是我要运行的测试。如您所见，我彼此之间紧接着有一个waitUntilMissing和一个assertMissing。然后我按Save，它说仍然有一个加载掩码。如果我在keys语句之前等待2秒钟，则可以正常工作。

$browser->loginAs($this->user)
  ->visit(new CustomInputPage)
  ->waitUntilMissing('.loading')
  ->assertMissing('.loading')
  ->keys('.ql-editor', 'Test Text')
  ->press('Save')
  ->waitUntilMissing('.loading');

Laravel Dusk：等待加载掩码/覆盖完成

0 个答案: