cy.wrap() unexpectedly change command behaviour

[ValeronAI]

Current behavior

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

Desired behavior

Custom command findByCypressId("test-element") should have same behaviour as find("[data-cypress-id=test-element]").

Test code to reproduce

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

Cypress Version

13.4.0

Node version

16.14.0

Operating System

macOS Ventura 13.6

Debug Logs

No response

Other

No response

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.