Cypress Web Testing Framework: Getting Started

Cypress has been developed to introduce developers to software testing and built for the modern web and to address the pain points of QA teams while testing a web application.

It supports different types of testing:

• End-to-End Testing
• Unit Testing
• Integration Testing
• API Testing

If you’re new to Cypress web testing, let’s learn about the features with the help of examples and scenarios for running your first Cypress test.

What is Cypress Framework?

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

Features of Cypress Framework

Two primary features explicitly developed for Cypress web testing 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 will rerun it. So, it automatically triggers the run next to the browser as soon as the tester saves their file. Hence, there is no need to trigger the run manually.
• It waits to execute the test command automatically and enacts assertions before executing the following 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.
• Cypress browser support includes Google Chrome, Mozilla Firefox, and Microsoft Edge.

Advantages of Cypress Web Testing

• 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 for effective debugging.
• Automatically reloads Test Runner once the changes have been made to the test.

Installing Cypress Web 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.

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 Web 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 as commands under the Page Object File methods.
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

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 immediately being displayed in the Integration Test list.

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.

Remember that Cypress testing must be executed on real browsers for accurate results. Start running web automation 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