fix: .contains() should only return one element at all times

[BlueWinds]

• Closes Problem with cy.contains(). It find two elements. It should find one #25225

User facing changelog

Fix for regression introduced in 12.1.0, where .contains() could return multiple elements when it was matching directly on the subject, rather than on the subject's children.

Additional details

Basically, we were either filtering down one element or checking to see if the subject matched the selector - so if there were multiple subjects that matched the contains filter (but none of their child elements matched), we'd return them all.

Fixed by moving the filtering to be the last step.

Steps to test

In addition to the included driver test, you can reproduce the issue like so:

    it('issue ', () => {
      cy.visit('https://example.cypress.io')
      cy.get('a').contains('next').click()
    })

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• [n/a] Has a PR for user-facing changes been opened in cypress-documentation?
• [n/a] Have API changes been updated in the type definitions?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

26398 • 0 • 1179 • 0 • 29

---

Run details

Project	cypress
Status	Passed
Commit	93c03f8
Started	Jan 3, 2023 5:02 PM
Ended	Jan 3, 2023 5:22 PM
Duration	19:58 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	create-from-component.cy.ts		1
1	... > runs generated spec
	commands/net_stubbing.cy.ts		4
1	network stubbing > intercepting request > can delay and throttle a StaticResponse
2	network stubbing > intercepting request > can delay and throttle a StaticResponse
3	network stubbing > intercepting request > can delay and throttle a StaticResponse
4	... > with `times` > only uses each handler N times
This comment includes only the first 5 flaky tests. See all 29 flaky tests in the Cypress Dashboard.

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[emilyrohrbough]

I'd like to see test coverage from returning one element when multiple subjects regardless if the subjects have children or not. I glanced through these tests and not seeing an equivalent. When debugging this I didn't expect the issue to related to the subject's dom tree. Would always expect the first matching element

This might not be the right get selector - but I expect both scenarios to pass.

Suggested change

	cy.get('button').contains('submit').should('have.length', 1)
	cy.get('button').contains('submit').should('have.length', 1)
	cy.get('div').contains('submit').should('have.length', 1)

[BlueWinds]

I'll edit the test name to be a bit more descriptive - "has no children" isn't quite accurate. It's "when the subjects themselves match the selector, and none of their children do."

I think we already have lots of coverage around the case where .contains() simply matches multiple elements. Other tests in this file we have covering similar cases:

it('searches multiple subject elements', () => {
  cy.get('ul').contains('li', 'asdf 3')
})

it('resets the subject between chain invocations', () => {
  ...snip...
  cy.get('#complex-contains').contains('nested contains').then(($label) => {

it('reduces right by priority element', () => {
  ...snip...
  // it should find label because label is the first priority element
  // out of the collection of contains elements
  cy.get('#complex-contains').contains('nested contains')

[emilyrohrbough]

It's "when the subjects themselves match the selector, and none of their children do."

And do we have cases for these scenarios?

• the children match the selector and the subjects don't
• both the children and the subjects match the selector

[emilyrohrbough]

Its seems we've had a few holes when 12 went out with our test coverage, so Im surprised each of fixes has only had one test verifying its behavior. If we have existing tests for the above scenarios, mind linking them?

[BlueWinds]

the children match the selector and the subjects don't

This is super common. For example,

<div>
  <span>Foo</span>
</div>

cy.get('div').contains('span', 'Foo')

The child matches the selector, but the parent does not. Some examples from the file:

it('searches multiple subject elements'
it('finds the furthest descendent when filter matches more than 1 element'
it('retries until it finds a filtered contains has the matching text node'

both the children and the subjects match the selector

Every time a child matches, the parent also does.

<div>
  <div>Foo</div>
</div>

cy.get('div').contains('Foo')

The div contains the text 'Foo', and so does the span. Basically every test in the file covers this case.

[BlueWinds]

We are missing one in the form .get('div').contains('div', 'text'). I'll add that in a moment here.

[lmiller1990]

Definitely a fan of more thorough tests - I can't believe we didn't have a test around this, I write code like this all the time.

I couldn't find any other broken use cases with contains. I tested the fix and it works.