Событие Click() в тесте e2e в cypress не работает при использовании в компоненте Switch Element Plus
При ручном тестировании моего приложения Nuxt нажатие на элемент переключателя срабатывает и меняет мою глобальную переменную. Но в тесте Cypress переключатель остается выключенным, даже если событие щелчка выполняется успешно.
Мой тест выглядит так:
it.only('check if creeate button is visible', () => {
const pagesToCheck = [
'/encyclopedia/topics?page=1&language=cs',
'/encyclopedia/questions?page=1&language=cs',
'/encyclopedia/questions?kind=interactive_video&page=1&language=cs',
];
pagesToCheck.forEach((pageUrl) => {
cy.visit(pageUrl);
cy.getData("edit-mode-switch").eq(1).click({ force: true });
cy.getData("create-button").should('be.visible');
});
})
eq(1) предназначен для нацеливания на конкретный переключатель. (Их 3)
getData() — это пользовательская команда
Компонент переключателя:
<div
class = "form-check form-switch form-check-custom form-check-warning form-check-solid"
>
<el-switch
v-model = "editModeStore.editMode"
:before-change = "changeSwitch"
size = "large"
label = "Edit mode switch"
aria-label = "Edit mode switch"
style = "--el-switch-on-color: #ffc700"
data-cy = "edit-mode-switch"
/>
<span
class = "edit-mode-label"
:class = "{ 'is-active': editModeStore.editMode }"
@click = "changeSwitch"
>
{{ t('user.edit_mode') }}
</span>
</div>
Я пробовал много способов реализации события клика:cy.getData("edit-mode-switch").eq(1).click('top', { force: true });
cy.getData("edit-mode-switch").eq(1).trigger('mousedown'); cy.getData("edit-mode-switch").eq(1).trigger('mouseup');
cy.get('selector-for-your-element').dblclick();
Я также заставил Сайпресса нажать на пролет рядом с переключателем, но безрезультатно.
Я ценю любую помощь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Атрибут выбора data-cy = "edit-mode-switch" включен <el-switch>, но на родственном элементе <span @click = "changeSwitch"> есть обработчик кликов.
Возможно, :before-change = "changeSwitch" также реализует щелчок, или, может быть, вы полагаетесь на всплывание событий.
Тем не менее, стоит напрямую ориентироваться на диапазон
cy.getData("edit-mode-switch").eq(1)
.next('span')
.click()
Теперь это работает. Спасибо за помощь. Решением было нажатие на диапазон и ожидание завершения гидратации.
cy.wait(3000)
cy.getData("edit-mode-switch").eq(1).next('span').click({ force: true });
cy.getData("create-button").should('be.visible');Если вы предпочитаете ждать обработчика кликов, а не использовать фиксированное время ожидания, есть команда cy.hasEventListeners() — см. Cypress — нельзя нажать на пролет
Я не уверен, но есть несколько вещей, которые стоит попробовать. 1. добавьте
cy.wait(1000)перед кликом. Возможно, обработчики событий не были созданы, когда вы вводитеclick(), ожидание может дать им возможность обосноваться. 2. попробуйтеcy.trigger()вызвать событие щелчка — что-то вродеcy.getData("edit-mode-switch").eq(1).trigger('click')— вам может понадобиться или не понадобиться исходная командаclick().