{"__v":0,"_id":"56b27fe42db51f0d0044e566","category":{"__v":16,"_id":"56954a95fe18811700c9bfdf","pages":["56954a97fe18811700c9c01d","56954a97fe18811700c9c01e","56954a97fe18811700c9c01f","56954a97fe18811700c9c020","56954a97fe18811700c9c021","56954a97fe18811700c9c022","56954a97fe18811700c9c023","56954a97fe18811700c9c024","56954a97fe18811700c9c025","56954a97fe18811700c9c026","56954a97fe18811700c9c027","56954a97fe18811700c9c028","56954a97fe18811700c9c029","5696cda524490c3700170a05","5697efe61c4dc8230054268e","5697efe72cf4060d004eaa75","56993ff47465970d00650b8f","56a7a155dfdabc0d000ae910","56a7a155b5d0920d0051cd81","56a7a1a6cf6d771700baeee3","56a7a1a63d33bc2100793d5d","56a7a23097e8b00d0096d209","56a7a230ea3e3417000df4b1","56a7a25acf6d771700baeee6","56a7a25a03f28c0d00a545bf","56a7a2b83d33bc2100793d60","56a7a2b8b5d0920d0051cd82","56b27fe42db51f0d0044e566"],"project":"568fde81b700ce0d002f4b43","version":"56954a94fe18811700c9bfda","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-01-09T16:40:53.584Z","from_sync":false,"order":4,"slug":"guides","title":"Guides"},"parentDoc":null,"project":"568fde81b700ce0d002f4b43","user":"568fffce769f210d0013258f","version":{"__v":6,"_id":"56954a94fe18811700c9bfda","project":"568fde81b700ce0d002f4b43","createdAt":"2016-01-12T18:48:52.007Z","releaseDate":"2016-01-12T18:48:52.007Z","categories":["56954a95fe18811700c9bfdb","56954a95fe18811700c9bfdc","56954a95fe18811700c9bfdd","56954a95fe18811700c9bfde","56954a95fe18811700c9bfdf","56954a95fe18811700c9bfe0","56954a95fe18811700c9bfe1","56954a95fe18811700c9bfe2","56954a95fe18811700c9bfe3","56954a95fe18811700c9bfe4","5695649fdcaf0d1700cb8721","5696c1168560a60d00e2c1d6","56a7a32e79395317007c1ad6","5898fc3eec49fb0f004c2663","589cc675ea37da23004e05e1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"foo","version_clean":"0.0.0","version":"0.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-02-03T22:32:04.173Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"# Contents\n\n- :fa-angle-right: [Traversal](#section-traversing-the-dom)\n  - [List of Commands](#section-list-of-commands)\n  - [Starting a Query](#section-starting-a-query)\n  - [CSS Selectors](#section-css-selectors)\n- :fa-angle-right: [Existence](#section-existence)\n  - [Waiting for an element to exist](#section-waiting-for-an-element-to-exist)\n  - [Waiting for an element to not exist](#section-waiting-for-an-element-to-not-exist)\n- :fa-angle-right: [Timeouts](#section-timeouts)\n  - [How retrying works](#section-how-retrying-works)\n  - [Increasing timeouts](#section-increasing-timeouts)\n- :fa-angle-right: [Assertions](#assertions)\n  - [Length Assertions](#section-length-assertions)\n  - [Class Assertions](#section-class-assertions)\n  - [Value Assertions](#section-value-assertions)\n  - [Text Content Assertions](#section-text-content-assertions)\n  - [Visibility Assertions](#section-visibility-assertions)\n  - [Existence Assertions](#section-existence-assertions)\n  - [State Assertions](#section-state-assertions)\n\n***\n\n# Traversal\n\nAt the heart of all integration tests is the DOM. Cypress gives you a host of familiar commands to make traversing the DOM as easy as possible.\n\nYou'll notice many of these commands match the same behavior as their [jQuery counterparts](https://api.jquery.com/category/traversing/).\n\n***\n\n## List of Commands\n\n- [children](https://on.cypress.io/api/children)\n- [closest](https://on.cypress.io/api/closest)\n- [contains](https://on.cypress.io/api/contains)\n- [eq](https://on.cypress.io/api/eq)\n- [find](https://on.cypress.io/api/find)\n- [filter](https://on.cypress.io/api/filter)\n- [first](https://on.cypress.io/api/first)\n- [get](https://on.cypress.io/api/get)\n- [last](https://on.cypress.io/api/last)\n- [next](https://on.cypress.io/api/next)\n- [not](https://on.cypress.io/api/not)\n- [parent](https://on.cypress.io/api/parent)\n- [parents](https://on.cypress.io/api/parents)\n- [prev](https://on.cypress.io/api/prev)\n- [siblings](https://on.cypress.io/api/siblings)\n\n***\n\n## Starting a Query\n\nIn Cypress, you will almost always start a sequence of traversal commands with [`cy.get`](https://on.cypress.io/api/get). You can think of [`cy.get`](https://on.cypress.io/api/get) as the same as jQuery's `$` for getting DOM elements.\n\n**The following examples are equivalent:**\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// return the element with id: 'main'\\ncy.get(\\\"#main\\\") // in cypress\\n$(\\\"#main\\\")      // in jquery\\n\\n// we can chain other traversal commands\\n// using the same familiar pattern\\ncy.get(\\\"#main\\\").find(\\\"ul\\\").children(\\\"li\\\").first() // in cypress\\n$(\\\"#main\\\").find(\\\"ul\\\").children(\\\"li\\\").first()      // in jquery\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## CSS Selectors\n\nAll DOM commands support the same CSS selectors found in the [jQuery Sizzle](https://sizzlejs.com/) engine.\n\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// All of the commands below are valid\\n\\ncy.get(\\\"ul\\\").find(\\\"li:nth-child(odd)\\\")\\n\\ncy.get(\\\"select[name=list] :not(:selected)\\\")\\n\\ncy.get(\\\".container\\\").children(\\\"input:disabled'\\\")\\n\\ncy.get(\\\"header\\\").find(\\\"*\\\")\\n\\ncy.get(\\\"input[type=checkbox]\\\").first(\\\"input:checked\\\")\\n\\ncy.get(\\\"span:nth-of-type(2)\\\")\\n\\ncy.get(\\\"input[data-js='user-name'][ng-input]\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n# Existence\n\n## Waiting for an element to exist\n\nIf you're coming to Cypress from another framework you'll likely first wonder:\n\n> How do I wait until an element exists?\n\nAt first glance you may think you need to write this in Cypress:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"#container\\\").should(\\\"exist\\\")\\n                          ↲\\n         // this assertion is unnecessary\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nIn Cypress you **never have to explicitly wait for an element to exist**. By default Cypress does this for you.\n\n**What's going on under the hood?**\n\nUnder the hood, Cypress will *automatically* retry commands which do not find elements. Cypress will continue retrying a command until it times outs.\n\n*Imagine this example:*\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.get(\\\"form\\\").find(\\\"inpit\\\").type(\\\"foo\\\").parent(\\\".row\\\")\\n                       ↲\\n    // oops we have a typo here in our selector\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nCypress will continue to retry finding the `inpit` element for **4 seconds** and then time out since this element does not exist. The [`cy.type`](https://on.cypress.io/api/type) and [`cy.parent`](https://on.cypress.io/api/parent) commands are never issued because Cypress will give up after failing to find the `inpit` element.\n\nAnother way to look at it is to imagine there being an implied `.should(\"exist\")` after every DOM command.\n\nIt's as if Cypress is writing the code below for you:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy\\n  .get(\\\"form\\\").should(\\\"exist\\\")\\n  .find(\\\"input\\\").should(\\\"exist\\\").type(\\\"foo\\\")\\n  .parent(\\\".row\\\").should(\\\"exist\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Waiting for an element not to exist\n\nIf you've read the previous section you may be wondering:\n\n> If Cypress automatically waits for elements to exist, how do I tell Cypress to **wait for an element not to exist**?\n\nThe answer is quite simple - just add that assertion and Cypress will *reverse* its default behavior.\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy\\n  .get(\\\"button\\\").click()\\n\\n  // now cypress will reverse its behavior.\\n  //\\n  // instead of retrying until an element DOES exist\\n  // it will now retry until this element DOES NOT exist\\n  .get(\\\"#loading-spinner\\\").should(\\\"not.exist\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nIn fact - assertions *always* tell Cypress when to resolve your DOM commands.\n\nYou simply describe the state of your element with assertions, and Cypress knows not to resolve your command until the element(s) in question match the assertion(s) behavior.\n\n***\n\n# Timeouts\n\n## How retrying works\n\nWhen you provide assertions, Cypress knows to automatically wait until those assertions pass.\n\nWhen an assertion does not pass, Cypress will wait a brief period of time and retry again.\n\nBy default, all commands will retry until [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) is exceeded. By default this means Cypress will wait up to **4 seconds** per DOM command + its associated assertions.\n\nImagine this example:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy\\n  .get(\\\"#main\\\")     // <-- wait up to 4 seconds for '#main' to be found\\n\\n  .children(\\\"form\\\") // <-- wait up to 4 seconds for 'form' children to be found\\n\\n  .find(\\\"input\\\")                  // <-- wait up to 4 seconds for this 'input' to be found\\n    .should(\\\"have.value\\\", \\\"foo\\\")  // <-- and to have the value 'foo'\\n    .and(\\\"have.class\\\", \\\"radio\\\")   // <-- and to have the class 'radio'\\n\\n  .parents(\\\"#foo\\\")\\n    .should(\\\"not.exist\\\")          // <-- wait up to 4 seconds for this element NOT to be found\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Increasing timeouts\n\nYou have two ways of increasing the amount of time Cypress waits for resolving DOM commands.\n\n1. Change the [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) globally\n2. Override the timeout option on a specific command\n\nOverriding the timeout option on a specific command looks like this:\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy\\n  .get(\\\"#main\\\", {timeout: 5000})   // <-- wait up to 5 seconds for '#main' to be found\\n\\n  .children(\\\"form\\\")                // <-- wait up to 4 seconds again\\n\\n  .find(\\\"input\\\", {timeout: 10000}) // <-- wait up to 10 seconds for this 'input' to be found\\n    .should(\\\"have.value\\\", \\\"foo\\\")   // <-- and to have the value 'foo'\\n    .and(\\\"have.class\\\", \\\"radio\\\")    // <-- and to have the class 'radio'\\n\\n  .parents(\\\"#foo\\\", {timeout: 2000})\\n    .should(\\\"not.exist\\\")            // <-- wait up to 2 seconds for this element NOT to be found\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\nIt's important to note that timeouts will automatically flow down to their cooresponding assertions.\n\n**In the example we wait up to a total of 10 seconds to:**\n\n1. find the `<input>`\n2. ensure it has a value of `foo`\n3. ensure it has a class of `radio`\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"cy.find(\\\"input\\\", {timeout: 10000}).should(\\\"have.value\\\", \\\"foo\\\").and(\\\"have.class\\\", \\\"radio\\\")\\n                         ↲\\n      // adding the timeout here will automatically\\n      // flow down to the assertions, and they will\\n      // be retried for up to 10 seconds\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Assuming you have two assertions, if one passes, and one fails, Cypress will continue to retry until they **both** pass. If Cypress eventually times out you'll get a visual indicator in your Command Log to know which specific assertion failed.\"\n}\n[/block]\n\n***\n\n# Assertions\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Read about [Making Assertions](https://on.cypress.io/guides/making-assertions) and where they come from.\",\n  \"title\": \"New to Cypress?\"\n}\n[/block]\n\n## Length Assertions\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// retry until we find 3 matching <li.selected>\\ncy.get(\\\"li.selected\\\").should(\\\"have.length\\\", 3)\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Class Assertions\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// retry until this input does not have class disabled\\ncy.get(\\\"form\\\").find(\\\"input\\\").should(\\\"not.have.class\\\", \\\"disabled\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Value Assertions\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// retry until this textarea has the correct value\\ncy.get(\\\"textarea\\\").should(\\\"have.value\\\", \\\"foo bar baz\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Text Content Assertions\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// retry until this span does not contain 'click me'\\ncy.get(\\\"a\\\").parent(\\\"span.help\\\").should(\\\"not.contain\\\", \\\"click me\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Visibility Assertions\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// retry until this button is visible\\ncy.get(\\\"button\\\").should(\\\"be.visible\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## Existence Assertions\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// retry until loading spinner no longer exists\\ncy.get(\\\"#loading\\\").should(\\\"not.exist\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]\n\n***\n\n## State Assertions\n\n[block:code]\n{\n    \"codes\": [\n        {\n            \"code\": \"// retry until our radio is checked\\ncy.get(\\\":radio\\\").should(\\\"be.checked\\\")\\n\",\n            \"language\": \"javascript\"\n        }\n    ]\n}\n[/block]","excerpt":"Traverse the DOM, find elements, make assertions","slug":"finding-elements","type":"basic","title":"Finding Elements"}

Finding Elements

Traverse the DOM, find elements, make assertions

# Contents - :fa-angle-right: [Traversal](#section-traversing-the-dom) - [List of Commands](#section-list-of-commands) - [Starting a Query](#section-starting-a-query) - [CSS Selectors](#section-css-selectors) - :fa-angle-right: [Existence](#section-existence) - [Waiting for an element to exist](#section-waiting-for-an-element-to-exist) - [Waiting for an element to not exist](#section-waiting-for-an-element-to-not-exist) - :fa-angle-right: [Timeouts](#section-timeouts) - [How retrying works](#section-how-retrying-works) - [Increasing timeouts](#section-increasing-timeouts) - :fa-angle-right: [Assertions](#assertions) - [Length Assertions](#section-length-assertions) - [Class Assertions](#section-class-assertions) - [Value Assertions](#section-value-assertions) - [Text Content Assertions](#section-text-content-assertions) - [Visibility Assertions](#section-visibility-assertions) - [Existence Assertions](#section-existence-assertions) - [State Assertions](#section-state-assertions) *** # Traversal At the heart of all integration tests is the DOM. Cypress gives you a host of familiar commands to make traversing the DOM as easy as possible. You'll notice many of these commands match the same behavior as their [jQuery counterparts](https://api.jquery.com/category/traversing/). *** ## List of Commands - [children](https://on.cypress.io/api/children) - [closest](https://on.cypress.io/api/closest) - [contains](https://on.cypress.io/api/contains) - [eq](https://on.cypress.io/api/eq) - [find](https://on.cypress.io/api/find) - [filter](https://on.cypress.io/api/filter) - [first](https://on.cypress.io/api/first) - [get](https://on.cypress.io/api/get) - [last](https://on.cypress.io/api/last) - [next](https://on.cypress.io/api/next) - [not](https://on.cypress.io/api/not) - [parent](https://on.cypress.io/api/parent) - [parents](https://on.cypress.io/api/parents) - [prev](https://on.cypress.io/api/prev) - [siblings](https://on.cypress.io/api/siblings) *** ## Starting a Query In Cypress, you will almost always start a sequence of traversal commands with [`cy.get`](https://on.cypress.io/api/get). You can think of [`cy.get`](https://on.cypress.io/api/get) as the same as jQuery's `$` for getting DOM elements. **The following examples are equivalent:** [block:code] { "codes": [ { "code": "// return the element with id: 'main'\ncy.get(\"#main\") // in cypress\n$(\"#main\") // in jquery\n\n// we can chain other traversal commands\n// using the same familiar pattern\ncy.get(\"#main\").find(\"ul\").children(\"li\").first() // in cypress\n$(\"#main\").find(\"ul\").children(\"li\").first() // in jquery\n", "language": "javascript" } ] } [/block] *** ## CSS Selectors All DOM commands support the same CSS selectors found in the [jQuery Sizzle](https://sizzlejs.com/) engine. [block:code] { "codes": [ { "code": "// All of the commands below are valid\n\ncy.get(\"ul\").find(\"li:nth-child(odd)\")\n\ncy.get(\"select[name=list] :not(:selected)\")\n\ncy.get(\".container\").children(\"input:disabled'\")\n\ncy.get(\"header\").find(\"*\")\n\ncy.get(\"input[type=checkbox]\").first(\"input:checked\")\n\ncy.get(\"span:nth-of-type(2)\")\n\ncy.get(\"input[data-js='user-name'][ng-input]\")\n", "language": "javascript" } ] } [/block] *** # Existence ## Waiting for an element to exist If you're coming to Cypress from another framework you'll likely first wonder: > How do I wait until an element exists? At first glance you may think you need to write this in Cypress: [block:code] { "codes": [ { "code": "cy.get(\"#container\").should(\"exist\")\n ↲\n // this assertion is unnecessary\n", "language": "javascript" } ] } [/block] In Cypress you **never have to explicitly wait for an element to exist**. By default Cypress does this for you. **What's going on under the hood?** Under the hood, Cypress will *automatically* retry commands which do not find elements. Cypress will continue retrying a command until it times outs. *Imagine this example:* [block:code] { "codes": [ { "code": "cy.get(\"form\").find(\"inpit\").type(\"foo\").parent(\".row\")\n ↲\n // oops we have a typo here in our selector\n", "language": "javascript" } ] } [/block] Cypress will continue to retry finding the `inpit` element for **4 seconds** and then time out since this element does not exist. The [`cy.type`](https://on.cypress.io/api/type) and [`cy.parent`](https://on.cypress.io/api/parent) commands are never issued because Cypress will give up after failing to find the `inpit` element. Another way to look at it is to imagine there being an implied `.should("exist")` after every DOM command. It's as if Cypress is writing the code below for you: [block:code] { "codes": [ { "code": "cy\n .get(\"form\").should(\"exist\")\n .find(\"input\").should(\"exist\").type(\"foo\")\n .parent(\".row\").should(\"exist\")\n", "language": "javascript" } ] } [/block] *** ## Waiting for an element not to exist If you've read the previous section you may be wondering: > If Cypress automatically waits for elements to exist, how do I tell Cypress to **wait for an element not to exist**? The answer is quite simple - just add that assertion and Cypress will *reverse* its default behavior. [block:code] { "codes": [ { "code": "cy\n .get(\"button\").click()\n\n // now cypress will reverse its behavior.\n //\n // instead of retrying until an element DOES exist\n // it will now retry until this element DOES NOT exist\n .get(\"#loading-spinner\").should(\"not.exist\")\n", "language": "javascript" } ] } [/block] In fact - assertions *always* tell Cypress when to resolve your DOM commands. You simply describe the state of your element with assertions, and Cypress knows not to resolve your command until the element(s) in question match the assertion(s) behavior. *** # Timeouts ## How retrying works When you provide assertions, Cypress knows to automatically wait until those assertions pass. When an assertion does not pass, Cypress will wait a brief period of time and retry again. By default, all commands will retry until [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) is exceeded. By default this means Cypress will wait up to **4 seconds** per DOM command + its associated assertions. Imagine this example: [block:code] { "codes": [ { "code": "cy\n .get(\"#main\") // <-- wait up to 4 seconds for '#main' to be found\n\n .children(\"form\") // <-- wait up to 4 seconds for 'form' children to be found\n\n .find(\"input\") // <-- wait up to 4 seconds for this 'input' to be found\n .should(\"have.value\", \"foo\") // <-- and to have the value 'foo'\n .and(\"have.class\", \"radio\") // <-- and to have the class 'radio'\n\n .parents(\"#foo\")\n .should(\"not.exist\") // <-- wait up to 4 seconds for this element NOT to be found\n", "language": "javascript" } ] } [/block] *** ## Increasing timeouts You have two ways of increasing the amount of time Cypress waits for resolving DOM commands. 1. Change the [`defaultCommandTimeout`](https://on.cypress.io/guides/configuration#section-timeouts) globally 2. Override the timeout option on a specific command Overriding the timeout option on a specific command looks like this: [block:code] { "codes": [ { "code": "cy\n .get(\"#main\", {timeout: 5000}) // <-- wait up to 5 seconds for '#main' to be found\n\n .children(\"form\") // <-- wait up to 4 seconds again\n\n .find(\"input\", {timeout: 10000}) // <-- wait up to 10 seconds for this 'input' to be found\n .should(\"have.value\", \"foo\") // <-- and to have the value 'foo'\n .and(\"have.class\", \"radio\") // <-- and to have the class 'radio'\n\n .parents(\"#foo\", {timeout: 2000})\n .should(\"not.exist\") // <-- wait up to 2 seconds for this element NOT to be found\n", "language": "javascript" } ] } [/block] It's important to note that timeouts will automatically flow down to their cooresponding assertions. **In the example we wait up to a total of 10 seconds to:** 1. find the `<input>` 2. ensure it has a value of `foo` 3. ensure it has a class of `radio` [block:code] { "codes": [ { "code": "cy.find(\"input\", {timeout: 10000}).should(\"have.value\", \"foo\").and(\"have.class\", \"radio\")\n ↲\n // adding the timeout here will automatically\n // flow down to the assertions, and they will\n // be retried for up to 10 seconds\n", "language": "javascript" } ] } [/block] [block:callout] { "type": "warning", "body": "Assuming you have two assertions, if one passes, and one fails, Cypress will continue to retry until they **both** pass. If Cypress eventually times out you'll get a visual indicator in your Command Log to know which specific assertion failed." } [/block] *** # Assertions [block:callout] { "type": "info", "body": "Read about [Making Assertions](https://on.cypress.io/guides/making-assertions) and where they come from.", "title": "New to Cypress?" } [/block] ## Length Assertions [block:code] { "codes": [ { "code": "// retry until we find 3 matching <li.selected>\ncy.get(\"li.selected\").should(\"have.length\", 3)\n", "language": "javascript" } ] } [/block] *** ## Class Assertions [block:code] { "codes": [ { "code": "// retry until this input does not have class disabled\ncy.get(\"form\").find(\"input\").should(\"not.have.class\", \"disabled\")\n", "language": "javascript" } ] } [/block] *** ## Value Assertions [block:code] { "codes": [ { "code": "// retry until this textarea has the correct value\ncy.get(\"textarea\").should(\"have.value\", \"foo bar baz\")\n", "language": "javascript" } ] } [/block] *** ## Text Content Assertions [block:code] { "codes": [ { "code": "// retry until this span does not contain 'click me'\ncy.get(\"a\").parent(\"span.help\").should(\"not.contain\", \"click me\")\n", "language": "javascript" } ] } [/block] *** ## Visibility Assertions [block:code] { "codes": [ { "code": "// retry until this button is visible\ncy.get(\"button\").should(\"be.visible\")\n", "language": "javascript" } ] } [/block] *** ## Existence Assertions [block:code] { "codes": [ { "code": "// retry until loading spinner no longer exists\ncy.get(\"#loading\").should(\"not.exist\")\n", "language": "javascript" } ] } [/block] *** ## State Assertions [block:code] { "codes": [ { "code": "// retry until our radio is checked\ncy.get(\":radio\").should(\"be.checked\")\n", "language": "javascript" } ] } [/block]