cy.wrap() change command behaviour

[ValeronAI]

In case custom commands with previously yielded subject (prevSubject: true) should be used cy.wrap() function.

But two similars commands at the first glance in some case will give different results. For example:

cy.get("[data-cypress-id=test-element-wrapper]")
  .find("[data-cypress-id=test-element]")
  .should("have.length", 2);

and

cy.get("[data-cypress-id=test-element-wrapper]")
  .findByCypressId("test-element")
  .should("have.length", 2);

Where findByCypressId is defined:

Cypress.Commands.add(
    "findByCypressId",
    { prevSubject: true },
    (subject, selector, ...args) => {
        return cy.wrap(subject).find(`[data-cypress-id=${selector}]`, ...args);
    }
);

I expect that results of this commands will be similar. But in case DOM changing while test running, results will be different.

I have create simple example in which results of two above commands isn't similar. I test page on which change elements count after 1.5s after page initialising. Builtin find command has expected behaviour, it retries command for a few seconds and test successfully finished. But in case custom findByCypressId don't retry elements find so test failing. Below I'm leaving Vue single file component example and cypress test, also link to simple project example.

<script setup>
  import { ref } from "vue";

  const showFirstElement = ref(true);

  setTimeout(() => (showFirstElement.value = false), 1500);
</script>

<template>
  <ul>
    <li v-if="showFirstElement" data-cypress-id="test-element-wrapper">
      <span data-cypress-id="test-element">test item</span>
    </li>
    <li data-cypress-id="test-element-wrapper">
      <span data-cypress-id="test-element">test item</span>
    </li>
    <li data-cypress-id="test-element-wrapper">
      <span data-cypress-id="test-element">test item</span>
    </li>
  </ul>
</template>

Page tests:

describe("Wrap testing", () => {
    it("Use builtin find command", () => {
        cy.visit("/");

        cy.get("[data-cypress-id=test-element-wrapper]")
			.find("[data-cypress-id=test-element]")
			.should("have.length", 2);
    });
    it("Use custom command findByCypressId", () => {
        cy.visit("/");

        cy.get("[data-cypress-id=test-element-wrapper]")
			.findByCypressId("test-element")
			.should("have.length", 2);
    });
});

For testing please clone and run tests in public project: https://github.com/ValeronAI/cypress-test.