Getting Started with Cypress

Cypress is a modern end-to-end testing framework designed to provide an easy and reliable way to test your web applications. In this tutorial, we’ll cover the basics of Cypress and how to get started with writing tests. We’ll go through installation, creating test files, writing tests, and running them.

Prerequisites

• Basic understanding of JavaScript
• Node.js installed on your machine (Cypress requires Node.js to run)

Installation

First, you’ll need to initialize a new Node.js project if you don’t already have one. Open your terminal and run:

mkdir my-cypress-project
cd my-cypress-project
npm init -y

Next, install Cypress as a development dependency:

npm install cypress --save-dev

This will install Cypress locally to your project.

Opening Cypress

Once installed, you can open the Cypress Test Runner by running:

npx cypress open

This command will open the Cypress Test Runner window. If it’s your first time running Cypress, it will scaffold some example test files and folders.

Writing Your First Test

Let’s create a simple test to visit a website and verify its title.

Step 1: Create a Test File

Inside the cypress/integration directory, create a new file called first_test.spec.js.

Step 2: Write the Test

Open first_test.spec.js and add the following code:

describe('My First Test', () => {
  it('Visits the example website', () => {
    cy.visit('https://example.com');
    cy.title().should('include', 'Example Domain');
  });
});

Here’s what this test does:

• describe is used to group test cases.
• it is a test case. In this case, it visits https://example.com and asserts that the title should include ‘Example Domain’.

Step 3: Run the Test

Go back to the Cypress Test Runner and you should see first_test.spec.js listed. Click on it to run the test. You should see a browser open, navigate to https://example.com, and then the test should pass.

More Cypress Commands

Cypress provides a wide range of commands to interact with your application and make assertions. Here are a few more examples:

Interacting with Elements

it('Clicks a button', () => {
  cy.visit('https://example.com');
  cy.get('button').click();
});

Making Assertions

it('Asserts text content', () => {
  cy.visit('https://example.com');
  cy.contains('h1', 'Welcome').should('be.visible');
});

it('Asserts input field is empty', () => {
  cy.visit('https://example.com');
  cy.get('input').should('have.value', '');
});

Working with APIs

Cypress can also make API requests in your tests:

it('Makes an API request', () => {
  cy.request('https://api.example.com/users').then((response) => {
    expect(response.status).to.eq(200);
    expect(response.body).to.have.length(5);
  });
});

Organizing Tests

As your test suite grows, you can organize your tests into folders and subfolders. For example:

cypress
  ├── fixtures
  ├── integration
  │   ├── login
  │   │   ├── login.spec.js
  │   │   └── forgot_password.spec.js
  │   └── checkout
  │       ├── cart.spec.js
  │       └── payment.spec.js
  ├── plugins
  └── support

This structure helps maintain a clean and organized testing suite.

Running Tests

You can run Cypress tests via the Test Runner or from the command line. To run tests from the command line and generate reports:

# Run tests headlessly and generate reports
npx cypress run --headless --browser chrome

This command runs Cypress tests in headless mode (without a graphical interface) using the Chrome browser.

Conclusion

This tutorial covers the basics of Cypress, from installation to writing tests and running them. Cypress provides a powerful and intuitive way to create end-to-end tests for your web applications, helping you ensure the quality and reliability of your codebase. Explore more features and commands in the Cypress documentation to further enhance your testing suite.