Click() event on e2e test in cypress does not work, when used on Switch Element Plus component

Question

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.

Test in cypress CLI

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.

Answer 1

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

cy.getData("edit-mode-switch").eq(1)
  .next('span')
  .click()

Answer 2

It works now. Thanks for help. Clicking on the span as well as waiting for hydration to finish was the solution.

        cy.wait(3000)
        cy.getData("edit-mode-switch").eq(1).next('span').click({ force: true });
        cy.getData("create-button").should('be.visible');