Cypress Assertions

What is Cypress?
Cypress is a next generation front end testing tool built for the modern web. Learn about Cypress.io and its features.

Cypress bundles the popular Chai assertion library, as well as helpful extensions for Sinon and jQuery, bringing you dozens of powerful assertions for free.

Cypress bundles chai no need to add as a dependency to your project.

Pre-requisites

1. Install Node.js and npm https://www.npmjs.com/get-npm

Setup

1. create a directory for the project and cd to it: mkdir cypress-assertions && cd cypress-assertions
2. Run npm init --y to setup a new npm package project.
3. Install Cypress via npm npm i cypress --save-dev.
4. Verify Cypress by running npx cypress open.
5. Now cypress folder along with cypress.json file will be created in the project directory.
6. "integration" folder contains cypress test examples.
7. Ignore the examples folder by adding as ignored test is cypress.json

{
    "ignoreTestFiles": "**/examples/*.js"
}

Creating and Run Tests
Under the “integration” folder create a new file. Name it “sample_assert.js”

/// <reference types="cypress" />

describe('Sample assert', () => {
    it('first test', () => {
       expect(2).to.equal(2);
     })
 })

In beforeEach block specify the url that needs to be navigated before each test.

/// <reference types="cypress" />

describe('Sample assert', () => {

beforeEach(() =>{
        cy.visit(`https://example.cypress.io/commands/actions`);
})

it('first test', () => {
       expect(2).to.equal(2);
})

})

Check for Visibility of element.

 it(`Assert - Visibility of element`,()=>{
        cy.get(`[id="email1"]`).should(`be.visible`);
 })

Check for Disabled element.

 it(`Assert - Disabled element`,()=>{
        cy.get(`textarea`).should(`be.disabled`);
 })

Check for Focused element.

it(`Assert - Focused element`, () => {
        cy.get('.action-focus').focus()
            .should(`be.focused`)
})

Check for blank input box

it(`Assert - Blank Input box`, () => {
        cy.get(`[id="email1"]`).should(`have.value`,``);
}) 

Check if checkbox is checked

it(`Assert - Checkbox is checked`, ()=>{    
 cy.get(`[value="checkbox1"]`).first().click().should(`be.checked`)
    })

Check for Object comparison

it(`Assert - Object assertions`,() => {
        let obj = {
            name: 'Bharath' 
        }
        expect(obj).to.deep.equal({ name: 'Bharath' })
    })

Git repo: https://github.com/Bharath-Kumar-S/cypress-assertions

I hope this was helpful. Please leave your feedback.