End to End Testing, or UI testing is one the many approaches for testing a web application.An end to end test is supposed to check whether a web application works as expected or not, by testing the so called user flow.
Is End to End Testing important? Yes it is. But nobody likes E2E tests. They can be slow, cumbersome and expensive to write.
On the other hand testing gives you confidence. Would you ship a broken product to your users on purpose?Enter Cypress: a Javascript End to End testing framework. It will make your life easier
What is Cypress?
- It is a next-generation front end/UI testing tool constructed for the modern web and it is very popular for Web integration and End to End UI test automation.
- Cypress is a JavaScript End to End testing framework.
- It is built on Node.js and comes packaged as a npm module. As its basis is Node.js, it uses JavaScript for writing tests
- Cypress uses Mocha testing framework and Chai assertion library in its framework.
Cypress enables you to write all types of tests:
- End-to-end tests
- Integration tests
- Unit tests
The most important part of it, it doesn’t build on Selenium WebDriver. Cypress is fundamentally and architecturally different than Selenium.
Selenium is made up of bindings, or libraries, and the WebDriver. All those components help test engineers when controlling the browsers. These two components work through the JSON network. But Cypress uses its own DOM manipulation strategy. There’s no network communication or what so ever.
Early release of cypress only support chrome browser only but now its support also firefox , edge from 4.0.0 onwards release.
Who uses Cypress?
Our users are typically developers or QA engineers building web applications using modern JavaScript frameworks.Cypress is more front end developer centric tool.Cypress can test anything that runs in a browser.
What operating systems Cypress support?
You can install Cypress on Mac, Linux, and Windows. For additional information, please see our System requirements.
Cypress Architecture
Why to use Cypress?
- Simpler installation process: All the drivers and dependencies are automatically installed with cypress
- Much Much Faster: This in-browser execution is at the basis of the speed of Cypress testing
- Parallel Execution: Cypress can run recorded tests in parallel across multiple machines by CI integration
- GUI: Cypress provides you the GUI tool to view/execute your tests, view your configuration, and view the tests executed from dashboards
- Interactive Test Runner: Test Runner automatically logs all the actions with each action as a snapshot of the DOM
- Time Travel: Experience a real interactive page at that point of execution through screenshots of each page at the time of its action
- Automatic Wait: Cypress automatically waits for the existence of an element before performing an action on it. Also, it doesn’t result in exceptions like stale element that have been detached from the DOM.
- Built in server mocking: Cypress has built in feature to stub network requests
- Cypress Dashboard: It gives you a summary and insights about your tests executed across CI/CD tools. The dashboard is just like any other dashboard provided by CI/CD tools, which gives you logs and execution details of your tests.
- Cypress Plugins – More than UI Testing : Cypress is not just a UI testing tool, Cypress also has a plugin ecosystem where you can integrate any plugins provided by Cypress or create your plugin and extend the behavior of Cypress
- Cross browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron)
- Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
- No more Flaky Tests: Cypress is very good at handling flakiness, it adds the default timeout (defaultCommandTimeout) before any command is performed and this is done using its algorithm to identify if the element is ready to perform actions.
Cypress vs. Selenium
- Cypress tests are written only with JavaScript. Selenium has bindings for major programming languages including Java, Perl, PHP, Python, Ruby, and C#
- Multiple tabs automation is not supported in cypress as it runs inside the browser. Selenium has capability to handle multiple tabs.
- Stubbing a request is an inbuilt feature in Cypress. Whereas selenium requires a separate server to perform the action
- Cypress uses Mocha as unit testing framework for the specs whereas with selenium we can write the specs/tests with number of unit test frameworks (Mocha JS, Jest, Jasmine, Karma)
- Screenshots and reports are saved implicitly for each page actions in cypress. Selenium requires us to code explicitly to generate reports and screenshots
- Cypress run inside the browser while selenium code run outside of browser. The code you write in your Cypress test scripts does not run outside of the browser, like in WebDriver. It runs inside the browser. It is the browser that is executing your test code.
- Cypress is fast as compare to selenium as it runs the code inside the browser.
Prerequisite
User must have node js installed on the system if not then install from here.Node js installation includes npm ,check that npm package manager must also installed on the system.
Installing Cypress
To start off create a new folder, I called mine cypress-tutorial, move into it an initialize a new JavaScript project:
mkdir cypress-tutorial && cd $_
npm init -y
Inside this folder create two new files. An HTML document in index.html for sample application.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Cypress tutorial for beginners</title>
</head>
<body>
<main>
<form>
<div>
<label for="name">Name</label>
<input type="name" required name="name" id="name" />
</div>
<div>
<label for="email">Email</label>
<input type="email" required name="email" id="email" />
</div>
<div>
<label for="message">Your message</label>
<textarea id="message" name="message" required></textarea>
</div>
<div>
<button type="submit">SEND</button>
</div>
</form>
</main>
</body>
<script src="form.js"></script>
</html>
It is an HTML form with a bunch on inputs and a textarea. Next up create a JavaScript file in form.js with a minimal logic for handling form submission:
const form = document.forms[0];
form.addEventListener("submit", event => {
event.preventDefault();
});
To install Cypress, still in the project folder, run:
npm i cypress --save-dev
Give it a minute (it needs to download the binary) and then run below command to open cypress:
node_modules/.bin/cypress open
OR
npx cypress open
Cypress will start for the first time and a bunch of new folder will appear in your project. You can remove the example folder, but look a moment into it because there are some nice examples.
Start the Application
To serve the project on the local machine make sure to have a newer version of Node.js installed and then run:
npx serve
This will spin a development server at http://localhost:5000/. Head over the link and you should see our form:
serve is a nice NPM package for development. And now time to write our first test!
Writing First test in Cypress
Create a new file in cypress/integration/form.spec.js and write your first block:
describe("Form test", () => {
//
});
describe is a Cypress method (borrowed from Mocha) for containing one or more related tests. Every time you start writing a new suite of tests for a functionality wrap it in a describe block.
As you can see it takes two arguments: a string for describing the test suite and a callback function for wrapping the actual test.
Next up we’re going to meet another function called it which is the actual test block:
describe("Form test", () => {
it("Can fill the form", () => {
//
});
});
If you know already Jest you may recall that it takes it or test interchangeably. That’s not the case with Cypress. it is the only accepted block.
And now time for a smoke test! In the it block write:
describe("Form test", () => {
it("Can fill the form", () => {
cy.visit("/");
cy.get("form");
});
});
Here cy is Cypress itself and visit is a Cypress method for browsing to a given path.
get instead is a method for selecting elements in the page. With this code we tell Cypress “go grab the form in the page”.
For more please visit
Configuring Cypress
To streamline things a bit we’re going to configure Cypress. To begin with open up package.json and create a script named e2e pointing to the Cypress binary:
"scripts": {
"e2e": "cypress open"
},
Next up open cypress.json and configure the base url:
{
"baseUrl": "http://localhost:5000"
}
With this option we tell Cypress to visit our development url. (5000 is the default port for the serve package).
And now we’re ready to launch your first test!
Running Cypress Test
Ready? With the development server still running in a terminal:
npx serve
open up another terminal and run:
npm run e2e
You should see Cypress opening a browser and going through the page:
That’s your first test passing! Both visit and get are Cypress commands which act also as implicit assertions, that is, if the element is in the page Cypress will consider the test passed.
Cypress Limitation
- JavaScript Only: Cypress tests are written only with JavaScript. No more language choice.
- Mocha Only: Mocha is the testing framework that you write your tests with
References:
https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
https://www.valentinog.com/blog/cypress/
Categories: Cypress
