Vuetify导航覆盖层不能用testcafe中的.click()驳回

Question

我正在使用TestCafe测试使用Vuetify导航抽屉的VUE应用程序。当抽屉打开时，它会在应用程序的其余部分上创建一个灰色叠加层。我应该能够单击该覆盖层以关闭抽屉。这是不起作用的；抽屉保持打开状态，覆盖层不会消失。

但是，如果我添加.debug()，解锁页面并手动单击，则将叠加层和抽屉按预期取消，其余的测试可以进行。

下面的快速测试证明了问题。它使用Vuetify的文档中的示例作为固定装置，打开抽屉，单击覆盖层，并期望不再存在覆盖层。这将失败，因为单击后仍然可见覆盖层。

import { Selector } from 'testcafe';
fixture `Vuetify navigation drawer`
    .page `https://vuetifyjs.com/en/components/navigation-drawers`
test('is closed when clicking the overlay', async t => {
    await t
        .click('a[href="#temporary"] + div + div div.v-sheet button')
        .click('div.v-overlay')
        //.debug(); // unlock & manual click on overlay will result in a pass
        .expect(Selector('div.v-overlay').exists).eql(false);
});

此线程听起来很有希望，但是由2年前修复了结果错误，并且添加.hover()的建议解决方法不起作用。

我在MacOS 10.14上同时尝试了Firefox 66和Chrome 72，testcafe v1.1.0。

任何想法，为什么单击覆盖层不起作用，我可以做些什么来修复它？

Answer 1

问题的原因是vuetify使用事件的一些检查。

。

由于testcafe在内部使用dispatchevent方法，因此everted属性返回false，而vuetify期望获得true。

此刻，我只能建议您使用客户端功能机制删除覆盖层。

我们计划修改我们的事件处理机制。请在＃2543发行中遵循我们的进度。