Skip to main content

Contains in Cypress

In Cypress, contains is used to get the DOM element containing the text. If DOM contain more than one element with desired text it will match the first one.

There are basically 4 variations of contains exists:

cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

We will discuss 2 here which are without options and remaining 2 in next article. Here content could be of 3 types, we will discuss first 2 right now, regular expression is completely different topic which we will discuss later.

  1. String
  2. Number
  3. Regular Expression

Example #1Using contains with string content

cy.contains("Forms").click();

Example #2: Using contains with number content

cy.contains(2019);

Example #3: Using contains with get()

cy.get("span.menu-title").contains("Form Layouts").click();

Example # 4: Use contains with selector and content

cy.contains("span.menu-title","Form Layouts").click();

Example #5: You don't need to specify the complete word or combination. For example, for text "Extra Components" you can only specify "Extra" in contains or just "Ext"

cy.contains("Extra Components");
cy.contains("Extra");
cy.contains("Ext");

Example #6: Use contain for  

If your element contain html entities non breaking space   you just need to use space

// HTML Code
<span>Hello&nbsp;world</span>

// Cypress code
cy.contains('Hello world')

Example #7: Use contain with <pre> tag

Unlike other tags, <pre> doesn't ignore leading, trailing, or duplicate whitespaces as shown below, so in cypress contains you need to specify in a same way:

// Pre code
<pre>                 Hello,           World      !</pre>

# Cypress Code
cy.get('pre').contains('                 Hello,           World      !') 

Example #8: Same text multiple elements

<html>
  <body>
    <ul>
      <li>Java</li>
      <li>Python</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

Technically the <html><body><ul>, and last <li> in the example below all contain "JavaScript".

Tags
Submitted by tgoswami on May 28, 2021

Tarun has 11+ years of experience in Quality Assurance in different domains like Banking, E-commerce, Health and Education.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.