Life changing ways to make use of Cypress

Crafting a good user experience story is very important. Every website should have automated E2E UI tests in place. To make a successful impact on every customer to make their life easier while browsing. Automating the E2E UI tests can be a great lifesaver in this case. E2E verifies that all application’s dependencies work correctly together, validates the business logic of an application, and can help reduce the chance of finding defects after deployment to production.

Photo by Ferenc Almasi

Why Cypress?

Cypress is a UI Test Automation Tool developed to write Javascript for authoring End-to-End tests, Integration tests, and Unit tests. While running your tests locally or in CI, Cypress provides a dashboard service that is quite handy. Build on top of the Mocha Framework.

Features of Cypress

• Cypress network control.
• API testing capabilities.
• Time Travel
• Automatic waiting
• Real-Time Reloads
• Built-in parallelization and load balancing

Supported Browsers

Most common browsers such as chrome, firefox, Electron, and Edge are supported. But browsers such as Safari and Internet Explorer are not currently supported.

Prerequisites

Install the below-mentioned packages before installing the cypress.

• Node.js
• jq

Installing Cypress

Install cypress from the npm package manager and configure using the cmd,

npm install cypress --save-dev

Running Tests

To execute tests that are written in .js file

npx cypress open

If installed using binary. from the project root directory, run

./node_modules/.bin/cypress open

Directory Structure:

Some of the widely used folder structures are listed here.

widely used folder structures with description

Directory structure differs by each project. In the end, all that matters is how efficient the code is. Here is another sample directory structure.

Sample Folder Structure for Cypress Framework

Make sure to point the package.json to pick tests from cypress/tests/ directory.

Writing a Test File

Write your tests in the specified directory under tests. These test files can have multiple test steps in each file. Similarly, these tests a particular functionality/component.

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

Test Template

Test Templates should be similar for all test cases. Adding more libraries than in tests makes it easier to utilize in other test cases. Thus Making the test steps short and easy code changes with minimal effort. Here are some sample templates,

sample test template is written in .js format

Steps to create CI Instances

1. Clone your project/tests repository
2. Install Cypress. The steps are the same as installing locally.
3. Optionally, set up your application server if needed.
4. Optionally, set environment variables.
5. Set up parallelization and run tests in parallel.
6. Generate JSON & HTML report, using mochawesome
7. Download custom reports and builds artifacts.

Github Actions Workflow

Whenever there is a new pull request, these GitHub actions workflow will also allow you to run the E2E tests every time.

.github/workflows/node.js.yml

After adding the above file see the magic on the new incoming pull request.

Limitations

1. Javascript and typescript are currently supported. Other languages are not supported yet.
2. Using multiple tabs for test execution.
3. Tests are executed one browser at a time.
4. Limited support with iframes. Cypress iframe plugin.

All tests executions take place inside a browser, which results in fast, consistent, and reliable tests results. The in-built test runner allows you to run tests directly from Cypress UI and takes screenshots our your test in case of test failures. Features provided by cypress are unique among other UI automation tools.

Introduction to Cypress | Cypress Documentation