Cypress test: is .contains() equivalent to should('contain')?

Question

Is this: cy.get(\'[name=planSelect]\').contains(dummyPlan)

equivalent to this: cy.get(\'[name=planSelect]\').should(\'contain\', dummyPlan)

Answer 1

Answer

• .contains(selector, content) is the best selector; it retries element selection AND allows text matching (not just <tag> .class #id [attributes])

• .should() is just an assertion and only the assertion is retried (not the element selection)

.should('exist') is implied unless you specify your own -- this is how they allowed .should('not.exist')

---

Tangent

Browsers support XPath 1.0 which is a pretty cool but obscure way to make complex queries based on DOM tree traversal. There's a contains predicate function:

//*[         contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.') ]
   [not(.//*[contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.') ])]

This searches from root of the document for any node that contains the text and doesn't contain a descendant node which contains the text. You can test it in the console:

$x("//*[contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.')][not(.//*[contains(normalize-space(.), 'The quick brown fox jumped over the lazy dog.') ])]")

Answer 2

The result on your cypress test will be the same if the element with name=planSelect does not contain dummyPlan, that is, the test will fail at this point.

The difference between them is that in the first form, using contains(), you're actually trying to select an element, and the result of cy.get(...).contains() will yield this expected DOM element, allowing for further chaining of methods, like:

cy.get('[name=planSelect]').contains(dummyPlan).click();

In the second form you are making an explicit assertion to verify that dummyPlan exists within the other element, using the Chai chainer contain.

It is a subtle difference and the result is the same, but I would recommend you to use cy.get('[name=planSelect]').contains(dummyPlan) only in case you would like to chain some other method after contains, and use the second form if you want to explicitly assert that this element exists. Logically speaking, the first would represent a generic test failure (cypress tried to find an element that wasn't there) and the second represents an explicit assertion failure (element should contain dummyPlan but it does not).

As for your second question, name is a valid HTML attribute and using it for your tests can lead to confusion if the attribute is being used in its original function (to name input fields) or if the attribute is there just for testing purposes. I would recommend you to use cy-name as the documentation suggests because this way you avoid this ambiguity and make it clear that this attribute cy-name is only there for testing purposes.

Furhtermore, on some situations you might decide to strip all cy-name from your code before sending it to production (during the build process, using some webpack plugin, like string-replace-loader). You would not be able to do the same if using just name because you would also remove the required input name, if there was some inputs in your code.