Quasar2 Vue3 Cypress 滑动切换状态与 Cypress 浏览器上显示的内容不匹配

我的 vue 模板：

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

我有以下 cypress E2E 测试代码片段：

  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
  });

状态验证失败之后click()。但是，cypress 浏览器 UI 显示滑块按钮已被单击。错误信息：

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'

我想念什么？

The <input>位于具有以下元素的元素内data-test属性。

您可以通过内部元素的类之一来验证状态。 对我来说似乎不太理想，但它有效。

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')

理想情况下，您应该检查v-model多变的。