DEV Community

loading...

Cypress Assertions

bharathkumars profile image Bharath Kumar S ・2 min read

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"
}
Enter fullscreen mode Exit fullscreen mode

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);
     })
 })
Enter fullscreen mode Exit fullscreen mode

image

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);
})

})
Enter fullscreen mode Exit fullscreen mode

Check for Visibility of element.
image

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

image
Check for Disabled element.
image

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

image
Check for Focused element.
image
image

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

image
Check for blank input box
image

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

image
Check if checkbox is checked
image

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

image
Check for Object comparison

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

image

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

I hope this was helpful. Please leave your feedback.

Discussion (0)

pic
Editor guide