Cypress is the latest testing automation system based on JavaScript. It allows teams to generate web test automation scripts.

Why Use Cypress?

Component, API, End-to-End, Visual, Accessibility, and Performance testing are all handled by a single framework.

Out-of-the-box retry capability of actions performed over elements, which reduces flaky test for Cypress.

Cypress is known for its fast execution, due to its architecture and use of Electron as a test runner. It also has a powerful and intuitive API that makes writing tests easy and efficient. Cypress is open-source and has an active community that provides support, plugins, and integrations with other tools.

Some of the benefits of using Cypress for testing include:
  • Fast test execution
  • Real-time reloading and debugging
  • Automatic waiting for elements and assertions
  • Easy setup and configuration
  • Built-in time travel debugging
  • Network traffic control and mocking

Overall, Cypress is a powerful tool for web application testing that enables you to test your application from end to end with ease and confidence.


Image Credits To(https://www.cypress.io/)


Installation Step : 

To install Cypress, you will need to have Node.js (version 12 or later) installed on your system. Once you have Node.js installed, you can follow these steps to install Cypress:

1 . Open a terminal or command prompt.

2. Navigate to your project directory where you want to install Cypress.

3. Run the following command to initialize a new Node.js project:

npm init -y

4. Run the following command to install Cypress as a dev dependency:

npm install cypress --save-dev

5. Once the installation is complete, run the following command to open the Cypress Test Runner:

npx cypress open

6. The Cypress Test Runner should open and you can start writing and running your tests.

Note: If you encounter any issues during installation, you can refer to the official Cypress documentation for troubleshooting tips and additional information.


Testing Examples : 

Before writing Any Test Cases First Create .eslintrc.json  in Cypress Folder

Add This Plugin Dependency to this file. without that you are getting errors like(ESLint: 'cy' is not defined)

{
        "extends" : [
                    "plugin: cypress/recommended"
         ]
}


1) Testing if a page loads successfully:

describe('Page load', () => { it('successfully loads', () => { cy.visit('https://www.example.com') }) })

In Cypress, the cy.visit() method is used to visit a web page in the browser. The method takes a URL string as its argument and instructs the browser to load the web page at that URL. 

Once the page has loaded, Cypress will continue to execute the remaining commands in the test.

For Testing in the local server you can use the URL: "http://localhost:3000"

2) Testing if a user can fill out a form and submit it:

describe('Form', () => { it('can be filled out and submitted', () => { cy.visit('https://www.example.com/form') cy.get('#name').type('John Doe') cy.get('#email').type('johndoe@example.com') cy.get('#message').type('This is a test message') cy.get('#submit').click() cy.url().should('contain', '/success') }) })

Here's a breakdown of the test steps:

1) The test navigates to the URL 'https://www.example.com/form' using the cy.visit() method.

cy.visit('https://www.example.com/form')

2) The test uses the cy.get() method to select the input fields for name, email, and message, and then types in some text using the cy.type() method.

cy.get('#name').type('John Doe') cy.get('#email').type('johndoe@example.com') cy.get('#message').type('This is a test message')

3) The test clicks the submit button using the cy.click() method. 

cy.get('#submit').click()

*note that Here #submit is an id of the Submit Button.

4) The test checks if the URL after submission contains the string '/success' using the cy.url() and .should() methods.

cy.url().should('contain', '/success')


Once the form is filled out and submitted, the test checks if the URL after submission contains the string '/success' using the cy.url() method and the .should() method with the argument 'contain'. 

This ensures that the user is directed to the correct page or Component after submitting the form.

The cy.get() method is used to select elements on the page using various types of selectors, such as CSS classes, IDs, and HTML tags. 

In this test case, the selectors used are '#name', '#email', '#message', and '#submit'. The cy.type() method is used to simulate user input into these fields.

3) Example of Access Button Based on The Text Written into that Button.

  Suppose We create a Button Called REGISTER

  <button> REGESTER</button>

  So Using Text we can Access that button and perform a Click on That.

  cy.contains("REGISTER").should("be.enabled").click();


For More Examples Applying Cypress to the Redux oR Any Component : 


4) Testing if an element exists on the page:

describe('Element', () => { it('has a specific element', () => { cy.visit('https://www.example.com') cy.get('.element-class').should('exist') }) })


5) Testing if an element is visible on the page:

describe('Element', () => { it('is visible', () => { cy.visit('https://www.example.com') cy.get('.element-class').should('be.visible') }) })


Thank you for Reading my Blog, I hope you are not getting any Errors, and now you can Submit your Work Before the Deadline 😉.