Cypress Class

InfoDev
 Cypress Introduction
• Cypress is an open-source end-to-end testing framework for web applications.
• It is designed to simplify and streamline the process of testing web applications by providing a fast,
reliable, and easy-to-use testing environment.

Here are some key features and aspects of Cypress:

❑ JavaScript-Based Testing ❑ Friendly API
❑ Real-Time Reloads ❑ Screenshots and Videos
❑ Time-Travel Debugging ❑ Open Source and Active Community
❑ Cross-Browser Testing

Cypress InfoDev
 Cypress Setup
• For Cypress environment setup(node), visit the link: https://nodejs.org/en/download/
• The screen that will appear is given below.(Download MSI)

Cypress InfoDev
 Code Editor Setup
• Next, we need to have a IDE to write the code for Cypress.
• For this, we can download Visual Studio Code from the link https://code.visualstudio.com/

Cypress InfoDev
 Install Cypress:
npm install --save-dev cypress

Open Cypress
npx cypress open

Cypress InfoDev
Cypress InfoDev
Cypress InfoDev
Cypress InfoDev
Cypress InfoDev
Cypress InfoDev
 Folder Structure

We will start making files and folder inside e2e

Cypress InfoDev
 Test Execution
• From the command line
npx cypress run

• From the Test Runner

npx cypress open

• For a specific file from command line

npx cypress run --spec "<spec file path>"

Cypress InfoDev
 Execution from Other Browsers

• In Chrome
npx cypress run -- browser chrome

• In Firefox
npx cypress run -- browser firefox

Cypress InfoDev
 First Cypress test

Cypress InfoDev
 First Cypress test

describe is used to group related test cases together.

It's a way to create a block of tests that are related to a specific
functionality or component of your application.

it is used to define an individual test case or specification. It

represents a single assertion or expectation within the context
of the describe block.

Cypress InfoDev
 It and describe grouped

describe(‘Login Page', () => {

it(‘logo should be visible', () => {
// Test code here
});

it(‘input field should be present', () => {

// Test code here
});
});

Cypress InfoDev
 describe('User management', () => {
context('Registration', () => {
it('should allow a user to register with valid details', () => {
// Test code for user registration with valid details
});

context {
it('should display an error for invalid email during registration', () =>

// Test code for handling invalid email during registration

});
});

context('Login', () => {
it('should allow a registered user to log in', () => {
// Test code for user login
});

it('should display an error for incorrect password during login', () => {

// Test code for handling incorrect password during login
});
});
});

Cypress InfoDev
 cy.get() - Element Selection:

// Gets input by name

cy.get('[name="email"]')

//select by placeholder
cy.get('[placeholder="your_placeholder_text"]’)

// Select by class name

cy.get('.my-class');

// Select by ID
cy.get('#my-id');

// Select by attribute
cy.get('[data-test=my-element]');

// Select by attribute
cy.get('[data-cy=my-element]')

Cypress InfoDev
 Commands in Cypress are for Interacting
.click()
.dblclick()
.rightclick()
.type()
.clear()
.check()
.uncheck()
.select()
.trigger()
.selectFile()
.focus()
.blur()

Cypress InfoDev
 Task
Learn About Different Trigger actions in cypress

Cypress InfoDev
 Assertions in Cypress

1. Validation: The core purpose of testing is to verify if your application behaves as expected. Assertions allow
you to explicitly define your expectations for an element, interaction, or data in your Cypress tests.
2. Failure Detection: Tests without assertions are essentially blind. Assertions help you catch any deviations
from expected behavior by explicitly declaring what constitutes a successful or failed test step.
3. Debugging and Feedback: When an assertion fails, Cypress provides clear error messages indicating the
expected and actual values. This simplifies debugging and helps you identify and fix issues quickly.

Cypress InfoDev
 Types of Assertions in Cypress

1. Basic Assertions with cy.should():

// Example: Verify that an element with ID 'myButton' is visible

cy.get('#myButton').should('be.visible');

// Example: Check if an input field is disabled

cy.get('#myInput').should('be.disabled');

Cypress InfoDev
 Types of Assertions in Cypress

2. Chaining Assertions:

// Example: Check if an element has a specific class and is visible

cy.get('.my-element')
.should('have.class', 'active')
.should('be.visible');

Cypress InfoDev
 Types of Assertions in Cypress

3. Assertion on Text Content:

// Example: Verify that a paragraph contains specific text

cy.get('p').should('contain', 'Lorem ipsum');

// Example: Check if a button has the expected text

cy.get('button').should('have.text', 'Submit');

Cypress InfoDev
 Types of Assertions in Cypress

4. Assertion on Attribute Values:

// Example: Verify the value attribute of an input field

cy.get('#username').should('have.attr', 'value', 'john_doe');

// Example: Check the href attribute of a link

cy.get('a').should('have.attr', 'href', '/home');

Cypress InfoDev
 Types of Assertions in Cypress

4. Assertion on length :

// It checks the count of elements obtained from the previously chained

command

cy.get('#txt-fld').should('have.length',5)

Cypress InfoDev
 Types of Assertions in Cypress

4. Assertion on URL and Path Name :

cy.visit('http://localhost:3000/admin')
cy.location('pathname').should('eq', '/login')

Cypress InfoDev
Anything Wrong Here?

Cypress InfoDev
 Anything Wrong Here?

Cypress InfoDev
 Thank You

Cypress InfoDev