Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

findAllByRole and findByRole don't chain correctly #249

Open
wbolduc opened this issue Jan 5, 2023 · 2 comments
Open

findAllByRole and findByRole don't chain correctly #249

wbolduc opened this issue Jan 5, 2023 · 2 comments

Comments

@wbolduc
Copy link

wbolduc commented Jan 5, 2023 •
edited
Loading

  • 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
image

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

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

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
Copy link

jake-pepple commented May 12, 2023 •
edited
Loading

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
Copy link

11joselu commented Mar 20, 2024 •
edited
Loading

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@11joselu @wbolduc @jake-pepple