diff --git a/docs/source/api/commands/contains.md b/docs/source/api/commands/contains.md index ea129805b6..94474b0c0a 100644 --- a/docs/source/api/commands/contains.md +++ b/docs/source/api/commands/contains.md @@ -4,51 +4,52 @@ comments: true description: '' --- -Get the DOM element containing the text. DOM elements can contain *more* than the desired text and still match. Additionally, Cypress will prefer some DOM elements over the deepest element found. +Get the DOM element containing the text. DOM elements can contain *more* than the desired text and still match. Additionally, Cypress will [prefer some DOM elements](#notes) over the deepest element found. -**Preference order:** +# Syntax -- `input[type='submit']` -- `button` -- `a` -- `label` +```javascript +cy.contains(content) +cy.contains(selector, content) +cy.contains(selector, content, options) +``` -| | | -|--- | --- | -| **Returns** | the deepest DOM element containing the text | -| **Timeout** | `cy.contains` will retry for the duration of the [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#timeouts) | +## Parameters -# [cy.contains( *text* )](#text-usage) +**content** -Get the deepest DOM element containing the text. +Get the deepest DOM element containing the content. Content can be a: -# [cy.contains( *number* )](#number-usage) +- *string* +- *number* +- *regular expression* -Get the deepest DOM element containing the number. +**selector** -# [cy.contains( *regexp* )](#regular-expression-usage) +Specify a selector to filter DOM elements containing the text. Cypress will *ignore* it's [default preference order](#notes) for the specified selector. Using a selector allows you to return more *shallow* elements in the tree which contain the specific text. -Get the deepest DOM element containing the text matching the regular expression. - -# [cy.contains( *selector*, *text* )](#selector-and-text-usage) - -Specify a selector to filter DOM elements containing the text. Cypress will **ignore** it's default preference for the specified selector. Using a selector allows you to return more *shallow* elements in the tree which contain the specific text. - -# Options +**options** Pass in an options object to change the default behavior of `cy.contains`. -**cy.contains( *text*, *options* )** -**cy.contains( *selector*, *text*, *options* )** - Option | Default | Notes --- | --- | --- `log` | `true` | whether to display command in command log -`timeout` | [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#timeouts) | Total time to retry finding an element +`timeout` | [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#timeouts) | Total time to retry finding an element containing the content -# Text Usage +## Yields -## Find the first element containing some text +`cy.contains()` yields the *first*, *deepest* DOM element containing the text. + +## Timeout + +`cy.contains()` will try to find the content within the DOM for the duration of the [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#timeouts) + +# Examples + +## String Content + +**Find the first element containing some text** ```html