Vue.js - A custom command retrieves a subject before DOM updates, using a basic command correctly retrieves it _after_

[lewishowles]

I've written a number of custom commands. Some of them are fairly basic, and just make things a little easier for me to manage. For example, I have one called findByData, which just looks for an element by a data-test attribute (cy.wrap(subject).get(`[data-test="${testSelector}"]`);).

I seem to have similar intermittent issues with a few of them, but the one I'm currently having trouble with at the moment is shouldHaveCount:

...
const shouldHaveCount = (subject, count) => {
	return cy.wrap(subject).should('have.length', count);
};

export default {
	label: 'shouldHaveCount',
	command: shouldHaveCount,
	options: { prevSubject: 'element' },
};

I have a test that's changing the number of items shown in a list via a dropdown, and then counting that the correct number of items appears.

mount();

cy.findByData('data-table-row').shouldHaveCount(25);

cy.get('my-element').select('15');
cy.findByData('data-table-row').shouldHaveCount(15);

cy.get('my-element').select('all');
cy.findByData('data-table-row').shouldHaveCount(55);

The last call there to check for 55 items fails, because it's still seeing 15 - which you can see in the playback. When the get happens from findByData, there are 15 items. When the wrap happens inside shouldHaveCount, there are actually 55, but the length is reporting the original 15.

What's confusing is two fold:

• The first change works fine - it changes from 25 elements to 15, and reads that correctly, even though it's the same process. This makes it seem like a race condition, which it probably is, but the first change always works, and the second change always fails.
• If I pull the contents of shouldHaveCount out of the command and just to cy.findByData('data-table-row').should('have.length', 55); that works every time.

Is there anything obvious about how the commands are set up that would cause this? I've had this same issue with a few of my commands in the last few days. I thought it was because I converted a project to Vite (as I explain in https://stackoverflow.com/questions/76102745/cypress-vue-3-vite-custom-commands-invoked-before-page-re-renders) but it's now also happening in another project that hasn't yet been converted.

I'm using:

• Vue 3.2.47
• Cypress 12.10.0