Home Guide Cypress Framework Tutorial: How to Get Started

Cypress Framework Tutorial: How to Get Started

By Neha Vaidya, Community Contributor -

Table of Contents

What is Cypress Framework?

Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.

Two primary features developed specifically for Cypress framework are:

  • Automatic waiting – Cypress waits for the elements to become visible, the animation to complete,DOM to load, the XHR and AJAX calls to be finished, etc. Hence, there is no need for implicit and explicit waits to be defined.
  • Real-Time Reloads – Cypress is intelligent enough to know that after saving a test file (xyz_spec.js file), the tester is going to run it again. So, it automatically triggers the run next to the browser as soon as the tester saves their file. Hence, there is no need to manually trigger the run.

Features of Cypress Framework

  • It waits to execute the test command automatically and enacts assertions before executing the next commands to be run.
  • It captures screenshots during test case execution to help with debugging.
  • It debugs test execution more efficiently since it provides the interactive test execution with Test Runner and logs.
  • Because of architectural design differences from other test frameworks, it provides users with faster and more reliable test execution.

Installation of Cypress Testing Framework

Cypress can be installed using Npm package manager as shown below:

npm install cypress --save-dev

This command will download and configure Cypress on the system.


Read more: Tutorial on Cypress Installation


Components of Cypress Framework

The following components play a part while executing particular test cases:

  • Spec File: Contains the It(){} blocks where test execution begins. Every spec file has one describe {} block and in which different it{} blocks are contained.
  • Page Object File: Lists the methods that contain tests’ business logic. These methods comprise the actual Cypress commands to interact with the real application.
  • Page Selector File: Contains the actual locators of UI elements in a real application.
  • Constants File: Used to hold any constants used throughout test files.

Now let’s take a look at the workflow of the Cypress Testing Framework.

Workflow

  1. Open the application to write the test case.
  2. Identify the locators/selectors required for the particular flow of that test. Add those to the Page Selector file.
  3. Add test steps in Cypress syntax in the form of commands under methods in the Page Object File.
  4. Invoke the page object method in the actual Spec File.
  5. There are numerous ways to execute Cypress tests. If it is executed as part of the project structure, one can use the ng tool:
    1. Execute the test suite with ng e2e command.
    2. For executing a specific test, run: ng e2e projectName –spec=Spec File Path

Advantages of Cypress Framework

  • Quick, easy setup and execution of tests.
  • Writing time for tests is lower compared to other frameworks.
  • It can be integrated with any CI tool equipped for headless execution with command-line options.
  • It captures screenshots of test execution automatically in case of test failure. This is helpful to diagnose bugs and debug.
  • Automatically reloads Test Runner once the changes have been made to the test.

Run Cypress Tests on Cloud for Free

How to run your first Cypress Test with example?

1. As mentioned earlier, npm has been used to install Cypress. Consequently, it has now been installed to the ./node_modules directory, with its binary executable accessible from ./node_modules/.bin.

 2. Now, open Cypress from the project root via one of the following ways:

The long way with the full path

./node_modules/.bin/cypress open

Or with the shortcut using npm bin

$(npm bin)/cypress open

3. Adding npm scripts

It is easier to add Cypress commands to the scripts field in the package.json file:

{
"scripts": {
"cypress:open": "cypress open"
}
}

Now invoke the command from the project root with:

npm run cypress:open

Or

Also, use npx to invoke the command as shown below:

npx cypress open

4. Once Cypress is open, write the script and work on the test case:

  • Create a ex_spec.js file.
  • Watch Cypress update the list of specs.
  • Launch the Cypress Test Runner.

5. Create a new file in the cypress/create folder:

touch {your_project}/cypress/integration/ex_spec.js

6. Once the file has been created, one should see the Cypress Test Runner being immediately displayed in the list of Integration Tests.

7. Open an IDE and add the code below to the ex_spec.js test file:

describe('First Test', () => {
it('Welcome!', () => {
expect(true).to.equal(true)
})
})

8. Once this file is saved, the user should see the browser reload.

And that is how a user can run their first Cypress script.

Bear in mind that Cypress testing must be executed on real browsers for accurate results. Start running tests on 30+ versions of the latest browsers across Windows and macOS with BrowserStack. Use instant, hassle-free parallelization to get faster results without compromising on accuracy. Detect bugs before users do by testing software in real user conditions with BrowserStack.

Try Cypress Testing for Free

Tags
Automation Testing Cypress

Featured Articles

Cypress vs Selenium: Key Differences

Getting Started with Cypress Installation for Test Automation

Software Testing Strategies and Approaches

BrowserStack Logo Run Cypress Tests on 30+ Browser Versions Contact us Get Started Free