cypress-testing-library
cypress-testing-library copied to clipboard
Multiple matching elements error message returns only new line characters
-
cypress-testing-library
version: 7.0.3 -
node
version: 14.14.0 -
npm
(oryarn
) version: yarn 1.22.5
Relevant code or config
// In the test file
findByLabelText('Label 1');
// In the HTML
<label for="by-text-input">Label 1</label>
<input type="text" placeholder="Input 1" id="by-text-input" />
<label for="by-text-input-1">Label 1</label>
<input type="text" placeholder="Input 1" id="by-text-input-1" />
What you did:
Run a Cypress test using the query cy.findByLabelText('Label 1')
where more than one matching element existed on the page
What happened:
The expected TestingLibraryElementError
is displayed, but the text below "Here are the matching elements:" contains only new line characters. See a screenshot of an example below:
![screenshot showing the error and a large blank space underneath](https://user-images.githubusercontent.com/20773163/108216976-f4873980-712a-11eb-9dce-7494d549260f.png)
NB: this screenshot is taken after I:
- downloaded the
cypress-testing-library
repo - Added an extra input with "Label 1" to the test app
- Ran the
find* dom-testing-library commands
spec
Suggested solution:
If it is possible to include the list of matching elements in the error message it will make failures much easier to debug, especially in CI.
I did some research and looks like this "feature" was introduced in [email protected] which was released in 2018. So I'm not sure if the reason, why this was introduced is still valid, see https://github.com/testing-library/dom-testing-library/issues/44 Back then it was Cypress 2.1.0 or 3.0.0 and now we have Cypress 7.5.0, so maybe this is no longer an issue?
Maybe someone more fimilar with the code base of dom-testing-library could
have another look.
When I "hacked" around I could get the elements shown in the console, but I have
no idea if this is a proper solution ;)
At least the error message is not that helpful - right now this behaviour "works as intended".
Same error here. Has anyone figured out a workaround for this?
This is happening because the DOM testing library explicitly sets the maxLength of stringified DOM elements to 0
if it's being called from within Cypress
https://github.com/testing-library/dom-testing-library/blob/main/src/pretty-dom.js#L21-L24
I'm not sure what the reasoning is behind doing that. We could fix it in the DOM testing library by passing maxLength
as an option to prettyDOM when calling getElementError
, or by removing that check from the DOM testing library altogether.
I'll check the DOM testing library to see if this has already been reported there, and put up a PR to fix it.
Thanks for checking the issue @istateside !
I also did a little research some weeks ago and came across this. Here are some links I noted:
- https://github.com/testing-library/dom-testing-library/commit/99760f08a9f0b5f78da3885f06a427c144440780
- https://github.com/testing-library/dom-testing-library/pull/950
- https://github.com/testing-library/dom-testing-library/pull/45
When passing in Cypress window.document to prettyDOM, it crashes because document.outerHTML.length results in Cannot read property length of undefined error. (prettyDOM error when container is document #44)
- https://github.com/testing-library/dom-testing-library/issues/44
So it seems older versions of Cypress (like v3.0.x) crashed with the implementation of prettyDOM (which was later changed for different reasons). But the newer versions don't seem to have that problem, which makes me think if either the dom-testing-library should not contain any special logic just for Cypress at all or if this logic has to be "scoped" for the old versions only (to be backwards compatible).
Hope it is somewhat useful when opening a PR :)
@leschdom that was helpful, thank you!
PR's linked above
I think the issue is not related to which Cypress version is used, but rather that, at the time the decision was made to stop logging in Cypress, there was no default enforced maximum length on the string output. So we should be safe to bring back the behavior, since people will need to opt into a version update in dom-testing-library or cypress-testing-library to get the new logs
Edit: works ok with @testing-library/cypress v7, maybe this ticket can be closed
Old issue, but it seems solved after updating from v6 to v7 of the cypres library:
Hi, I seem to still have this issue with 8.7.0:
Same with Cypress 9.7.0: