Cypress Framework — Beginner Guide

Cypress Framework -Beginner Guide

If you are fresher wondering where to begin with cypress tests, this is for you. Let’s get familiarise with the cypress framework, before writing cypress tests. In this blog we are going to cover:

1. Cypress Folder Structure
2. Cypress Runner
3. Cypress Commands
4. Element Selectors
5. Cypress Assertions

1. Cypress Folder Structure

Let’s look at the folder structure of cypress. The general structure of a Cypress project as you install it, as follows.

1. Cypress

The main directory for all Cypress-related files.

2. Fixtures

Contains test data in the form of JSON files. These files can be used to mock API responses or provide data for your tests.

3. Integration

This folder contains your test files (also known as spec files). This is where you’ll write tests that interact with your application through a browser.

4. Plugins

This folder is used to extend or modify the internal behavior of Cypress. You can use plugins to customize how Cypress works.

5. Support

This folder contains files that run before and after each test file. Contains reusable behavior or custom commands that can be used across your tests.

• commands.js : A file to define custom commands.
• index.js : A file that runs before every single spec file and is a great place to put global configuration and behavior modifications.

6. Cypress.json

The main configuration file for Cypress. This JSON file is used to set various options, such as baseUrl, integrationFolder, etc.

7. Package.json

The file that manages the dependencies and scripts for your project. When you install Cypress, it gets added as a dependency here.

2. Cypress Runner

Cypress runner is a test runner for the Cypress testing framework. It provides a graphical user interface (GUI) and a command line interface (CLI) for running Cypress tests in a browser environment.

The Cypress runner allows developers to run and debug their tests in real time, view the results, and interact with their application as if they were a real user. It also provides features such as test reordering, parallelisation, and test recording.

3. Cypress Commands

Cypress comes with an in-built set of commands to interact with the web page, perform actions, and make assertions.

There are there types of cypress commands.

1. Parent commands
2. Child commands
3. Dual commands

Parent commands

Parent commands begin with a new chain of cypress commands.

• cy.visit(): Navigate to a specific URL in your application.
• cy.get(): Retrieves an element or a set of elements from the DOM.
• cy.contains(): Retrieves a set of elements that contain a specific text content.

Child commands

Child commands are always chained off of a parent command or another child command.

• .find(selector): Gets descendant DOM elements of the selector.
• .click(): Clicks on a DOM element.
• .type(text): Types into a DOM element.

Dual commands

Dual commands can act as either a parent command or a child command. They can start a new chain or be chained off of an existing command.

• cy.contains(text): Finds a DOM element containing the specified text.
• cy.screenshot(): Takes a screenshot of the current viewport or a specified element.

- Key Features of Cypress Commands -

• Chain-able Syntax:

Cypress commands are designed to be chained, which improves readability and maintainability.

• Built-in Assertions:

Many Cypress commands come with built-in assertions, which makes the test code more concise.

• Custom Commands:

You can define your own custom commands to encapsulate reusable logic, making your tests more reusable.

• Automatic Waiting:

Cypress automatically waits for commands and assertions to complete before moving on to the next command. This eliminates the need for explicit waits or sleep commands in most cases.

• Retry Logic:

Cypress commands automatically retry until they succeed or a timeout is reached. This is particularly useful for elements that may not be immediately available or for asynchronous operations.

4. Element Selectors

Element selectors in Cypress are used to identify and interact with elements on a web page during tests. Using the right selectors is a must for writing robust and maintainable tests.

Cypress supports a variety of selector strategies, allowing you to target elements in multiple ways.

Types of Element Selectors

1. CSS Selectors
2. Attribute Selectors
3. Text Selectors
4. XPath Selectors
5. Custom Commands

5. Assertions in Cypress

Assertions in Cypress are used to verify that the application is behaving as expected.

Types of Assertions

1. Implicit Assertions
2. Explicit Assertions

They help ensure that elements are present, have the correct properties, and that actions produce the expected results.

Eg:

• should(‘be.visible’): Asserts that the element is visible.
• should(‘contain’, text): Asserts that element contains the specified text.
• should(‘be.disabled’): Asserts that the element is disabled.

If you like this article, please show your support clicking the clap button below and follow for more. Thank you! 😊👍