Table of content

• Assertion in Cypress
• Chainable getters in the Assertion
• TDD and BDD assertion in Cypress
• Common Assertions used in Cypress

In automated testing, assertion plays a vital role. The assertion is a condition that checks whether the program contains any bugs or not and to meet the client's specifications. The assertion is mainly used to detect the errors in the program.

Cypress bundles the popular Chai assertion library, as well as helpful extensions for Sinon and jQuery.

There are three styles in the chai library they are,

• expect
• should
• assert

Assertions are further classified into two types based on the waiting mechanism, namely

• Implicit assertion
• Explicit assertion

Let us discuss it briefly with a simple example.

Example code: In the below code,

• The First it block: Visiting the URL page.
• The Second it block: To check whether the mentioned URL is correct or not.
  • cy.url() : This method gets the correct URL similar to the get() method, wherein the cy.get() method fetches the web element but in cy.url() fetches the web page URL.
  • The should is the assertion here, the test gets passed only if the URL contains a string named example.com in it.

describe(('My First Test suite'),
    function() {
        it('My First testcase',
            function() {
                cy.visit("https://example.com/");
            })
        it('should check correct url', () => {
            cy.url().should('include', 'example.com')
            //cy.url() gets the correct url
        })
    })

Output :



Now in the above code, the URL is checked. Now let us alter the same program to check the web page element of the same web page.

Example code :

• The Third it block: Checks the web page element is visible or not.
  • cy.get(): gets the web page element of h1
  • be.visible : confirms whether the web page element is visible or not

describe(('My First Test suite'),
    function() {
        it('My First testcase',
            function() {
                cy.visit("https://example.com/");
            })
        it('should check correct url', () => {
            cy.url().should('include', 'example.com')
            //cy.url() gets the correct url
        })
        it('should check for corect elements on the page', () => {
            cy.get('h1').should('be.visible')
            //cy.get() gets the web page element of h1
            //be.visible confirms whether the web page element is visible or not
        })
    })

Output :



The above program is successfully executed for the given web page element h1.

Now, let us change the CSS of the element from h1 to h5.

Code :

describe(('My First Test suite'),
    function() {
        it('My First testcase',
            function() {
                cy.visit("https://example.com/");
            })
        it('should check correct url', () => {
            cy.url().should('include', 'example.com')
            //cy.url() gets the correct url
        })
        it('should check for corect elements on the page', () => {
            cy.get('h5').should('be.visible')
            //cy.get() gets the web page element of h5
            //be.visible confirms whether the web page element is visible or not
        })
    })

Output: Error occurs because there is no web page element with CSS h5.



When the given web page element is wrong, the First and the second it blocks gets passed but the third it block gets failed. In the above program, the error occurs when the h1 is changed as h5 because no element contains CSS as h5.

Default built-in assertion in cypress

In testing, Assertion is the core concept. But in Cypress, you can use a few commands without using any assertion. This is because some commands have the default built-in assertion. The commands are,

Let us now learn about the chainable getters used in the assertion before getting into the implicit and explicit assertion.

To improve the readability of the code while using multiple commands using assertion these chainable getters are used. These are used to connect two or more assertions. Below is the list of the chainable getters.

Implicit Assertion in Cypress

In Implicit assertion, Commands like .should()and .and depends or chained always with the parent command. The implicit assertion is used to specify the current subject. Implicit assertions are used when you want to assert multiple commands with a single subject.

Example code :

describe(('My First Test suite'),
    function() {
        it('My First testcase',
            function() {
                cy.visit("https://example.com/");
            })
        it('should check correct url', () => {
            cy.url().should('include', 'example.com')
        })
        it('should check for corect elements on the page', () => {
            cy.get('a').should('be.visible').and('have.attr', 'href')
        })
    })

Here the .should() command is chained with the parent command .get(). Again .and is chained with the .should() .

Output :

In the explicit assertion, styles such as assert and expect are used to make the assertion about a specified subject. For the BDD assertion, expect is used and for the TDD assertion, assert is used. Let us understand what is TDD and BDD assertion.

Based on the Test development the assertion is classified for TDD[Test Driven Development] and BDD[Behavior Driven Development]. TDD and BDD are the development technique of the tests.

In the TDD technique, the test cases are created first and then the code is written according to the test cases. This technique tests the actual implementation of the program. TDD proceeds the test in a particular user-defined pattern and it does not care much on the output.

TDD consumes more time while developing a program but it is more reliable.

In Cypress, the TDD process assert. is used as an assertion command which is non-chainable. Below is the list of the assertion available for TDD using assert.

BDD Assertion

BDD assertion is used to test the behavior of the application. The tests which are done using the BDD have certain conditions. Only if the condition passes, the testing will be executed. expect and should are the BDD assertions. BDD assertions are chainable. Below is the list of the chainers used in BDD.

Below there are few example codes of commonly used assertion which is used along with.should()

Length

// retry until we find 3 matching <li.selected>
cy.get('li.selected').should('have.length', 3)

Class

// retry until this input does not have class disabled
cy.get('form').find('input').should('not.have.class', 'disabled')

Value

// retry until this textarea has the correct value
cy.get('textarea').should('have.value', 'example')

Contain

// retry until this span does not contain 'click me'
cy.get('a').parent('span.help').should('not.contain', 'click me')

Visibility

// retry until this button is visible
cy.get('button').should('be.visible')

Existence

// retry until loading spinner no longer exists
cy.get('#loading').should('not.exist')

Status

// retry until our radio is checked
cy.get(':radio').should('be.checked')

CSS

// retry until .completed has matching css
cy.get('.completed').should('have.css', 'text-decoration', 'line-through')
// retry until .accordion css have display: none
cy.get('#accordion').should('not.have.css', 'display', 'none')

Now we know, how to chain the assertion with the parent commands. In the next article, we can learn about the commands which are mostly used in cypress for testing.

Recommended Readings

• Commands in cypress
• Fixtures in Cypress
• Custom commands in Cypress
• Fixtures and $ function in cypress
• Execution of Test programs in Cypress
• Cypress locator strategies
• Introduction to cypress
• CypressIO Interview questions