{
  "doc": {
    "id": "api/commands/contains",
    "title": "contains | Cypress Documentation",
    "description": "Get the DOM element containing the text in Cypress.",
    "section": "api",
    "source_path": "/llm/markdown/api/commands/contains.md",
    "version": "e6988a974973e9090ce70406c38cb2b9e0eac9fa",
    "updated_at": "2026-05-15T15:50:22.536Z",
    "headings": [
      {
        "id": "api/commands/contains#contains",
        "text": "contains",
        "level": 1
      },
      {
        "id": "api/commands/contains#syntax",
        "text": "Syntax",
        "level": 2
      },
      {
        "id": "api/commands/contains#usage",
        "text": "Usage",
        "level": 3
      },
      {
        "id": "api/commands/contains#arguments",
        "text": "Arguments",
        "level": 3
      },
      {
        "id": "api/commands/contains#yields-learn-about-subject-management",
        "text": "Yields Learn about subject management",
        "level": 3
      },
      {
        "id": "api/commands/contains#examples",
        "text": "Examples",
        "level": 2
      },
      {
        "id": "api/commands/contains#content",
        "text": "Content",
        "level": 3
      },
      {
        "id": "api/commands/contains#find-the-first-element-containing-some-text",
        "text": "Find the first element containing some text",
        "level": 4
      },
      {
        "id": "api/commands/contains#find-the-input-type-submit-by-value",
        "text": "Find the input[type='submit'] by value",
        "level": 4
      },
      {
        "id": "api/commands/contains#number",
        "text": "Number",
        "level": 3
      },
      {
        "id": "api/commands/contains#find-the-first-element-containing-a-number",
        "text": "Find the first element containing a number",
        "level": 4
      },
      {
        "id": "api/commands/contains#regular-expression",
        "text": "Regular Expression",
        "level": 3
      },
      {
        "id": "api/commands/contains#find-the-first-element-with-text-matching-the-regular-expression",
        "text": "Find the first element with text matching the regular expression",
        "level": 4
      },
      {
        "id": "api/commands/contains#selector",
        "text": "Selector",
        "level": 3
      },
      {
        "id": "api/commands/contains#specify-a-selector-to-return-a-specific-element",
        "text": "Specify a selector to return a specific element",
        "level": 4
      },
      {
        "id": "api/commands/contains#keep-the-form-as-the-subject",
        "text": "Keep the form as the subject",
        "level": 4
      },
      {
        "id": "api/commands/contains#case-sensitivity",
        "text": "Case Sensitivity",
        "level": 3
      },
      {
        "id": "api/commands/contains#notes",
        "text": "Notes",
        "level": 2
      },
      {
        "id": "api/commands/contains#scopes",
        "text": "Scopes",
        "level": 3
      },
      {
        "id": "api/commands/contains#when-starting-a-series-of-commands",
        "text": "When starting a series of commands:",
        "level": 4
      },
      {
        "id": "api/commands/contains#when-chained-to-an-existing-series-of-commands",
        "text": "When chained to an existing series of commands",
        "level": 4
      },
      {
        "id": "api/commands/contains#be-wary-of-chaining-multiple-contains",
        "text": "Be wary of chaining multiple contains",
        "level": 4
      },
      {
        "id": "api/commands/contains#leading-trailing-duplicate-whitespaces-arent-ignored-in-pre-tag",
        "text": "Leading, trailing, duplicate whitespaces aren't ignored in <pre> tag",
        "level": 3
      },
      {
        "id": "api/commands/contains#non-breaking-space",
        "text": "Non-breaking space",
        "level": 3
      },
      {
        "id": "api/commands/contains#single-element",
        "text": "Single Element",
        "level": 3
      },
      {
        "id": "api/commands/contains#only-the-first-matched-element-will-be-returned",
        "text": "Only the first matched element will be returned",
        "level": 4
      },
      {
        "id": "api/commands/contains#default-input-type-submit-labels",
        "text": "Default <input type=\"submit\"> labels",
        "level": 3
      },
      {
        "id": "api/commands/contains#preferences",
        "text": "Preferences",
        "level": 3
      },
      {
        "id": "api/commands/contains#element-preference-order",
        "text": "Element preference order",
        "level": 4
      },
      {
        "id": "api/commands/contains#favor-of-button-over-other-deeper-elements",
        "text": "Favor of <button> over other deeper elements",
        "level": 4
      },
      {
        "id": "api/commands/contains#favor-of-a-over-other-deeper-elements",
        "text": "Favor of <a> over other deeper elements",
        "level": 4
      },
      {
        "id": "api/commands/contains#favor-of-label-over-other-deeper-elements",
        "text": "Favor of <label> over other deeper elements",
        "level": 4
      },
      {
        "id": "api/commands/contains#rules",
        "text": "Rules",
        "level": 2
      },
      {
        "id": "api/commands/contains#requirements-learn-about-chaining-commands",
        "text": "Requirements Learn about chaining commands",
        "level": 3
      },
      {
        "id": "api/commands/contains#assertions-learn-about-assertions",
        "text": "Assertions Learn about assertions",
        "level": 3
      },
      {
        "id": "api/commands/contains#timeouts-learn-about-timeouts",
        "text": "Timeouts Learn about timeouts",
        "level": 3
      },
      {
        "id": "api/commands/contains#command-log",
        "text": "Command Log",
        "level": 2
      },
      {
        "id": "api/commands/contains#history",
        "text": "History",
        "level": 2
      },
      {
        "id": "api/commands/contains#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "api/commands/contains#syntax",
      "doc_id": "api/commands/contains",
      "heading": "Syntax",
      "heading_level": 2,
      "content_markdown": "## Syntax\n\n```\n.contains(content).contains(content, options).contains(selector, content).contains(selector, content, options)// ---or---cy.contains(content)cy.contains(content, options)cy.contains(selector, content)cy.contains(selector, content, options)\n```\n\n### Usage\n\n**Correct Usage**\n\n```\ncy.get('.nav').contains('About') // Yield el in .nav containing 'About'cy.contains('Hello') // Yield first el in document containing 'Hello'\n```\n\n**Incorrect Usage**\n\n```\ncy.title().contains('My App') // Errors, 'title' does not yield DOM elementcy.getCookies().contains('_key') // Errors, 'getCookies' does not yield DOM element\n```\n\n### Arguments\n\n**content _(String, Number, RegExp)_**\n\nGet the DOM element containing the content.\n\n**selector _(String selector)_**\n\nSpecify a selector to filter DOM elements containing the text. Cypress will _ignore_ its [default preference order](#Notes) for the specified selector. Using a selector allows you to return more _shallow_ elements (higher in the tree) that contain the specific text.\n\n**options _(Object)_**\n\nPass in an options object to change the default behavior of `.contains()`.\n\n| Option | Default | Description |\n| --- | --- | --- |\n| `matchCase` | `true` | Check case sensitivity |\n| `log` | `true` | Displays the command in the [Command log](/llm/markdown/app/core-concepts/open-mode.md#Command-Log) |\n| `timeout` | [`defaultCommandTimeout`](/llm/markdown/app/references/configuration.md#Timeouts) | Time to wait for `.contains()` to resolve before [timing out](#Timeouts) |\n| `includeShadowDom` | [`includeShadowDom` config option value](/llm/markdown/app/references/configuration.md#Global) | Whether to traverse shadow DOM boundaries and include elements within the shadow DOM in the yielded results. |\n\n### Yields [Learn about subject management](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Subject-Management)\n\n*   `.contains()` yields the new DOM element it found.\n*   `.contains()` is a query, and it is _safe_ to chain further commands.\n",
      "section": "api",
      "anchors": [
        "syntax"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 312
    },
    {
      "id": "api/commands/contains#usage",
      "doc_id": "api/commands/contains",
      "heading": "Usage",
      "heading_level": 3,
      "content_markdown": "### Usage\n\n**Correct Usage**\n\n```\ncy.get('.nav').contains('About') // Yield el in .nav containing 'About'cy.contains('Hello') // Yield first el in document containing 'Hello'\n```\n\n**Incorrect Usage**\n\n```\ncy.title().contains('My App') // Errors, 'title' does not yield DOM elementcy.getCookies().contains('_key') // Errors, 'getCookies' does not yield DOM element\n```\n",
      "section": "api",
      "anchors": [
        "usage"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 59
    },
    {
      "id": "api/commands/contains#arguments",
      "doc_id": "api/commands/contains",
      "heading": "Arguments",
      "heading_level": 3,
      "content_markdown": "### Arguments\n\n**content _(String, Number, RegExp)_**\n\nGet the DOM element containing the content.\n\n**selector _(String selector)_**\n\nSpecify a selector to filter DOM elements containing the text. Cypress will _ignore_ its [default preference order](#Notes) for the specified selector. Using a selector allows you to return more _shallow_ elements (higher in the tree) that contain the specific text.\n\n**options _(Object)_**\n\nPass in an options object to change the default behavior of `.contains()`.\n\n| Option | Default | Description |\n| --- | --- | --- |\n| `matchCase` | `true` | Check case sensitivity |\n| `log` | `true` | Displays the command in the [Command log](/llm/markdown/app/core-concepts/open-mode.md#Command-Log) |\n| `timeout` | [`defaultCommandTimeout`](/llm/markdown/app/references/configuration.md#Timeouts) | Time to wait for `.contains()` to resolve before [timing out](#Timeouts) |\n| `includeShadowDom` | [`includeShadowDom` config option value](/llm/markdown/app/references/configuration.md#Global) | Whether to traverse shadow DOM boundaries and include elements within the shadow DOM in the yielded results. |\n",
      "section": "api",
      "anchors": [
        "arguments"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 197
    },
    {
      "id": "api/commands/contains#examples",
      "doc_id": "api/commands/contains",
      "heading": "Examples",
      "heading_level": 2,
      "content_markdown": "## Examples\n\n### Content\n\n#### Find the first element containing some text\n\n```\n<ul>  <li>apples</li>  <li>oranges</li>  <li>bananas</li></ul>\n```\n\n```\n// yields <li>apples</li>cy.contains('apples')\n```\n\n#### Find the `input[type='submit']` by value\n\nGet the form element and search in its descendants for the content \"submit the form!\"\n\n```\n<div id=\"main\">  <form>    <div>      <label>name</label>      <input name=\"name\" />    </div>    <div>      <label>age</label>      <input name=\"age\" />    </div>    <input type=\"submit\" value=\"submit the form!\" />  </form></div>\n```\n\n```\n// yields input[type='submit'] element then clicks itcy.get('form').contains('submit the form!').click()\n```\n\n### Number\n\n#### Find the first element containing a number\n\nEven though the `<span>` is the deepest element that contains a \"4\", Cypress automatically yields `<button>` elements over spans because of its [preferred element order](#Preferences).\n\n```\n<button class=\"btn btn-primary\" type=\"button\">  Messages <span class=\"badge\">4</span></button>\n```\n\n```\n// yields <button>cy.contains(4)\n```\n\n### Regular Expression\n\n#### Find the first element with text matching the regular expression\n\n```\n<ul>  <li>apples</li>  <li>oranges</li>  <li>bananas</li></ul>\n```\n\n```\n// yields <li>bananas</li>cy.contains(/^b\\w+/)\n```\n\n### Selector\n\n#### Specify a selector to return a specific element\n\nTechnically the `<html>`, `<body>`, `<ul>`, and first `<li>` in the example below all contain \"apples\".\n\nNormally Cypress would return the first `<li>` since that is the _deepest_ element that contains \"apples\".\n\nTo override the element that is yielded we can pass 'ul' as the selector.\n\n```\n<html>  <body>    <ul>      <li>apples</li>      <li>oranges</li>      <li>bananas</li>    </ul>  </body></html>\n```\n\n```\n// yields <ul>...</ul>cy.contains('ul', 'apples')\n```\n\n#### Keep the form as the subject\n\nHere's an example that uses the selector to ensure that the `<form>` remains the [subject](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Subject-Management) for future chaining.\n\n```\n<form>  <div>    <label>name</label>    <input name=\"name\" />  </div>  <button type=\"submit\">Proceed</button></form>\n```\n\n```\ncy.get('form') // yields <form>...</form>  .contains('form', 'Proceed') // yields <form>...</form>  .submit() // yields <form>...</form>\n```\n\nWithout the explicit selector the subject would change to be the `<button>`. Using the explicit selector ensures that chained commands will have the `<form>` as the subject.\n\n### Case Sensitivity\n\nHere's an example using the `matchCase` option to ignore case sensitivity.\n\n```\n<div>Capital Sentence</div>\n```\n\n```\ncy.get('div').contains('capital sentence') // failcy.get('div').contains('capital sentence', { matchCase: false }) // pass\n```\n",
      "section": "api",
      "anchors": [
        "examples"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 445
    },
    {
      "id": "api/commands/contains#content",
      "doc_id": "api/commands/contains",
      "heading": "Content",
      "heading_level": 3,
      "content_markdown": "### Content\n\n#### Find the first element containing some text\n\n```\n<ul>  <li>apples</li>  <li>oranges</li>  <li>bananas</li></ul>\n```\n\n```\n// yields <li>apples</li>cy.contains('apples')\n```\n\n#### Find the `input[type='submit']` by value\n\nGet the form element and search in its descendants for the content \"submit the form!\"\n\n```\n<div id=\"main\">  <form>    <div>      <label>name</label>      <input name=\"name\" />    </div>    <div>      <label>age</label>      <input name=\"age\" />    </div>    <input type=\"submit\" value=\"submit the form!\" />  </form></div>\n```\n\n```\n// yields input[type='submit'] element then clicks itcy.get('form').contains('submit the form!').click()\n```\n",
      "section": "api",
      "anchors": [
        "content"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 103
    },
    {
      "id": "api/commands/contains#find-the-input-type-submit-by-value",
      "doc_id": "api/commands/contains",
      "heading": "Find the input[type='submit'] by value",
      "heading_level": 4,
      "content_markdown": "#### Find the `input[type='submit']` by value\n\nGet the form element and search in its descendants for the content \"submit the form!\"\n\n```\n<div id=\"main\">  <form>    <div>      <label>name</label>      <input name=\"name\" />    </div>    <div>      <label>age</label>      <input name=\"age\" />    </div>    <input type=\"submit\" value=\"submit the form!\" />  </form></div>\n```\n\n```\n// yields input[type='submit'] element then clicks itcy.get('form').contains('submit the form!').click()\n```\n",
      "section": "api",
      "anchors": [
        "find-the-input-type-submit-by-value"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 75
    },
    {
      "id": "api/commands/contains#number",
      "doc_id": "api/commands/contains",
      "heading": "Number",
      "heading_level": 3,
      "content_markdown": "### Number\n\n#### Find the first element containing a number\n\nEven though the `<span>` is the deepest element that contains a \"4\", Cypress automatically yields `<button>` elements over spans because of its [preferred element order](#Preferences).\n\n```\n<button class=\"btn btn-primary\" type=\"button\">  Messages <span class=\"badge\">4</span></button>\n```\n\n```\n// yields <button>cy.contains(4)\n```\n",
      "section": "api",
      "anchors": [
        "number"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 65
    },
    {
      "id": "api/commands/contains#find-the-first-element-containing-a-number",
      "doc_id": "api/commands/contains",
      "heading": "Find the first element containing a number",
      "heading_level": 4,
      "content_markdown": "#### Find the first element containing a number\n\nEven though the `<span>` is the deepest element that contains a \"4\", Cypress automatically yields `<button>` elements over spans because of its [preferred element order](#Preferences).\n\n```\n<button class=\"btn btn-primary\" type=\"button\">  Messages <span class=\"badge\">4</span></button>\n```\n\n```\n// yields <button>cy.contains(4)\n```\n",
      "section": "api",
      "anchors": [
        "find-the-first-element-containing-a-number"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 63
    },
    {
      "id": "api/commands/contains#selector",
      "doc_id": "api/commands/contains",
      "heading": "Selector",
      "heading_level": 3,
      "content_markdown": "### Selector\n\n#### Specify a selector to return a specific element\n\nTechnically the `<html>`, `<body>`, `<ul>`, and first `<li>` in the example below all contain \"apples\".\n\nNormally Cypress would return the first `<li>` since that is the _deepest_ element that contains \"apples\".\n\nTo override the element that is yielded we can pass 'ul' as the selector.\n\n```\n<html>  <body>    <ul>      <li>apples</li>      <li>oranges</li>      <li>bananas</li>    </ul>  </body></html>\n```\n\n```\n// yields <ul>...</ul>cy.contains('ul', 'apples')\n```\n\n#### Keep the form as the subject\n\nHere's an example that uses the selector to ensure that the `<form>` remains the [subject](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Subject-Management) for future chaining.\n\n```\n<form>  <div>    <label>name</label>    <input name=\"name\" />  </div>  <button type=\"submit\">Proceed</button></form>\n```\n\n```\ncy.get('form') // yields <form>...</form>  .contains('form', 'Proceed') // yields <form>...</form>  .submit() // yields <form>...</form>\n```\n\nWithout the explicit selector the subject would change to be the `<button>`. Using the explicit selector ensures that chained commands will have the `<form>` as the subject.\n",
      "section": "api",
      "anchors": [
        "selector"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 200
    },
    {
      "id": "api/commands/contains#specify-a-selector-to-return-a-specific-element",
      "doc_id": "api/commands/contains",
      "heading": "Specify a selector to return a specific element",
      "heading_level": 4,
      "content_markdown": "#### Specify a selector to return a specific element\n\nTechnically the `<html>`, `<body>`, `<ul>`, and first `<li>` in the example below all contain \"apples\".\n\nNormally Cypress would return the first `<li>` since that is the _deepest_ element that contains \"apples\".\n\nTo override the element that is yielded we can pass 'ul' as the selector.\n\n```\n<html>  <body>    <ul>      <li>apples</li>      <li>oranges</li>      <li>bananas</li>    </ul>  </body></html>\n```\n\n```\n// yields <ul>...</ul>cy.contains('ul', 'apples')\n```\n",
      "section": "api",
      "anchors": [
        "specify-a-selector-to-return-a-specific-element"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 93
    },
    {
      "id": "api/commands/contains#keep-the-form-as-the-subject",
      "doc_id": "api/commands/contains",
      "heading": "Keep the form as the subject",
      "heading_level": 4,
      "content_markdown": "#### Keep the form as the subject\n\nHere's an example that uses the selector to ensure that the `<form>` remains the [subject](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Subject-Management) for future chaining.\n\n```\n<form>  <div>    <label>name</label>    <input name=\"name\" />  </div>  <button type=\"submit\">Proceed</button></form>\n```\n\n```\ncy.get('form') // yields <form>...</form>  .contains('form', 'Proceed') // yields <form>...</form>  .submit() // yields <form>...</form>\n```\n\nWithout the explicit selector the subject would change to be the `<button>`. Using the explicit selector ensures that chained commands will have the `<form>` as the subject.\n",
      "section": "api",
      "anchors": [
        "keep-the-form-as-the-subject"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 104
    },
    {
      "id": "api/commands/contains#case-sensitivity",
      "doc_id": "api/commands/contains",
      "heading": "Case Sensitivity",
      "heading_level": 3,
      "content_markdown": "### Case Sensitivity\n\nHere's an example using the `matchCase` option to ignore case sensitivity.\n\n```\n<div>Capital Sentence</div>\n```\n\n```\ncy.get('div').contains('capital sentence') // failcy.get('div').contains('capital sentence', { matchCase: false }) // pass\n```\n",
      "section": "api",
      "anchors": [
        "case-sensitivity"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 41
    },
    {
      "id": "api/commands/contains#notes",
      "doc_id": "api/commands/contains",
      "heading": "Notes",
      "heading_level": 2,
      "content_markdown": "## Notes\n\n### Scopes\n\n`.contains()` acts differently whether it's starting a series of commands or being chained off an existing series.\n\n#### When starting a series of commands:\n\nThis queries the entire `document` for the content.\n\n```\ncy.contains('Log In')\n```\n\n#### When chained to an existing series of commands\n\nThis will query inside of the `<#checkout-container>` element.\n\n```\ncy.get('#checkout-container').contains('Buy Now')\n```\n\n#### Be wary of chaining multiple contains\n\nLet's imagine a scenario where you click a button to delete a user and a dialog appears asking you to confirm this deletion.\n\n```\n// This doesn't work as intendedcy.contains('Delete User').click().contains('Yes, Delete!').click()\n```\n\nBecause the second `.contains()` is chained off of a command that yielded the `<button>`, Cypress will look inside of the `<button>` for the new content.\n\nIn other words, Cypress will look inside of the `<button>` containing \"Delete User\" for the content: \"Yes, Delete!\", which is not what we intended.\n\nWhat you want to do is call `cy` again, which automatically creates a new chain scoped to the `document`.\n\n```\ncy.contains('Delete User').click()cy.contains('Yes, Delete!').click()\n```\n\n### Leading, trailing, duplicate whitespaces aren't ignored in `<pre>` tag\n\nUnlike other tags, `<pre>` doesn't ignore leading, trailing, or duplicate whitespaces as shown below:\n\n```\n<!--Code for test--><h2>Other tags</h2><p>Hello, World !</p><h2>Pre tag</h2><pre>                 Hello,           World      !</pre>\n```\n\nRendered result:\n\nTo reflect this behavior, Cypress also doesn't ignore them.\n\n```\n// test result for above codecy.get('p').contains('Hello, World !') // passcy.get('p').contains('           Hello,          World   !') // failcy.get('pre').contains('Hello, World !') // failcy.get('pre').contains('                 Hello,           World      !') // pass\n```\n\n### Non-breaking space\n\nYou can use a space character in `cy.contains()` to match text in the HTML that uses a non-breaking space entity `&nbsp;`.\n\n```\n<span>Hello&nbsp;world</span>\n```\n\n```\n// finds the span elementcy.contains('Hello world')\n```\n\n**Tip:** read about assertions against a text with non-breaking space entities in [How do I get an element's text contents?](/llm/markdown/app/faq.md#How-do-I-get-an-elements-text-contents)\n\n### Single Element\n\n#### Only the _first_ matched element will be returned\n\n```\n<ul id=\"header\">  <li>Welcome, Jane Lane</li></ul><div id=\"main\">  <span>These users have 10 connections with Jane Lane</span>  <ul>    <li>Jamal</li>    <li>Patricia</li>  </ul></div>\n```\n\nThe below example will return the `<li>` in the `#header` since that is the _first_ element that contains the text \"Jane Lane\".\n\n```\n// yields #header licy.contains('Jane Lane')\n```\n\nIf you wanted to select the `<span>` instead, you could narrow the elements yielded before the `.contains()`.\n\n```\n// yields <span>cy.get('#main').contains('Jane Lane')\n```\n\n### Default `<input type=\"submit\">` labels\n\nWhen the `value` attribute is omitted from an `<input type=\"submit\">`, the default label is used and can be locale-dependent. [More info at MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#omitting_the_value_attribute)\n\nWhen this happens, the `value` is an empty string, and there is no programmatic way for Cypress to filter elements by the label displayed by the user agent. This can cause unexpected failures when using `cy.contains()` with submit buttons.\n\nThe solution in this case is to:\n\n```\n // assert the empty string cy.get('input').should('have.value', '') // ---or--- // if possible, set the `value` attribute <input type=submit value=\"Submit\" />\n```\n\n### Preferences\n\n#### Element preference order\n\n`.contains()` defaults to preferring elements higher in the tree when they are:\n\n*   `input[type='submit']`\n*   `button`\n*   `a`\n*   `label`\n\nCypress will ignore this element preference order if you pass a selector argument to `.contains()`.\n\n#### Favor of `<button>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Search\", Cypress yields `<button>` elements over spans.\n\n```\n<form>  <button>    <i class=\"fa fa-search\"></i>    <span>Search</span>  </button></form>\n```\n\n```\n// yields <button>cy.contains('Search').children('i').should('have.class', 'fa-search')\n```\n\n#### Favor of `<a>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Sign Out\", Cypress yields anchor elements over spans.\n\n```\n<nav>  <a href=\"/users\">    <span>Users</span>  </a>  <a href=\"/signout\">    <span>Sign Out</span>  </a></nav>\n```\n\n```\n// yields <a>cy.get('nav').contains('Sign Out').should('have.attr', 'href', '/signout')\n```\n\n#### Favor of `<label>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Age\", Cypress yields `<label>` elements over `<span>`.\n\n```\n<form>  <label>    <span>Name:</span>    <input name=\"name\" />  </label>  <label>    <span>Age:</span>    <input name=\"age\" />  </label></form>\n```\n\n```\n// yields labelcy.contains('Age').find('input').type('29')\n```\n",
      "section": "api",
      "anchors": [
        "notes"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 872
    },
    {
      "id": "api/commands/contains#scopes",
      "doc_id": "api/commands/contains",
      "heading": "Scopes",
      "heading_level": 3,
      "content_markdown": "### Scopes\n\n`.contains()` acts differently whether it's starting a series of commands or being chained off an existing series.\n\n#### When starting a series of commands:\n\nThis queries the entire `document` for the content.\n\n```\ncy.contains('Log In')\n```\n\n#### When chained to an existing series of commands\n\nThis will query inside of the `<#checkout-container>` element.\n\n```\ncy.get('#checkout-container').contains('Buy Now')\n```\n\n#### Be wary of chaining multiple contains\n\nLet's imagine a scenario where you click a button to delete a user and a dialog appears asking you to confirm this deletion.\n\n```\n// This doesn't work as intendedcy.contains('Delete User').click().contains('Yes, Delete!').click()\n```\n\nBecause the second `.contains()` is chained off of a command that yielded the `<button>`, Cypress will look inside of the `<button>` for the new content.\n\nIn other words, Cypress will look inside of the `<button>` containing \"Delete User\" for the content: \"Yes, Delete!\", which is not what we intended.\n\nWhat you want to do is call `cy` again, which automatically creates a new chain scoped to the `document`.\n\n```\ncy.contains('Delete User').click()cy.contains('Yes, Delete!').click()\n```\n",
      "section": "api",
      "anchors": [
        "scopes"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 229
    },
    {
      "id": "api/commands/contains#be-wary-of-chaining-multiple-contains",
      "doc_id": "api/commands/contains",
      "heading": "Be wary of chaining multiple contains",
      "heading_level": 4,
      "content_markdown": "#### Be wary of chaining multiple contains\n\nLet's imagine a scenario where you click a button to delete a user and a dialog appears asking you to confirm this deletion.\n\n```\n// This doesn't work as intendedcy.contains('Delete User').click().contains('Yes, Delete!').click()\n```\n\nBecause the second `.contains()` is chained off of a command that yielded the `<button>`, Cypress will look inside of the `<button>` for the new content.\n\nIn other words, Cypress will look inside of the `<button>` containing \"Delete User\" for the content: \"Yes, Delete!\", which is not what we intended.\n\nWhat you want to do is call `cy` again, which automatically creates a new chain scoped to the `document`.\n\n```\ncy.contains('Delete User').click()cy.contains('Yes, Delete!').click()\n```\n",
      "section": "api",
      "anchors": [
        "be-wary-of-chaining-multiple-contains"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 151
    },
    {
      "id": "api/commands/contains#leading-trailing-duplicate-whitespaces-arent-ignored-in-pre-tag",
      "doc_id": "api/commands/contains",
      "heading": "Leading, trailing, duplicate whitespaces aren't ignored in <pre> tag",
      "heading_level": 3,
      "content_markdown": "### Leading, trailing, duplicate whitespaces aren't ignored in `<pre>` tag\n\nUnlike other tags, `<pre>` doesn't ignore leading, trailing, or duplicate whitespaces as shown below:\n\n```\n<!--Code for test--><h2>Other tags</h2><p>Hello, World !</p><h2>Pre tag</h2><pre>                 Hello,           World      !</pre>\n```\n\nRendered result:\n\nTo reflect this behavior, Cypress also doesn't ignore them.\n\n```\n// test result for above codecy.get('p').contains('Hello, World !') // passcy.get('p').contains('           Hello,          World   !') // failcy.get('pre').contains('Hello, World !') // failcy.get('pre').contains('                 Hello,           World      !') // pass\n```\n",
      "section": "api",
      "anchors": [
        "leading-trailing-duplicate-whitespaces-arent-ignored-in-pre-tag"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 97
    },
    {
      "id": "api/commands/contains#non-breaking-space",
      "doc_id": "api/commands/contains",
      "heading": "Non-breaking space",
      "heading_level": 3,
      "content_markdown": "### Non-breaking space\n\nYou can use a space character in `cy.contains()` to match text in the HTML that uses a non-breaking space entity `&nbsp;`.\n\n```\n<span>Hello&nbsp;world</span>\n```\n\n```\n// finds the span elementcy.contains('Hello world')\n```\n\n**Tip:** read about assertions against a text with non-breaking space entities in [How do I get an element's text contents?](/llm/markdown/app/faq.md#How-do-I-get-an-elements-text-contents)\n",
      "section": "api",
      "anchors": [
        "non-breaking-space"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 73
    },
    {
      "id": "api/commands/contains#single-element",
      "doc_id": "api/commands/contains",
      "heading": "Single Element",
      "heading_level": 3,
      "content_markdown": "### Single Element\n\n#### Only the _first_ matched element will be returned\n\n```\n<ul id=\"header\">  <li>Welcome, Jane Lane</li></ul><div id=\"main\">  <span>These users have 10 connections with Jane Lane</span>  <ul>    <li>Jamal</li>    <li>Patricia</li>  </ul></div>\n```\n\nThe below example will return the `<li>` in the `#header` since that is the _first_ element that contains the text \"Jane Lane\".\n\n```\n// yields #header licy.contains('Jane Lane')\n```\n\nIf you wanted to select the `<span>` instead, you could narrow the elements yielded before the `.contains()`.\n\n```\n// yields <span>cy.get('#main').contains('Jane Lane')\n```\n",
      "section": "api",
      "anchors": [
        "single-element"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 112
    },
    {
      "id": "api/commands/contains#only-the-first-matched-element-will-be-returned",
      "doc_id": "api/commands/contains",
      "heading": "Only the first matched element will be returned",
      "heading_level": 4,
      "content_markdown": "#### Only the _first_ matched element will be returned\n\n```\n<ul id=\"header\">  <li>Welcome, Jane Lane</li></ul><div id=\"main\">  <span>These users have 10 connections with Jane Lane</span>  <ul>    <li>Jamal</li>    <li>Patricia</li>  </ul></div>\n```\n\nThe below example will return the `<li>` in the `#header` since that is the _first_ element that contains the text \"Jane Lane\".\n\n```\n// yields #header licy.contains('Jane Lane')\n```\n\nIf you wanted to select the `<span>` instead, you could narrow the elements yielded before the `.contains()`.\n\n```\n// yields <span>cy.get('#main').contains('Jane Lane')\n```\n",
      "section": "api",
      "anchors": [
        "only-the-first-matched-element-will-be-returned"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 108
    },
    {
      "id": "api/commands/contains#default-input-type-submit-labels",
      "doc_id": "api/commands/contains",
      "heading": "Default <input type=\"submit\"> labels",
      "heading_level": 3,
      "content_markdown": "### Default `<input type=\"submit\">` labels\n\nWhen the `value` attribute is omitted from an `<input type=\"submit\">`, the default label is used and can be locale-dependent. [More info at MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#omitting_the_value_attribute)\n\nWhen this happens, the `value` is an empty string, and there is no programmatic way for Cypress to filter elements by the label displayed by the user agent. This can cause unexpected failures when using `cy.contains()` with submit buttons.\n\nThe solution in this case is to:\n\n```\n // assert the empty string cy.get('input').should('have.value', '') // ---or--- // if possible, set the `value` attribute <input type=submit value=\"Submit\" />\n```\n",
      "section": "api",
      "anchors": [
        "default-input-type-submit-labels"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 128
    },
    {
      "id": "api/commands/contains#preferences",
      "doc_id": "api/commands/contains",
      "heading": "Preferences",
      "heading_level": 3,
      "content_markdown": "### Preferences\n\n#### Element preference order\n\n`.contains()` defaults to preferring elements higher in the tree when they are:\n\n*   `input[type='submit']`\n*   `button`\n*   `a`\n*   `label`\n\nCypress will ignore this element preference order if you pass a selector argument to `.contains()`.\n\n#### Favor of `<button>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Search\", Cypress yields `<button>` elements over spans.\n\n```\n<form>  <button>    <i class=\"fa fa-search\"></i>    <span>Search</span>  </button></form>\n```\n\n```\n// yields <button>cy.contains('Search').children('i').should('have.class', 'fa-search')\n```\n\n#### Favor of `<a>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Sign Out\", Cypress yields anchor elements over spans.\n\n```\n<nav>  <a href=\"/users\">    <span>Users</span>  </a>  <a href=\"/signout\">    <span>Sign Out</span>  </a></nav>\n```\n\n```\n// yields <a>cy.get('nav').contains('Sign Out').should('have.attr', 'href', '/signout')\n```\n\n#### Favor of `<label>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Age\", Cypress yields `<label>` elements over `<span>`.\n\n```\n<form>  <label>    <span>Name:</span>    <input name=\"name\" />  </label>  <label>    <span>Age:</span>    <input name=\"age\" />  </label></form>\n```\n\n```\n// yields labelcy.contains('Age').find('input').type('29')\n```\n",
      "section": "api",
      "anchors": [
        "preferences"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 229
    },
    {
      "id": "api/commands/contains#element-preference-order",
      "doc_id": "api/commands/contains",
      "heading": "Element preference order",
      "heading_level": 4,
      "content_markdown": "#### Element preference order\n\n`.contains()` defaults to preferring elements higher in the tree when they are:\n\n*   `input[type='submit']`\n*   `button`\n*   `a`\n*   `label`\n\nCypress will ignore this element preference order if you pass a selector argument to `.contains()`.\n",
      "section": "api",
      "anchors": [
        "element-preference-order"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 52
    },
    {
      "id": "api/commands/contains#favor-of-button-over-other-deeper-elements",
      "doc_id": "api/commands/contains",
      "heading": "Favor of <button> over other deeper elements",
      "heading_level": 4,
      "content_markdown": "#### Favor of `<button>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Search\", Cypress yields `<button>` elements over spans.\n\n```\n<form>  <button>    <i class=\"fa fa-search\"></i>    <span>Search</span>  </button></form>\n```\n\n```\n// yields <button>cy.contains('Search').children('i').should('have.class', 'fa-search')\n```\n",
      "section": "api",
      "anchors": [
        "favor-of-button-over-other-deeper-elements"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 53
    },
    {
      "id": "api/commands/contains#favor-of-a-over-other-deeper-elements",
      "doc_id": "api/commands/contains",
      "heading": "Favor of <a> over other deeper elements",
      "heading_level": 4,
      "content_markdown": "#### Favor of `<a>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Sign Out\", Cypress yields anchor elements over spans.\n\n```\n<nav>  <a href=\"/users\">    <span>Users</span>  </a>  <a href=\"/signout\">    <span>Sign Out</span>  </a></nav>\n```\n\n```\n// yields <a>cy.get('nav').contains('Sign Out').should('have.attr', 'href', '/signout')\n```\n",
      "section": "api",
      "anchors": [
        "favor-of-a-over-other-deeper-elements"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 61
    },
    {
      "id": "api/commands/contains#favor-of-label-over-other-deeper-elements",
      "doc_id": "api/commands/contains",
      "heading": "Favor of <label> over other deeper elements",
      "heading_level": 4,
      "content_markdown": "#### Favor of `<label>` over other deeper elements\n\nEven though the `<span>` is the deepest element that contains \"Age\", Cypress yields `<label>` elements over `<span>`.\n\n```\n<form>  <label>    <span>Name:</span>    <input name=\"name\" />  </label>  <label>    <span>Age:</span>    <input name=\"age\" />  </label></form>\n```\n\n```\n// yields labelcy.contains('Age').find('input').type('29')\n```\n",
      "section": "api",
      "anchors": [
        "favor-of-label-over-other-deeper-elements"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 60
    },
    {
      "id": "api/commands/contains#rules",
      "doc_id": "api/commands/contains",
      "heading": "Rules",
      "heading_level": 2,
      "content_markdown": "## Rules\n\n### Requirements [Learn about chaining commands](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Chains-of-Commands)\n\n*   `.contains()` can be chained off of `cy` or off a command that yields DOM element(s).\n\n### Assertions [Learn about assertions](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Assertions)\n\n*   `.contains()` will automatically [retry](/llm/markdown/app/core-concepts/retry-ability.md) until the element(s) [exist in the DOM](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Implicit-Assertions).\n*   `.contains()`will automatically [retry](/llm/markdown/app/core-concepts/retry-ability.md) until all chained assertions have passed.\n\n### Timeouts [Learn about timeouts](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Timeouts)\n\n*   `.contains()` can time out waiting for the element(s) to [exist in the DOM](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Implicit-Assertions).\n*   `.contains()` can time out waiting for assertions you've added to pass.\n",
      "section": "api",
      "anchors": [
        "rules"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 109
    },
    {
      "id": "api/commands/contains#timeouts-learn-about-timeouts",
      "doc_id": "api/commands/contains",
      "heading": "Timeouts Learn about timeouts",
      "heading_level": 3,
      "content_markdown": "### Timeouts [Learn about timeouts](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Timeouts)\n\n*   `.contains()` can time out waiting for the element(s) to [exist in the DOM](/llm/markdown/app/core-concepts/introduction-to-cypress.md#Implicit-Assertions).\n*   `.contains()` can time out waiting for assertions you've added to pass.\n",
      "section": "api",
      "anchors": [
        "timeouts-learn-about-timeouts"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 41
    },
    {
      "id": "api/commands/contains#command-log",
      "doc_id": "api/commands/contains",
      "heading": "Command Log",
      "heading_level": 2,
      "content_markdown": "## Command Log\n\n**_Element contains text \"New User\"_**\n\n```\ncy.get('h1').contains('New User')\n```\n\nThe commands above will display in the Command Log as:\n\nWhen clicking on the `contains` command within the command log, the console outputs the following:\n",
      "section": "api",
      "anchors": [
        "command-log"
      ],
      "path": "/llm/json/chunked/api/commands/contains.json",
      "token_estimate": 49
    }
  ]
}