Learn Cypress — Part 1 — Install, Run your first test, Mocha

This is a fast blog on how to learn Cypress with TypeScript for automating your website.

Here are some details that you need about Cypress directly from their website:

How to install Cypress on your PC:

• First you need to install node.js Node.js — Run JavaScript Everywhere (nodejs.org)
• I installed visual studio code (I also created a folder where I keep the Cypress project) and opened the terminal where I ran the next command npm -v

npm -v

• npm is short for node package manager ( why we installed node.js in the first place), this helps us to install/delete dependencies in our projects, in order to add dependencies we will need a file where we can save the meta data, the name of project, scripts etc.

For that we will run the command npm init (press enter to confirm the project name) and follow the next steps:

npm init

• After filling in all the info, package.json was created

Installing TypeScript:

• You will need to run the following command: npm — save-dev typescript TypeScript: How to set up TypeScript (typescriptlang.org)

npm install — save-dev typrescript

Next, how to install cypress Seamless Cypress Installation Guide | Cypress Documentation:

• Run the command npm install cypress — save-dev

Configuring cypress for E2E testing:

• First we want to run our “test”: “cypress open” inside our package.json, I changed the name to “runner”, like this:

cypress open

• In the terminal, open cypress window by writing npm run runner

npm run runner

Cypress window

Cypress added the following files to our project

Create a new spec

Since we are using typescript, we will get an error as soon as we create the new spec, we need to configure tsconfig.json

error because we use typescript

This is how we will configure it:

• add a file in the cypress folder called tsconfig.json
• add the following code to it

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Now if we re-run our npm run runner and pick E2E testing, it will work as expected:

Tip: in package.json in our “runner” if we write — e2e we don’t need to click on the option in the browser each time, like this:

“runner”: “cypress open — e2e — browser chrome”

Mocha is a feature-rich JavaScript test framework running on Node.js, making asynchronous testing simple and fun. It provides a clean interface for defining tests and supports a wide range of assertions, making it a popular choice for both front-end and back-end testing.

Basic Mocha Structure

Mocha's structure is based on two main functions: describe and it.

• describe: Used to group related tests. It describes a suite of tests.
• it: Used to define individual test cases. It contains the actual test logic.

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

Mocha Hooks Overview

Hooks in Mocha are special functions that allow you to set up preconditions and clean up after your tests. They are useful for performing common setup or teardown tasks that you need to run before or after each test or the entire test suite.

Types of Hooks

1. before: Runs once before all tests in a describe block.
2. beforeEach: Runs before each test in a describe block.
3. after: Runs once after all tests in a describe block.
4. afterEach: Runs after each test in a describe block.