What is Cypress Automation?

Cypress is a contemporary border front end testing businesses which is web based. It allows software developers and QA testers to create quick, high quality, and maintainable tests with a click of a button. The unique sold by it is that it provides extensive functionality right away – web and API testing, web and mobile automation, etc, even for the most common automation challenges.

Let’s dig in some more and understand all the main propositions of this Cypress automation.

Why Use Cypress?

Cypress offers several features that make it a popular choice for automation testing:

1. Fast and Reliable: Cypress operates directly in the browser, interacting with the DOM in real time. This ensures that your tests are executed quickly and accurately.
2. Full-stack Test Runner: You can test not only your front-end but also APIs, databases, and more, all from one tool.
3. Developer-Friendly: Cypress is written in JavaScript, which makes it easy to integrate into most web development workflows. If you’re comfortable with JavaScript, Cypress will feel natural.

Preparing to Use Cypress

Before diving into Cypress, you should have some basic knowledge of:

• HTML, CSS, and JavaScript: Understanding the structure of web pages and the language of the web is crucial.
• Web Development Frameworks: If your project uses frameworks like React, Angular, or Vue, it helps to know how these work under the hood.
• API Basics: Since Cypress can test APIs, understanding what an API is and how HTTP requests and responses work is helpful.
• Version Control: Tools like Git are commonly used with Cypress for managing code versions and collaborating with teams.

Once you’ve got these basics down, you’re ready to move on to setting up Cypress.

How to Set Up Cypress

Setting up Cypress is straightforward. Here’s a step-by-step guide:

1. Install Node.js: Cypress is a Node.js-based tool, so you need to install Node.js first if you don’t have it.
2. Create a New Project Folder: Open your terminal and create a folder for your Cypress tests.

3. Initialize the Project: Use npm (Node Package Manager) to initialize the project.

4. Install Cypress: Use the following command to install Cypress.

5. Open Cypress: Once Cypress is installed, you can open it using the following command:

6. Run Tests: You can now start writing and running tests in Cypress. By default, Cypress provides some example tests that you can try out.

Cypress Web Automation Testing

Cypress excels in web automation testing, offering several features to simplify browser interaction. It’s capable of:

• Simulating user interactions: You can test how your application reacts to clicks, typing, form submissions, and other user actions.
• Assertions: With Cypress, you can assert specific conditions, such as whether a button is visible, a URL is correct, or the page contains certain text.
• Handling dynamic content: Cypress can automatically wait for elements to load, avoiding the need for manual waits like sleep().

For example, Here’s a detailed Web UI test for a login page:

describe('Login Page Test', () => {
  it('should allow the user to log in successfully', () => {
    // Visit the login page
    cy.visit('https://example.com/login');
    
    // Enter valid login credentials
    cy.get('#username').type('testuser');
    cy.get('#password').type('password123');
    
    // Submit the form
    cy.get('form').submit();
    
    // Verify that the user is redirected to the dashboard
    cy.url().should('include', '/dashboard');
    
    // Verify that the greeting message is displayed
    cy.get('.greeting').should('contain', 'Welcome, testuser');
  });
  
  it('should show an error for invalid credentials', () => {
    cy.visit('https://example.com/login');
    cy.get('#username').type('wronguser');
    cy.get('#password').type('wrongpassword');
    cy.get('form').submit();
    cy.get('.error-message').should('be.visible').and('contain', 'Invalid credentials');
  });
});        

This test case covers both successful and failed login attempts, checking for URL changes and error messages.

Cypress API Testing

In addition to web testing, Cypress can handle API testing. This is useful for verifying that your APIs are working as expected. Cypress provides commands like cy.request() to interact with APIs.

For instance, a simple API test might look like this:

describe('API Testing', () => {
  it('should fetch the user data successfully', () => {
    cy.request('GET', 'https://jsonplaceholder.typicode.com/users/1')
      .then((response) => {
        // Verify the status code is 200
        expect(response.status).to.eq(200);
        
        // Verify the response body
        expect(response.body).to.have.property('id', 1);
        expect(response.body).to.have.property('name', 'Leanne Graham');
      });
  });
  
  it('should return a 404 for a non-existent user', () => {
    cy.request({
      method: 'GET',
      url: 'https://jsonplaceholder.typicode.com/users/9999',
      failOnStatusCode: false
    }).then((response) => {
      // Verify the status code is 404
      expect(response.status).to.eq(404);
    });
  });
});        

This test makes a GET request to an API endpoint and checks whether the status code of the response is 200, indicating success.

Cypress Mobile Testing

While Cypress doesn’t natively support mobile app testing like Appium does, you can still simulate mobile testingscenarios by using browser developer tools to emulate mobile devices. This allows you to test how your web application behaves on smaller screens, such as smartphones and tablets.

For example, you can set the viewport size in Cypress to simulate a mobile device:

describe('Mobile View Test', () => {
  beforeEach(() => {
    // Set viewport to simulate an iPhone 6/7/8
    cy.viewport('iphone-11');
  });

  it('should display the mobile menu on small screens', () => {
    // Visit the homepage
    cy.visit('https://example.com');
    
    // Check if the mobile menu button is visible
    cy.get('.mobile-menu-button').should('be.visible');
    
    // Simulate a click on the mobile menu button
    cy.get('.mobile-menu-button').click();
    
    // Verify the mobile menu appears
    cy.get('.mobile-menu').should('be.visible');
  });
  
  it('should not display the mobile menu on desktop', () => {
    // Reset viewport to desktop
    cy.viewport(1280, 720);
    
    cy.visit('https://example.com');
    
    // Mobile menu should not be visible on larger screens
    cy.get('.mobile-menu-button').should('not.exist');
  });
});        

In this case, we test how the web application behaves on mobile screens by simulating an iPhone 11 and verifying that the mobile menu is visible and functional.