Cypress Assertions
Tags: cypress, chai, assert, javascript
Published: 2021-02-07 17:46:49

**_What is Cypress?_**
Cypress is a next generation front end testing tool built for the modern web. Learn about [Cypress.io](https://www.cypress.io/) and its features.

Cypress bundles the popular [Chai](https://docs.cypress.io/guides/references/assertions.html#Chai) assertion library, as well as helpful extensions for [Sinon](https://docs.cypress.io/guides/references/assertions.html#Sinon-Chai) and [jQuery](https://docs.cypress.io/guides/references/assertions.html#Chai-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);
     })
 })
```
![image](https://dev-to-uploads.s3.amazonaws.com/i/fzp2j5qsuzrphhea43pq.png)

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._**
![image](https://dev-to-uploads.s3.amazonaws.com/i/5u32aqz6b8pamb5dox2t.png) 
```
 it(`Assert - Visibility of element`,()=>{
        cy.get(`[id="email1"]`).should(`be.visible`);
 })
```
![image](https://dev-to-uploads.s3.amazonaws.com/i/ass1arw1z1v58ho00xj3.png) 
**_Check for Disabled element._**
![image](https://dev-to-uploads.s3.amazonaws.com/i/o05luprkk1np2z02wgt4.png)
```
 it(`Assert - Disabled element`,()=>{
        cy.get(`textarea`).should(`be.disabled`);
 })
``` 
![image](https://dev-to-uploads.s3.amazonaws.com/i/idon8rdqufs21fzp42fk.png)
**_Check for Focused element._**
![image](https://dev-to-uploads.s3.amazonaws.com/i/y43nrpqzt9xhyfgf8w8d.png)
![image](https://dev-to-uploads.s3.amazonaws.com/i/uw3b48rs6d9e6qnrzs5g.png)  
```
it(`Assert - Focused element`, () => {
        cy.get('.action-focus').focus()
            .should(`be.focused`)
})
```
![image](https://dev-to-uploads.s3.amazonaws.com/i/vxit2kfli67np6vuw16c.png)
**_Check for blank input box_**
![image](https://dev-to-uploads.s3.amazonaws.com/i/fegzmrj2ce6reqwet9kh.png) 
```
it(`Assert - Blank Input box`, () => {
        cy.get(`[id="email1"]`).should(`have.value`,``);
}) 
```
![image](https://dev-to-uploads.s3.amazonaws.com/i/tkz24jhlzu2mirbzbs5e.png)
**_Check if checkbox is checked_**
![image](https://dev-to-uploads.s3.amazonaws.com/i/ct8qjdqgyu9pzgn89uts.png)
```
it(`Assert - Checkbox is checked`, ()=>{    
 cy.get(`[value="checkbox1"]`).first().click().should(`be.checked`)
    })
```
![image](https://dev-to-uploads.s3.amazonaws.com/i/048xjpc3ae0s2cgndum4.png)
**_Check for Object comparison_**
```
it(`Assert - Object assertions`,() => {
        let obj = {
            name: 'Bharath' 
        }
        expect(obj).to.deep.equal({ name: 'Bharath' })
    })
```
![image](https://dev-to-uploads.s3.amazonaws.com/i/kh638smac3sjfsa145s0.png)

Git repo: https://github.com/Bharath-Kumar-S/cypress-assertions 
 
I hope this was helpful. Please leave your feedback.