Блог

Главная - Вопросы по программированию - Наложение навигации Vuetify не может быть отменено с помощью .click () в TestCafe

Наложение навигации Vuetify не может быть отменено с помощью .click () в TestCafe

#automated-tests #vuetify.js #e2e-testing #testcafe

#автоматизированные тесты #vuetify.js #e2e-тестирование #testcafe

Вопрос:

Я использую TestCafe для тестирования приложения Vue, которое использует панель навигации Vuetify. Когда ящик открыт, он создает серое наложение поверх остальной части приложения. Я должен иметь возможность щелкнуть по этому наложению, чтобы закрыть ящик. Это не работает; ящик остается открытым, и наложение не исчезает.

Однако, если я добавлю .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 amp; manual click on overlay will result in a pass
        .expect(Selector('div.v-overlay').exists).eql(false);
});

Этот поток звучал многообещающе, но получившаяся ошибка была исправлена 2 года назад, и предложенный обходной путь добавления .hover() не работает.

Я пробовал как Firefox 66, так и Chrome 72 на macOS 10.14 с testcafe v1.1.0.

Есть идеи, почему нажатие на наложение не работает и что я могу сделать, чтобы это исправить?

Комментарии:

1. Если я не ошибаюсь, похоже, что TestCafe некорректно обрабатывает события такого рода click. Возможно, вы могли бы открыть проблему в TestCafe

Ответ №1:

Причина проблемы заключается в том, что Vuetify использует некоторые проверки свойства event.isTrusted.

Поскольку TestCafe использует внутренний метод dispatchEvent, свойство event.isTrusted возвращает false , в то время как Vuetify ожидает получить true.

На данный момент я могу только рекомендовать вам удалить наложение с помощью механизма ClientFunctions.

У нас есть планы по изменению нашего механизма обработки событий. Пожалуйста, следите за нашим прогрессом в решении проблемы # 2543.