Multiple matching elements error message returns only new line characters

[aitchiss]

• cypress-testing-library version: 7.0.3
• node version: 14.14.0
• npm (or yarn) 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:

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.

[leschdom]

I did some research and looks like this "feature" was introduced
in dom-testing-library@2.4.0 which was released in 2018.
So I'm not sure if the reason, why this was introduced is still valid, see testing-library/dom-testing-library#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".

[Siegrift]

Same error here. Has anyone figured out a workaround for this?

[istateside]

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.

[leschdom]

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:

• testing-library/dom-testing-library@99760f0
• feat(config): Add option to silence accessibility warnings (addresses #785) dom-testing-library#950
• Improved logging dom-testing-library#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)

• prettyDOM error when container is document dom-testing-library#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 :)

[istateside]

@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

[eric-burel]

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: