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?
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.