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

Queries match elements inside the <head /> part of the document #134

Open
gnapse opened this issue Mar 27, 2020 · 6 comments
Open

Queries match elements inside the <head /> part of the document #134

gnapse opened this issue Mar 27, 2020 · 6 comments

Comments

@gnapse
Copy link
Member

gnapse commented Mar 27, 2020 •
edited

  • cypress-testing-library version: 5.3.0

Relevant code or config

<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
cy.findByText('Hello world')

What you did

Find an element by its text content.

What happened

Since the document title element in the head area also matches, the query tells me that it found more than one element with the expected text content.

Problem description

The queries are using the entire document as the container.

Suggested solution

Maybe the queries should use the body as the container. Elements in the head area cannot be interacted with and are generally not visible to the user. Except maybe for the title, but there should be more declarative ways to check for it than findByText.
@pranjaljately
Copy link

Hi @gnapse

As far as I know, to only find the h1 in the body, you could do something like:
cy.findByText(/hello world/i, { selector: 'h1' }).should('exist');
(The second param, 'options', is what's important here)

However, this kinda becomes testing implementation details because if you were to change the <h1> tag to a <h2> tag, your test would fail (which we would not want).

Maybe @kentcdodds has a better suggestion 😅...

Thanks,
Pranjal

@kentcdodds
Copy link
Member

Thanks @pranjaljately!

This would be best:

cy.findByRole('heading', {name: /hello world/i }).should('exist')

That would work regardless of the level of heading. It's also more semantically correct 🤘

@kentcdodds
Copy link
Member

As for the assertion that queries should be scoped to the body, I'm curious how Cypress does this... I'm pretty sure they scope to the whole document.

@pranjaljately
Copy link

Awesome! Just learnt something new 😁

Thanks, @kentcdodds

@gnapse
Copy link
Member Author

gnapse commented May 29, 2020

Indeed, the findByRole is the best approach, and a natural workaround. I started using it almost exclusively recently, after I filed this issue.

However, I'd still argue the issue remains, as the other queries are still valid queries, and a findByText(...) when a role query is not possible will still possibly yield the page title as a false positive.

@kentcdodds
Copy link
Member

Well... Maybe we should do this then: testing-library/dom-testing-library#593

@kentcdodds kentcdodds reopened this May 29, 2020
@kentcdodds kentcdodds mentioned this issue May 29, 2020
Open
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
@gnapse @kentcdodds @pranjaljately