findAllByRole and findByRole don't chain correctly

wbolduc commented 1 year ago

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

jake-pepple commented 1 year ago

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")

11joselu commented 5 months ago

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

testing-library / cypress-testing-library

findAllByRole and findByRole don't chain correctly #249