When manually testing my Nuxt app, clicking on the switch element works, and it changes my global variable. But in the Cypress test, the switch remains switched off even if the click event runs successfully.
My test looks like this:
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) is for targeting a particular switch. (There are 3)
getData() is custom command
Switch Component:
<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>
I tried many ways of implementing the click event:
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();
I also made Cypress click on the span next to the switch, but with no effect.
I appreciate any help.
2
Answers
It works now. Thanks for help. Clicking on the span as well as waiting for hydration to finish was the solution.
The selection attribute
data-cy="edit-mode-switch"
is on<el-switch>
but there is a click handler on sibling element<span @click="changeSwitch">
.Maybe
:before-change="changeSwitch"
also implements click, or maybe you rely on event bubbling.Even so, it is worth targeting the span directly