cypressvuejs3slidetogglequasar-framework

Quasar2 Vue3 Cypress slide toggle status mismatch with what is shown on Cypress browser


My vue template:

<template>
  <q-item tag="label" v-ripple>
    <q-item-section>
      <q-item-label class="text-mono">
        {{ name }}
      </q-item-label>
      <q-item-label caption>{{ description }}</q-item-label>
      <q-item-label
        caption
        class="text-red"
        v-show="warning"
        :key="warning"
        v-for="warning in warnings"
      >
        {{ warning }}
      </q-item-label>
      <q-item-label caption class="text-red" v-show="warningMsg">
        {{ warningMsg }}
      </q-item-label>
    </q-item-section>
    <q-item-section avatar>
      <q-toggle
        color="indigo"
        v-model="model"
        :disable="isToggleDisabled"
        @triggerFunc="btnToggleTrigger"
      />
    </q-item-section>
  </q-item>
</template>

I have the following cypress E2E test code snippet:

  it('Verify Toggle Button from auto-generated page', () => {
    cy.get('[data-test="toggle-setting-0"]').should("not.be.checked");
    cy.get('[data-test="toggle-setting-0"]').click();
    cy.get('[data-test="toggle-setting-0"]').should("be.checked"); // XXX
  });

The status validation fails AFTER the click(). However, cypress browser UI shows that the slider button is clicked. The error message:

Timed out retrying after 4000ms: expected '<label.q-item.q-item-type.row.no-wrap.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable>' to be 'checked'

What do I miss?


Solution

  • The <input> is within the element that has the data-test attribute.

    You can verify the state by one of the inner element's class. Does not seem ideal to me, but it works.

    cy.get('[data-test="toggle-setting-0"]')
      .find('.q-toggle__inner')
      .should('have.class', 'q-toggle__inner--falsy')
    
    cy.get('[data-test="toggle-setting-0"]')
      .find('input')
      .check({force: true});
    
    cy.get('[data-test="toggle-setting-0"]')
      .find('.q-toggle__inner')
      .should('have.class', 'q-toggle__inner--truthy')
    

    Ideally, you would check the value of the v-model variable.