quasar-testing: Simple select component randomly fails test
I have a very simple QSelect based component that will occasionally fail as image below:
It happens very frequently during CI (cypress run), less so via cypress open, and I can’t find the cause. The last green message makes me think that Cypress is able to find the popup menu, but even though I can always see its options in the test, withinSelectMenu can’t find them inside the menu, failing here:
Why would that happen only occasionally? Since withinSelectMenu “assumes there’s a single select menu open at any time”, I wonder if there could be some extra empty popup left open somewhere, maybe not correctly unmounted by Cypress between tests or something. I’d appreciate advise on how to narrow this bug down further.
Test:
const tipo = ref('PR');
it('v-model works', () => {
cy.mount(SeletorDeTipo, { props: { ...vModelAdapter(tipo) } });
cy.dataCy('campo-tipo').closest('.q-select').select('PLL');
cy.then(() => expect(tipo.value).to.eq('PLL'));
});
Component:
<template>
<q-select
label="Tipo"
v-model="tipo"
:options="tipos"
clearable
data-cy="campo-tipo"
/>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
modelValue: string | undefined;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', valor: string | undefined): void;
}>();
const tipos = ['PLL', 'PDL', 'PR', 'IND']
const tipo = computed({
get: () => props.modelValue,
set: (valor) => emit('update:modelValue', valor),
});
</script>
I’m using version 5.1 and Cypress 12.11.0.
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 2
- Comments: 22 (16 by maintainers)
I tried digging into this again. It is difficult to pinpoint the culprit since the issue occurs randomly in CI and rarely locally. But it does happen every now and then. I looked into the code but could not locate anything causing this.
I guess it is related to Cypress finding the element, trying to click on it while it is still invisible. Cypress is supposed to check that the element is visible before clicking but it seems not to be doing so for some reason. Adding explicit visibility checks resolves the issues. I have added these explicit visibility checks to the Quasar QSelect component tests and it seems to no longer be failing.
The issue and Cypress blog post below talk about this more and the recommendation in such cases is to explicitly check that the element is visible before clicking.
I can confirm the errors on Quasar tests, I’m also consistently getting similar errors. In a few cases, some of the failing test cases pass.
Seems like I pin-pointed the problem to this change: https://github.com/quasarframework/quasar/commit/c9e43faf2f12d23935679522ddce5c50271378c2
Not really sure what’s going on there, I’ll ask for Razvan input on this
I was able to get errors consistently by running
yarn test:component:run --spec "src/components/select/__tests__/QSelect.cy.js"in Quasar repo
uifolderAll errors are due to clicks on elements with
visibility: collapseUsingwaitForAnimationsdidn’t help in any way, but the problem is solved by usingforce: trueon clicks involving.q-menuI guess this is indeed a problem with QMenu animations, but it doesn’t really make sense because Cypress should retry and eventually find the correct element, or at least it used toThe problem is that using
force: trueisn’t possible when doingcy.get('.q-menu').should('be.visible')which considersvisibility: collapseas not visible either, and it seems it’s not retrying the check eitherIn this case, it looks like https://github.com/quasarframework/quasar/blob/3ef2a0a036ad7157b1d69c3d0edb4563c625e433/ui/src/utils/private/position-engine.js#L175 isn’t being called when the assertion takes place.
We just noticed the same problem in our own Quasar UI test suite, we’re investigating the problem