What Are Assertions in Cypress?<\/strong><\/h2>\n\n\n\nIn general, English \u201ca statement that says you strongly believe that something is true,\u201d\u2019, so for implementing this in Cypress, we have two libraries, \u201cChai\u201d and \u201cJest\u201d. Using these libraries, we can access multiple methods which we can use values and behaviour of the program or code.<\/p>\n\n\n\n
Assertions usually evaluate in boolean format in \u201cTrue\u201d or \u201cFalse\u201d, based on which we make a decision if the test case is passing or failed or sometimes we define other flows based on the outputs that we are getting from assertions. If we do not use assertions in the code, it will become very difficult to identify the problem, plus validate the functionality that should be there in the application. If we are expecting a button to be there on the UI and it should be enabled, then we will need assertions.<\/p>\n\n\n\n
In Cypress, we have Chai Library, which helps in providing multiple assertion functions, including \u201cShould\u201d and \u201cexpect,\u201d which are the two most commonly used assertion functions.<\/p>\n\n\n\n
In the following sections, we will explore the different types of Cypress asserts and provide examples of each.<\/strong><\/p>\n\n\n\nTypes of Cypress Assertions<\/h2>\n\n\n\nBehavior-Driven (BDD) Assertions in Cypress<\/h3>\n\n\n\n
BDD (Behaviour-driven development) is written with Keywords such as Given\/When\/Then\/And, which define the expected behaviour in very easy and understandable language. We use Should and expect functions for implementing these assertions.<\/p>\n\n\n\n
1. \u201c.should()\u201d:<\/strong><\/h3>\n\n\n\nThe `.should()` command is used to make various assertions about elements on the page. We will be providing a string argument describing the condition we are checking and a chaining function that specifies the assertion. We can have multiple \u201cshould\u201d assertions chained together for validating complex functionality and other aspects of the web application.<\/p>\n\n\n\n
cy.get('button').should('be.visible'); \/\/ Checks if the button is visible\ncy.get('input').should('have.value', 'Hello'); \/\/ Checks if the input has the value \"Hello\"\n\ncy.get(\"#element\").should(\"have.class\", \"some-class\"); \/\/ Checks if element has a specific class\n\ncy.get(\"#element\").should(\"be.hidden\"); \/\/Checks if element is hidden\n\n<\/code><\/pre>\n\n\n\nReal-time example:<\/strong><\/p>\n\n\n\nWhen(\"I select {string} option from {string} dropdown\", (option, placeholder) => {\n cy.get(`input[placeholder=\"${placeholder}\"]`)\n .click()\n .then(() => {\n cy.get(\"li\").contains(option).click();\n })\n .then(() => {\n cy.get(`input[value=\"${option}\"]`).then((element) => {\n cy.get(element).should(\"have.value\", option);\n });\n });\n});\n<\/code><\/pre>\n\n\n\n2. \u201c.should(‘not’)\u201d:<\/strong><\/h3>\n\n\n\nWe can use `.should(‘not’)` to negate assertions or means to validate negative assertions.<\/p>\n\n\n\n
cy.get('button').should('not.be.disabled');\/\/assertion for validating disable button<\/code><\/pre>\n\n\n\n3. \u201c`.should()` with Chaining Functions\u201d<\/strong><\/h3>\n\n\n\nYou can use chaining functions ( when we want to club multiple operations) for more complex assertions and use their methods to specify the expectation.<\/p>\n\n\n\n
cy.get('ul')\n .should('have.class', 'active')\n .and('have.attr', 'data-testid', 'my-list')\n .and('contain', 'List Item 1');\n \n<\/code><\/pre>\n\n\n\n4. \u201c.expect()<\/strong>\u201d:<\/h4>\n\n\n\nThe `.expect()` function is used for more complicated assertions, and it is often used with chaining commands. It’s similar to `.should()`, but it allows you to make multiple assertions on the same subject.<\/p>\n\n\n\n
cy.get('p').should('have.length', 3).expect($p => {\n \/\/ Custom assertions using jQuery methods on the selected elements\n expect($p.eq(0)).to.contain('First paragraph');\n });\nexpect(\"expectedText\").to.have .text(\"actualText\") ; \/\/ asserting Expect to validate text or number\nexpect(\"value\").to.be.a(\"string\"); \/\/Asserting the data type of the actual value\n<\/code><\/pre>\n\n\n\nReal-time example:<\/strong><\/p>\n\n\n\nWhen(\"The button {string} is {string}\", (text, status) => {\n cy.get(`button:contains(\"${text}\")`).then(($btn) => {\n if (status === 'enabled') {\n expect($btn).not.to.have.class('Mui-disabled');\n expect($btn).not.to.have.attr('disabled');\n } else {\n expect($btn).to.have.class('Mui-disabled');\n expect($btn).to.have.attr('disabled');\n }\n });\n});\n<\/code><\/pre>\n\n\n\nTest-Driven (TDD) Assertions in Cypress<\/h2>\n\n\n\n
TDD (Test Driven Development), in TDD, we follow the approach: first test, then develop. And the coding style which we follow is \u201cArrange\/Act\/Assert (AAA)\u201d, Arrange refers to setting up all the preconditions which are required for testing, Act refers to performing the actions which are required for testing, and Assert refers to the verification of outcomes which we are getting. The function that is used for performing assertions is assert()<\/p>\n\n\n\n
`.assert()<\/strong>`:<\/p>\n\n\n\nThe `.assert()` command is similar to `.should()` and is used for making assertions about elements and properties. When it gets into details, we need .assert() to fetch and validate.<\/p>\n\n\n\n
cy.get('input').assert('have.attr', 'type', 'email'); \/\/ Checks if the input has the \"type\" attribute with value \"email\"\ncy.get(\"#element\").then(($el) => {\n assert.isTrue($el.hasClass(\"some-class\"))\n}); \/\/asserting the class check for element\ncy.get(\"#element\").then(($el) => {\n assert.isTrue($el.is(\":visible\"))\n}); \/\/asserting a check for visibility of element\n\ncy.get(\"#element\").then(($el) => {\n assert.isTrue($el.is(\":hidden\"))\n}); \/\/ asserting that an element is hidden\ncy.get(\"#element\").then(($el) => {\n assert.equal($el.attr(\"type\"), \"text\")\n}); \/\/ asserting element has a specific value\n<\/code><\/pre>\n\n\n\n\u00a0\u00a0Real-time example:<\/strong><\/p>\n\n\n\nconst checkStatus = () => {\n if (loopCount >= 10) {\n assert.fail('Exceeded maximum number of attempts to check pipeline status');\n }<\/code><\/pre>\n\n\n\nChai-jQuery Assertions Explained<\/h3>\n\n\n\n
Chai and JQuery assertions are made up of Chai & JQuery, JQuery is used to identify and locate web elements on the page. Chai helps in making assertions about their current state and availability. It validated the properties of the web elements present on the page using.Should().<\/p>\n\n\n\n
This assertion is widely used in automation frameworks, first we need to include the Chai-Jquery dependency.<\/p>\n\n\n\n
import 'cypress-jquery';<\/code><\/pre>\n\n\n\n