findAllByRole and findByRole don't chain correctly

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

I had the same issue, and ended up here as well. For what it's worth, while I also think it would be intuitive to be able to chain finds like above, I found that chaining non-testing-library queries was a workaround in this case.

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

// A working alternative
cy.get(".list-unstyled")
	.findAllByRole("listitem")
	.find("link")
	.contains("5: BB")
	.should("exist")

Same problem here but with findByText()

I think they only search on first container element https://github.com/testing-library/cypress-testing-library/blob/main/src/index.js#L58

Sunbelt Computer Software

PL/B Language Development and Support

Navigation Menu

Repository navigation

findAllByRole and findByRole don't chain correctly #249

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Sunbelt Computer Software

PL/B Language Development and Support

findAllByRole and findByRole don't chain correctly #249

Description

Activity

jake-pepple commented on May 12, 2023

11joselu commented on Mar 20, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions