findAllByRole and findByRole don't chain correctly

[wbolduc]

• cypress-testing-library version: 9.0.0
• cypress version: 12.3.0
• node version: 16.13.2
• npm version: 8.19.2

Relevant code or config

cy.get(".list-unstyled") //ignore this gross selector. I was using a custom function previously and wanted to be sure it wasn't that
	.findAllByRole("listitem")
	.findByRole("link", { name: "1: AA" })
	.should("exist");

cy.get(".list-unstyled")
	.findAllByRole("listitem")
	.findByRole("link", { name: "5: BB" })
	.should("exist");

What you did: I have a list of 2 links that I want to check are:

• In a list
• Have the correct text

First I would like to find the list items (to check the count) and then verify that there's a list item that has that link text

What happened: The above test code works for the first link but fails for the second link. It appears that only one of the found listItems is being passed to the following selector

//rendered html - Note: These links render async but cypress retryability should work to avoid this

//actual html - oops {...rest} properties but that shouldn't matter

//failing test assertion //same failing test (2 screenshots because there's a bunch of api between these two)

Error:     AssertionError: Timed out retrying after 4000ms: Unable to find an accessible element with the role "link" and name "5: BB"

Here are the accessible roles:

  link:

  Name "1: AA":
  <a
    class="system-link pc-link"
    href="/projects/1/systems/1"
    owner="[object Object]"
    path="[object Object]"
  />

  --------------------------------------------------

Ignored nodes: comments, script, style
<li>
  <a
    class="system-link pc-link"
    href="/projects/1/systems/1"
    owner="[object Object]"
    path="[object Object]"
  >
    1: AA
  </a>
</li>
    at  (webpack://projectcompanion/./cypress/e2e/interfaces/happy_spec.ts:111:4)
    at ../driver/src/cypress/cy.ts/setRunnable/runnable.fn (http://localhost:8889/__cypress/runner/cypress_runner.js:151279:43)
    at callFn (http://localhost:8889/__cypress/runner/cypress_runner.js:104907:21)
    at ../driver/src/cypress/runner.ts/create/onRunnableRun (http://localhost:8889/__cypress/runner/cypress_runner.js:158223:30)
    at finallyHandler (http://localhost:8889/__cypress/runner/cypress_runner.js:5468:23)
    at tryCatcher (http://localhost:8889/__cypress/runner/cypress_runner.js:8914:23)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromiseFromHandler (http://localhost:8889/__cypress/runner/cypress_runner.js:6849:31)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromise (http://localhost:8889/__cypress/runner/cypress_runner.js:6906:18)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromise0 (http://localhost:8889/__cypress/runner/cypress_runner.js:6951:10)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromises (http://localhost:8889/__cypress/runner/cypress_runner.js:7031:18)
    at _drainQueueStep (http://localhost:8889/__cypress/runner/cypress_runner.js:3621:12)
    at _drainQueue (http://localhost:8889/__cypress/runner/cypress_runner.js:3614:24)
    at ../../node_modules/bluebird/js/release/async.js/</Async.prototype._drainQueues (http://localhost:8889/__cypress/runner/cypress_runner.js:3630:16)
    at ../../node_modules/bluebird/js/release/async.js/</Async/this.drainQueues (http://localhost:8889/__cypress/runner/cypress_runner.js:3500:14)
    at promise callback*schedule (http://localhost:8889/__cypress/runner/cypress_runner.js:8099:23)
    at ../../node_modules/bluebird/js/release/async.js/</Async.prototype._queueTick (http://localhost:8889/__cypress/runner/cypress_runner.js:3639:14)
    at AsyncSettlePromises (http://localhost:8889/__cypress/runner/cypress_runner.js:3571:10)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._fulfill (http://localhost:8889/__cypress/runner/cypress_runner.js:6977:19)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._resolveCallback (http://localhost:8889/__cypress/runner/cypress_runner.js:6769:57)
    at resolve (http://localhost:8889/__cypress/runner/cypress_runner.js:8542:17)
    at promise callback*tryCatcher (http://localhost:8889/__cypress/runner/cypress_runner.js:8914:23)
    at doThenable (http://localhost:8889/__cypress/runner/cypress_runner.js:8532:38)
    at tryConvertToPromise (http://localhost:8889/__cypress/runner/cypress_runner.js:8497:20)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._resolveCallback (http://localhost:8889/__cypress/runner/cypress_runner.js:6768:43)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromiseFromHandler (http://localhost:8889/__cypress/runner/cypress_runner.js:6861:17)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromise (http://localhost:8889/__cypress/runner/cypress_runner.js:6906:18)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromise0 (http://localhost:8889/__cypress/runner/cypress_runner.js:6951:10)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._settlePromises (http://localhost:8889/__cypress/runner/cypress_runner.js:7031:18)
    at _drainQueueStep (http://localhost:8889/__cypress/runner/cypress_runner.js:3621:12)
    at _drainQueue (http://localhost:8889/__cypress/runner/cypress_runner.js:3614:24)
    at ../../node_modules/bluebird/js/release/async.js/</Async.prototype._drainQueues (http://localhost:8889/__cypress/runner/cypress_runner.js:3630:16)
    at ../../node_modules/bluebird/js/release/async.js/</Async/this.drainQueues (http://localhost:8889/__cypress/runner/cypress_runner.js:3500:14)
    at promise callback*schedule (http://localhost:8889/__cypress/runner/cypress_runner.js:8099:23)
    at ../../node_modules/bluebird/js/release/async.js/</Async.prototype._queueTick (http://localhost:8889/__cypress/runner/cypress_runner.js:3639:14)
    at AsyncSettlePromises (http://localhost:8889/__cypress/runner/cypress_runner.js:3571:10)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._fulfill (http://localhost:8889/__cypress/runner/cypress_runner.js:6977:19)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._resolveCallback (http://localhost:8889/__cypress/runner/cypress_runner.js:6769:57)
    at ../../node_modules/bluebird/js/release/promise.js/</module.exports/Promise.prototype._resolveFromExecutor/r< (http://localhost:8889/__cypress/runner/cypress_runner.js:6821:17)
    at fn (http://localhost:8889/__cypress/runner/cypress_runner.js:147681:16)
    at onack (assets/index-d7b02282.js:34058:11)
    at onpacket (assets/index-d7b02282.js:34002:14)
    at Emitter2.prototype.emit (assets/index-d7b02282.js:32196:23)
    at emitReserved (assets/index-d7b02282.js:33851:11)
    at ondecoded (assets/index-d7b02282.js:34328:10)
    at Emitter2.prototype.emit (assets/index-d7b02282.js:32196:23)
    at add (assets/index-d7b02282.js:33700:17)
    at ondata (assets/index-d7b02282.js:34325:18)
    at Emitter2.prototype.emit (assets/index-d7b02282.js:32196:23)
    at onPacket (assets/index-d7b02282.js:33225:16)
    at setTransport (assets/index-d7b02282.js:33094:13)
    at Emitter2.prototype.emit (assets/index-d7b02282.js:32196:23)
    at onPacket (assets/index-d7b02282.js:32258:10)
    at onData (assets/index-d7b02282.js:32255:10)
    at addEventListeners/this.ws.onmessage (assets/index-d7b02282.js:32847:38)

Reproduction repository:

Problem description: 'findAll*' and 'find*' selectors either don't chain correctly or should have prevSubject set to false on the custom command

Suggested solution: I think you should be able to chain finds like this to narrow a selection on a page with a lot of content on it