Cypress is most often compared to Selenium; however Cypress is both fundamentally and architecturally different. Cypress is not constrained by the same restrictions as Selenium.

This enables you to write faster, easier and more reliable tests.

Who uses Cypress?

Our users are typically developers or QA engineers building web applications using modern JavaScript frameworks.

Cypress enables you to write all types of tests:

End-to-end tests
Integration tests
Unit tests

Cypress can test anything that runs in a browser.

7 ways Cypress is different:

1

Cypress does not use Selenium.

Most end-to-end testing tools are Selenium-based, which is why they all share the same problems. To make Cypress different, we built a new architecture from the ground up. Whereas Selenium executes remote commands through the network, Cypress runs in the same run-loop as your application.

2 Cypress focuses on doing end-to-end testing REALLY well.

Cypress is not a general automation framework, nor is it a unit testing framework for your back end services. There are already great tools out there that do that. Rather, we specialize in one thing - creating a great experience while you write end to end tests for your web applications.

3 Cypress works on any front-end framework or website.

Cypress tests anything that runs in a web browser. All of the architecture surrounding Cypress is built to handle modern JavaScript frameworks especially well. We have hundreds of projects using the latest React, Angular, Vue, Elm, etc. frameworks. Cypress also works equally well on older server rendered pages or applications.

4 Cypress tests are only written in JavaScript.

While you can compile down to JavaScript from any other language, ultimately the test code is executed inside the browser itself. There are no language or driver bindings - there is and will only ever be just JavaScript.

5 Cypress is all in one.

Writing end-to-end tests takes a lot of different tools to work together. With Cypress you get multiple tools in one. There is no need to install 10 separate tools and libraries to get your test suite set up. We have taken some of the best-in-class tools you are likely already familiar with and made them all work together seamlessly.

6. Cypress is for developers and QA engineers.

One of our goals was to make test-driven development a reality for end-to-end testing. Cypress is at its best when you use it as you build your application. We give you the power to code as fast as possible.

7.Cypress runs much, much faster.

These architectural improvements unlock the ability to do TDD with full end-to-end tests for the very first time. Cypress has been built so that testing and development can happen simultaneously. You can develop faster while driving the entire dev process with tests because: you can see your application; you still have access to the developer tools; and changes are reflected in real time. The end result is that you will have developed more, your code will be better, and it will be completely tested. If you opt for our Dashboard Service, parallelization and automated load balancing will further supercharge your test speeds.

Key Differences

The architecture is completely different. architecture is completely different.

Most testing tools operate by running outside of the browser and executing remote commands across the network. Cypress is the exact opposite. Cypress is executed in the same run loop as your application. Behind Cypress is a Node.js server process. Cypress and the Node.js process constantly communicate, synchronize, and perform tasks on behalf of each other. Having access to both parts (front and back) gives us the ability to respond to your application's events in real time, while at the same time work outside of the browser for tasks that require a higher privilege.

Cypress also operates at the network layer by reading and altering web traffic on the fly. This enables Cypress to not only modify everything coming in and out of the browser, but also to change code that may interfere with its ability to automate the browser.

Cypress ultimately controls the entire automation process from top to bottom, which puts it in the unique position of being able to understand everything happening in and outside of the browser. This means Cypress is capable of delivering more consistent results than any other testing tool.
Because Cypress is installed locally on your machine, it can additionally tap into the operating system itself for automation tasks. This makes performing tasks such as taking screenshots, recording videos, general file system operations and network operations possible.

Cypress has native access to everything.

Because Cypress operates within your application, that means it has native access to every single object. Whether it is the window, the document, a DOM element, your application instance, a function, a timer, a service worker, or anything else - you have access to it in Cypress. There is no object serialization, there is no over-the-wire protocol - you have access to everything at your fingertips.

A

whole new kind of testing is possible.

Having ultimate control over your application, the network traffic, and native access to every host object unlocks a new way of testing that has never been possible before. Instead of being 'locked out' of your application and not being able to easily control it - Cypress instead lets you alter any aspect of how your application works. Instead of incredibly slow and expensive tests such as creating the state required for a given situation - you can simply create these states artificially like you do in an unit test. For instance you can:

Stub the browser or your applications functions and force them to behave as needed in your test case.

Expose data stores (like in Redux) so you can programmatically alter the state of your application directly from your test code.

Test edge cases like 'empty views' by forcing your server to send empty responses.

Test how your application responds to errors on your server by modifying response status codes to be 500.

Modify DOM elements directly - like forcing hidden elements to be shown.

Use 3rd party plugins programmatically. Instead of fussing with complex UI widgets like multi selects, autocompletes, drop downs, tree views or calendars, just call methods directly from your test code to control them.

Prevent Google Analytics from loading before any of your application code executes when testing.

Get synchronous notifications whenever your application transitions to a new page or when it begins to unload.

Control time by moving forward or backward so that timers or polls automatically fire without having to wait for the required time in your tests.

Add your own event listeners to respond to your application. You could update your application code to behave differently when under tests in Cypress. You can control websocket messages from within Cypress, conditionally load 3rd party scripts, or call functions directly on your application.

You can programmatically take shortcuts.

Trying to test hard to reach areas of your application? Don't like the side effects an action creates? Tired of repeating the same repetitive and slow actions over and over again? You can simply skip them all. Cypress prevents you from being forced to always 'act like a user' to generate the state of a given situation. With Cypress you can programmatically interact and control your application. You no longer have to use your UI to build up state!

That means you no longer have to visit a login page, type in a username and password and wait for the page to load and/or redirect. Cypress gives you the ability to take shortcuts and programmatically log in. With commands like cy.request(), you can send HTTP requests directly, yet have those requests synchronized with the browser. Cookies are automatically sent and applied back. Worried about CORS? Don't be, it's completely bypassed. The power to choose when to test like a user and when to skip slow and repetitive parts is yours.

Cypress is not flak

y

Cypress knows and understands everything that happens in your application synchronously. It's notified the moment the page loads, the moment the page unloads. It's impossible for Cypress to miss elements when it fires events. Cypress even knows how fast an element is animating and will wait for it to stop! Additionally, it automatically waits for elements to become visible, to become enabled, and to stop being covered. When pages begin to transition, Cypress will pause command execution until the following page is fully loaded. You can even tell Cypress to wait on specific network requests to finish.

Cypress executes the vast majority of its commands inside the browser, so there is no network lag. Commands execute and drive your application as fast as its capable of rendering. To deal with modern JavaScript frameworks with complex UI's, you use assertions to tell Cypress what the desired state of your application is. Cypress will automatically wait for your application to reach this state before moving on. You are completely insulated from fussing with manual waits or retries. Cypress automatically waits for elements to exist and will never yield you stale elements that have been detached from the DOM.

Debuggability i

s first class.

Above all else Cypress has been built for usability. There are hundreds of custom error messages describing the exact reason Cypress failed your test. There is a rich UI which visually shows you the command execution, assertions, network requests, spies, stubs, page loads, or URL changes. Cypress takes snapshots of your application and enables you to time travel back to the state it was in when commands ran. You can use the Dev Tools while your tests run, you can see every console message, every network request. You can inspect elements, and you can even use debugger statements in your spec code or your application code. There is no fidelity loss - you can use all the tools you're already comfortable with. This enables you to test and develop all at the same time. If you’re using the Dashboard, you have access to even more detailed insights on your tests’ performance, helping you to optimize your runs, and ship faster with more confidence.

Features

Cypress comes fully baked, batteries included. Here is a list of things it can do that no other testing framework can:

Time Travel: Cypress takes snapshots as your tests run. Hover over commands in the Command Log to see exactly what happened at each step.
Debuggability: Stop guessing why your tests are failing. Debug directly from familiar tools like Developer Tools. Our readable errors and stack traces make debugging lightning fast.
Automatic Waiting: Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
Spies, Stubs, and Clocks: Verify and control the behavior of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.
Network Traffic Control: Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.
Consistent Results: Our architecture doesn’t use Selenium or WebDriver. Say hello to fast, consistent and reliable tests that are flake-free.
Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
Cross browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally and optimally in a Continuous Integration pipeline.

Difference Between Selenium and Cypress:

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 tests.

In this blog we are going to cover:

Cypress Folder Structure
Cypress Runner
Cypress Commands
Element Selectors
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.

my-cypress-project/
├── cypress/
│ ├── fixtures/
│ │ └── example.json
│ ├── integration/
│ │ └── examples/
│ │ └── actions.spec.js
│ ├── plugins/
│ │ └── index.js
│ ├── support/
│ │ ├── commands.js
│ │ └── index.js
├── cypress.config.json
├── package.json
└── package-lock.json

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.config.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 package. json file is the heart of any Node project. It defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package. When you install Cypress, it gets added as a dependency here.

8. Package-lock.json

Package-lock. json goes a step further by resolving and documenting the precise dependencies, sub-dependencies, and installation paths for accurate reproducibility.

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.

Parent commands
Child commands
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

CSS Selectors
Attribute Selectors
Text Selectors
XPath Selectors
Custom Commands

5. Assertions in Cypress

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

Types of Assertions

Implicit Assertions
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.

==================================================

Ramesh Insights In Automation

Automation QA Testing Course Content

Cypress