End-to-End Testing with Cypress using Cucumber precprocessor
INTRODUCTION
Cypress is a next generation front end testing
tool built for the modern web. It is written
in JavaScript. As of this writing, it has over 19.3K Stars
on Github and is used by organizations such as NASA and DHL. With help of
Cypress End to End test , integration and unit tests are easy to write and
debug.
Cypress consists of
a free, open source, locally installed Test
Runner and a Dashboard Service for recording your tests.
ARCHITECHTURE
Most testing tools (like
Selenium) operate by running outside of the browser and executing remote
commands across the network. But the Cypress engine directly operates inside
the browser. It enables Cypress to listen and modify the browser behavior
at run time by manipulating DOM and altering Network requests and responses on
the fly.
It open doors to new kind of
testing along with ultimate control over your application (front and back).
Behind Cypress is a Node server process. Cypress and the Node 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 for automation
tasks. This makes performing tasks such as taking
screenshots, recording videos, general file system operations and network operations possible.
Cypress Browser Support: Canary, Chrome, Electron(Default),
Chromium, Mozilla Firefox browsers (beta support) and Microsoft Edge
(Chromium-based) browsers.
HOW CYPRESS IS DIFFERENT?
There is multiple uniqueness, which makes Cypress one of
the quickly adaptable choices for Web automation. Few of them are:
●
It delivers fast, consistent, and reliable test execution compared
to other automation tools because of its architectural design.
●
Flake Resistant – Cypress automatically
waits for commands and assertions before moving on. No more async
issues.
●
Ability to test edge test cases by mocking the server response.
(Network Requests)
●
Debuggability – It takes snapshots as your tests run. We can hover
over each command in the Command
Log to accurately see what happened at each step.
●
View videos of the execution of your entire tests when running from
the Cypress Dashboard.
In addition to these, it has changed the way how the test automation framework development used to happen before its introduction. The below image depicts it very beautifully:
That said, of course, there are some drawbacks, and some of them are
notable, so it would be remiss not to list them here.
●
It is relatively naive, and
it does not have the vast community that Selenium does. But in recent years, it
has gained momentum, and the Cypress community is increasing at a great
pace.
●
As stated earlier, it’s JavaScript or bust. You will not be able to
write cypress tests in the old static languages such as C# and Java. On the
contrary, as these days, JavaScript is one of the biggest buzzwords for
frontend developments, using the same language for test automation bridges the
gap between the developers and the QAs.
●
Because it runs inside the browser, there is no support for multiple browser tabs or
popups. You cannot use Cypress to drive two browsers instances at the
same time.
●
Before Cypress 4.0.0, it used to support only Chrome and Electron.
Cypress 4.0.0 includes support for Mozilla Firefox browsers
(beta support) and Microsoft Edge (Chromium-based) browsers, which is a
big step forward for Cross Browser Testing in Cypress.
●
No shadow DOM support. You can imagine the shadow DOM as a “DOM
within a DOM.” It is its own isolated DOM tree with its elements and styles,
completely isolated from the original DOM. Also, even Selenium does not provide
explicit support for working with Shadow DOM elements.
●
It doesn’t support native mobile apps, but it does intend to support mobileweb browsers in the
future.
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.
BDD CUCUMBER INTRO &
FEATURES
What
is Behavior Driven Development?
Behavioural Driven Development (BDD) is an Agile Software Development process
that has evolved from TDD (Test Driven
Development). It differs by being written
in a shared language, which improves communication between the tech and
non-tech teams and stakeholders and also encourages the collaboration between
different roles within the same team. In BDD, the only difference is that tests
are more end user-focused. That includes user journeys based on the system’s
behavior and uses the English level syntax to documenting the test cases. The
figure gives a basic overview of the steps involved in the BDD process.
One of the essential advantages of
using BDD is that we use a
common language(known as “Gherkin”)
to write the test cases. It explains how the application behaves so that all
the stakeholders involved can easily understand it. It follows the
“Given-When-Then” structure, as shown below:
Given a particular scenario or
precondition
When an action takes place
Then this should be the outcome.
What is Cucumber?
Cucumber is one of Gherkin based tool which
supports and helps in Behavior
Driven Development (BDD). This tool offers the capability to write our
tests in a syntax similar to English. The below figure shows the essential
components of a Cucumber based automation framework:
Where,
●
Feature File is the entry point to the Cucumber tests of your framework. It is
a file where you will write your tests or acceptance criteria in Descriptive
Gherkin language (Like English). A feature file can include one or many
scenarios that are in the form of Given-When-Then format.
●
Step
Definition is a
small piece of code with a design pattern attached to it. An annotation
followed by the pattern that is mentioned in the feature file links the Step
Definition to all the matching Steps.
Cucumber
will execute the code when it sees a Gherkin Step mentioned in the feature
file. Cucumber finds the corresponding
Step Definition file with the help of the Glue code that we mention in Cucumber
Options.
INSTALLING CYPRESS
Pre-requisites
We have specific pre-requisites before we start Cypress Installation
:
● Install Node JS: As we know that Node.js is a JavaScript runtime environment and Cypress being a Node-based application, the first step in the journey of Cypress will be to install and set up Node.js.
●
Install Visual Studio Code: We have used Visual
Studio Code Editor, which is a lightweight but powerful source code editor and
comes with inbuilt support for JavaScript
How to Install Cypress?
●
Download using npm: Use below command to
download Cypress using the node
package manager. Moreover, we have to execute this command in the same
directory, which means inside the
Project folder itself that we mentioned while doing npm init above.
●
Make sure that you have already run npm
init or have a node_modules folder or package.json file in the root of your
project to ensure cypress is installed in the correct directory.
npm install cypress --save-dev
INTEGRATION WITH CUCUMBER
PREPROCESSOR-
The first step in the integration of Cucumber
with Cypress is installing the dependency of Cucumber preprocessor in the
framework. For installing the Cucumber-preprocessor
node module for Cypress, we can use the following command:
npm install --save-dev cypress-cucumber-preprocessor
When we execute this command, it will produce
the sample output, as shown below:
Now, once the Cucumber-preprocessor
installation is successful, the next step is to make some configuration
changes, so as Cypress can
start using the Cucumber and enables users to write BDD tests
HOW TO CONFIGURE CUCUMBER WITH CYPRESS?
To enable usage of Cucumber in the Cypress automation framework, we need to make some configurations in 3 files as shown in the below screenshot.
1. The first file (shown by marker 1) is the “index.js” file under the plugins folder. We need to make the following changes in the “index.js” file, which exports Cucumber as a module and make it accessible in other Cypress files.
2. The next set of configuration changes are in the “cypress.json” file(shown by marker 2). The changes here specify that Cypress should only consider those as test files, which end with extension as “.feature or .features,” which are the extensions for the Cucumber feature files. Specify the below configuration in the “cypress.json” file:
3. The last file which needs to be updated is the “package.json” file(shown by marker 3). Here we need to specify the configuration that non-global step definitions are allowed, which means that step definitions can exist in sub-folders as well. Add the following code at the end of the package.json file just after the devDependencies section.
This was all about installing cypress with cucumber preprocessor. We will see our first test in the next part of this blog.
Check out Real time Automation Interview Questions on JAVA.
Check out Real time Automation Interview Questions on Selenium.
Comments
Post a Comment