.contains() only yields first match

[fineline]

• Operating System: Mac 10.12.6
• Cypress Version: 1.1.2
• Browser Version: Chrome 62.0.3202.94

Is this a Feature or Bug?

BUG

How to reproduce:

In a page with multiple spans containing the text "Test", issue the following:

cy.contains("Test").then((results) => {
  debugger
})

When the dev tools stops at the debugger line, inspect results.

Current behavior:

It contains a single element.

Desired behavior:

Documentation here:
https://docs.cypress.io/api/commands/contains.html#Content

states:
.contains() yields the new DOM element(s) it found.

It seems it only yields a single element, but should yield them all.

[jennifer-shehane]

This is in fact an error with the documentation. .contains() always yields the first element containing the text (also with regard taken to find relevant elements over deepest). The yields statement should be updated to:

.contains() yields the new DOM element it found.

If you have a particular use case for having a command in Cypress that yields multiple elements with the containing text, please specify an example and your need so that we can consider adding it as a new feature.

[brian-mann]

All of the rest of the contains documentation states everywhere that it yields the first element. I guess you pointed out the one place where it conflicts with that. It's because those sections are reusable templates.

[brian-mann]

Closing in favor of cypress-io/cypress-documentation#306

[fineline]

Thanks for correcting the doc. Didn't see this mentioned elsewhere - when trying to figure out what the promise yields, the Yields section is where I looked.

My use case is to click through items on a list deleting any previous test entries, which are identifiable by a match on a text pattern. I have now implemented this by getting all items with a cy.get() and then iterating through them with .each() and testing their text with

if ($li.text().match(/MyPattern/)) doStuff()

Not quite as concise as a .contains() but does the trick.

[brian-mann]

You could probably just do... cy.get('div:contains(bar)')

[0xIslamTaha]

I can still see that the docs say yield firs element

[obedparla]

That's correct @0xIslamTaha, it only yields the first element.

[sijakret]

You could probably just do... cy.get('div:contains(bar)')

not for me!

<div>a</div>
<div>a</div>

cy.get('div') // -> both
cy.get('div:contains(a)') // -> only first

wont fix => there is no supported path to do this, right?

[theoturner]

cy.get('div:contains(mystr)') does only yield the first result, however you can get around this if you're matching on two different element types, e.g. if one instance is a div containing mystr and one is a p containing mystr, you can use:

cy.get('div:contains(mystr)') // First result in a div
cy.get('p:contains(mystr)') // First result in a p

Alternatively you can match on two different classes:

cy.get('.class1').contains('mystr') // First result in class1
cy.get('.class2').contains('mystr') // First result in class2

Multiple results with access via .eq(i) as with the rest of Cypress should be default behaviour, but it is not the case yet.

[OlsonDev]

I can't speak to cy.get('div:contains(mystr)') only yielding the first result nowadays, but I suspect that's not true considering this worked for me:

cy.get('[data-test="agreement-status-text"]:contains("Active")').should('have.length', 4)