I am a React Tech Leader with a holistic approach to crafting code. Thanks to my years of experience I build clean and maintainable software solutions for our clients. I always take ownership of the application and put extra effort to improve the UX and assumptions behind the features I implement.

Arkadiusz Machalica

I am passionate about building beautiful user experiences and finding creative ways of visualizing data. As a Client and Team Lead I implement an Agile approach to mentoring my team, ensuring our solutions remain maintainable, scalable and extensible. From a technological point of view I like challenges and reaching goals while exposing myself to new styles and frameworks.

Jarosław Kisiołek

I am an ISTQB-certified Software QA Tester with over three years of experience. My job is to support the development teams at all stages of product development, from project kick-off to testing. I enjoy taking on new challenges and finding the best project solutions with Product Owners. 

Tomasz Szyrner

[TOC]

During our monthly internal day - **Haxorz**, I recently held a workshop dedicated to **End-to-End testing using Cypress**. The workshop was mainly for internal needs, but I thought the topic was something a wider audience could appreciate as well.

I assume that you are here because you want to start or just have started a journey with End-to-End testing. I hope you will find this post useful as an introduction to Cypress Framework: what is it, when to use it and, above all, how to use it. Let’s get started.

## What is End-to-End testing?

End-to-End testing is a technique that scans the entire software ensuring that everything is working as expected and flows smoothly. It **defines system dependencies and checks for integrations**. The goal of E2E is to check the software from the user perspective to avoid malfunctions caused by a failure of any of the subsystems. To find out more about this type of software evaluation, go to the post [How To Conduct End-To-End Testing In Endtest.io?](https://selleo.com/blog/how-to-conduct-end-to-end-testing-in-endtest-io).

End-to-End tests are usually conducted at the end of the development cycle as they cover the UI and analyse whether the application is pleasant to use and the users can achieve exactly what they need to. They are also **crucial** for checking moving parts of software like servers, configuration and other external dependencies.

![Img](https://a.storyblok.com/f/86602/720x490/d860b399ae/end-to-end-testing.jpg)

## What is Cypress?

Cypress is a free, open-source **automation testing tool** created for modern web applications like React or Vue.js. Most interestingly, it is not based on Selenium and therefore works inside the browser DOM elements. What is more, it beats Selenium-based tools in terms of speed, reliability and ease of use.  
Initially, it was developed for unit testing, to be later extended for E2E automation testing.

Cypress provides a **visual interface** to highlight which tests and commands are running, passed or failed. It is helpful for testing interactive applications, allows DOM manipulation, reading and writing data into/from fields, creating redirect and submitting forms.  
The tool uses NPM for JavaScript, making it extremely easy to use with basic knowledge of JavaScript.  
With the help of Cypress, End-to-End, integration and unit tests are super easy to write and debug.

### Pros and cons of [Cypress.io](https://www.cypress.io/)

There should be no surprises that with every tool come pros and cons. Among the **advantages** of using Cypress, there are:

* high execution speed
* ability to take screenshots and videos
* easy debugging
* visualisation of the running tests and commands

![Img](https://a.storyblok.com/f/86602/720x504/49a4b74388/pros-and-cons-of-cypres-io_obszar-roboczy-1.jpg)

However, the tool has some **limitations**:

* limited browser support (Chrome and Firefox)
* only supports JavaScript
* does not support mobile or native events

Let’s now move on to End-to-End testing and briefly explain what it is all about.

<Baner name={software-development} />

## Why Cypress?

As mentioned above, Cypress is fast, reliable and easy to use. As it is highly independent, it is suitable for many projects on the web. It could be integrated into an existing project or run alongside other testing environments. The setup is easy and there are only two prerequisites to Cypress: installing Node.js and any code editor.

When talking about why Cypress is the right tool for testing it is worth mentioning its core concepts:

* **leveraging jQuery’s powerful selector engine** \- Cypress uses jQuery’s DOM querying API, which allows selecting any elements and shortens the test code. However, keep in mind Cypress is **not** like jQuery and if it will be unable to find any matching DOM elements it will automatically retry the query until the element is found or a timeout is reached.
* **asynchronous nature and relying on timeouts** \- it is crucial to understand that Cypress commands do not do anything at the moment they are invoked, but rather queue themselves to be run later. This means Cypress knows when to stop waiting on an app to get into the expected state. It will try to run the given command until it succeeds or timeouts and fails.
* **commands do not return their subjects, they yield them** \- Cypress chains commands together - with each command yielding a subject to the next command until the chain ends or an error is encountered. There is no need to use Promises directly, however, having an understanding of them can be helpful.
* **no need to assert to have a useful test** \- many commands have built-in assertions letting you perform actions like ensuring an element is visible or has a particular attribute, CSS class or state. Assertions enable you to describe the desired state of the application while Cypress will wait until the elements reach this state or fail the test. To get more info about that go to the [documentation](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Default-Assertions).

Additionally, Cypress offers a complete End-to-End testing experience with Cypress test runner and Cypress dashboard. More about that on the [official website](https://www.cypress.io/).

## Setup and configuration: Timeouts and stuff

Now that we have discussed all the for and against and got to know Cypress, it is time to start the setup and begin testing. Let’s begin with the commands.

To **install** Cypress, in the project folder run:

`npm i cypress --save-dev`

in order to **add** Cypress as a project development dependency.

And then:

`node_modules/.bin/cypress open`

to start a test manager. Cypress will **automatically** add some tests in Cypress/integration folder - remove all of them and create your own test file.

Then, inside the newly created file add an actual test case, in the `it` block write:

<Gist id="351a0cf78a3df21a415604fe570e1af8" />

If that is a bit confusing, a complete guide to Cypress testing can be found [here](https://www.valentinog.com/blog/cypress/).

Additionally, there is a git repo that contains the whole app that is tested using Cypress where you can find various practices and approaches to use when writing tests with Cypress, check out the [real-world app](https://github.com/cypress-io/cypress-realworld-app).

When Cypress is added to a project it creates a cypress.json file on its first run and that's the place where you should customize your global Cypress configuration.

<ReadMore> Read also: [How To Conduct End-To-End Testing In Endtest.io?](https://selleo.com/blog/how-to-conduct-end-to-end-testing-in-endtest-io) </ReadMore>

Let me show you some configuration options and other useful commands.

### Configuration options

* `baseUrl` \- URL used as prefix for cy.visit() or cy.request() command’s URL
* `defaultCommandTimeout` \-  time in milliseconds until default (eg. `cy.get`, `cy.contains` etc.) commands are considered timed out
* `responseTimeout` \- time in milliseconds until a response is considered timed out
* `viewportHeight/Width` \- height/width in pixels for the application viewport

Documentation - [Cypress options](https://docs.cypress.io/guides/references/configuration.html#Options)

### Navigating, getting and interacting with elements

* `cy.visit("<url>")` \- Visit a remote URL, one of the first commands in your test case
* `cy.get("<selector>")` \- Get one or more DOM elements
* `cy.contains("<text_or_regexp>")`\- Get the DOM element containing the text
* `subject.click()` \- Click a DOM element.
* `subject.type("<text_to_type>")` \- Type into a DOM element
* `subject.within(<callback>)` \- Scopes all subsequent cy commands to within this element
* `subject.then(<callback>)` \- Enables to work with the subject yielded from the previous command

### Making assertions

* with explicit subjects \- eg. `expect([]).to.be.empty`,
* with implicit subjects \- `subject.should("your_chainer_here")` \- eg. `cy.get("error").should("be.empty")` can be chained using `.and`

[List of assertions](https://docs.cypress.io/guides/references/assertions.html)

### Debugging

* `cy.pause()` \- pauses the test execution in given moment
* `cy.debug()` \- inserts  JavaScript debugger, requires Developer tools opened

## Summary

Cypress is an **amazing tool** for E2E testing, which, in my opinion, is far better than Selenium.

Because of the ease of writing tests, **high execution time and simple debugging** it is a great solution for developers with any amount of experience, especially those with JavaScript knowledge. Not to mention it is reliable and independent.

However, you should keep in mind that there are some limitations like browser compatibility and the lack of support for native events.

If you are looking for a **specialized developer or a team** not only for executing End-to-End tests but also for building a high-quality solution from start to finish, contact [Selleo](https://selleo.com/contact). Our fully-fledged teams of **experienced engineers** will be happy to help you augment your existing team or outsource the project altogether. Feel free to get in touch to get a free quote and schedule a call.

Cypress is a free, open-source automation testing tool created for modern web apps. It was developed for unit testing, to be later extended for E2E automation testing.

How To Get Started With Cypress? A Simple Guide

If you are a part of a programming world, you most definitely have heard about **end-to-end testing**. If not, let me explain, it is a software testing method that validates entire software from start to end, including its integration with external interfaces. It also validates data processing/batch from other downstream/upstream systems, which is why it is **‘end-to-end**’.

Do you want to find out more about end-to-end testing? Or are you looking for a complete guide on how to use [endtest.io](http://endtest.io/)? This article is your answer.

## What is end-to-end testing (E2E testing)? When should we conduct it?

As mentioned above, this technique tests the **entire software** ensuring the application flows and behaves as expected. E2E testing **defines system dependencies** and ensures all integrations work together. The software is evaluated from the end user’s perspective by simulating real scenarios and validating it.

End-to-end tests help to avoid the risk of system malfunctions caused by a failure of any of the subsystems. They are usually executed manually after system checkup, however, there are tools that allow automating this process.

<Baner name={qa-landing} />

### Why do we need end-to-end testing?

Software can be tested at many different levels. At the lowest one, there are **unit tests**, where programmers write a small routine to check what they are actually writing. Those routines are what builds the entire application. To examine them further, whether or not they correctly work together, we have **integration tests**, during which two or more components are used together.

**End-to-end tests cover the UI**, which is not checked by unit or integration tests. They analyse if using the software is a pleasurable experience and if users can achieve what they want to achieve.

A second reason why you should conduct E2E testing is because of the many moving parts in modern software. Servers can cause app malfunctions, the configuration has to be set up correctly and there are also external dependencies. Separate tests may not cover all of those, however, unit, integration and end-to-end tests all play an important role in software development.

## What is Endtest.io and what are its benefits?

Endtest.io is the **leading test automation vendor**. They provide businesses with a complete software platform to efficiently build automated end-to-end tests for both web and mobile applications. Thanks to Endtest, programming teams can evaluate software faster, without the necessity to write any code. It is the most efficient way to automate testing.

Traditional tests may create bottlenecks that slow down the release cycles. When researching solutions available for test automation, you may come across Selenium, which is an open-source free tool. Apart from that, Selenium does not include **video recordings of tests, integrations with Jenkins, Jira or Slack, e-mail notifications or test scheduling**. Endtest solves those issues, ensuring your application works perfectly on any machine and system, including mobile devices.

It is up to you to decide whether to create automated test cases manually or by using **Endtest Chrome Extension** - there is no need to install any further software. Endtest is easy to use and has a super intuitive UI - even junior QA Engineers are able to work with it without any previous experience. Endtest webpage is also surprisingly easy to navigate.

What is more, Endtest customer service is open for suggestions and answers super quickly. You can always contact them via email or chat and they usually respond within a few minutes. If you feel like there is a feature you would like to implement, do not hesitate to reach out to them - your opinion will surely be taken into consideration. Personally, I requested a possibility to add special characters to the names of test suites and cases and it was implemented in the following update.

![Img](https://a.storyblok.com/f/86602/699x281/50f7d08771/test-names.png)

Using Endtest is relatively cheap. You can choose to be billed monthly or annually. More information on the current prices can be found here [https://endtest.io/pricing.htm](https://endtest.io/pricing.htm).

### When can we use Endtest.io?

Endtest obviously can be used during end-to-end tests but also while running regression tests on the whole system or a single unit. **Regression testing** is defined as software testing that confirms that a recent program or code change has not affected any existing features. They are conducted when a change in code is required and you need to test whether the modified code affects any other part of the application. They are also needed when adding new features, error fixing or when addressing performance issues.

<Baner name={qa} />

### How to start end-to-end testing in Endtest.io?

For the sake of simplicity, in this article, we will tackle only web application testing. I am also assuming that you already have test cases written. Go through them in order to make sure which step should be executed after another one.

**Step 1.**

Register your account with [https://endtest.io/](https://endtest.io/) and login

**Step 2.**

Install [Endtest Chrome Extension](https://chrome.google.com/webstore/detail/endtest-codeless-automate/jbdgfkeimppmnfemmgfafiomihlibdfa)

**Step 3.**

Go to your desired webpage (I will be using [http://automationpractice.com/index.php](http://automationpractice.com/index.php) as an example) and open Endtest Chrome Extension.

![Img](https://a.storyblok.com/f/86602/640x392/5b87de521a/selleo-screen.png)

Choose *Start from here* or *Start from URL* and click *Start Recording*

![Img](https://a.storyblok.com/f/86602/370x233/b86df543e8/image6-2.png)

The tool will record your every step while following the test scenario. Keep in mind you can pause the recording anytime you want.

![Img](https://a.storyblok.com/f/86602/358x253/c0014f5c18/image1.png)

Let’s assume that your test scenario covers the navigation from the main page to the page containing evening dresses. When you click the relevant elements, Endtest records it all. If you want to record hover events, be sure to select this option in *Settings*.  
If there are test-related custom attributes in your app, remember to add them here as well:

![Img](https://a.storyblok.com/f/86602/356x637/e68395a214/image11.png)

You can also add the assertions to your test case by clicking the grey button.

Once you covered your test scenario, click again on the Endtest Chrome Extension and click the *Stop recording* button.

![Img](https://a.storyblok.com/f/86602/358x459/6f265a4e4d/image10.png)

You will be asked to provide the name of the test case you just recorded and to select a test suite or create a new one.

![Img](https://a.storyblok.com/f/86602/360x314/1d0a0a631c/image15.png)

After saving, you will be taken to the *Web Tests* page on Endtest site and your new test suite will appear on the top:

![Img](https://a.storyblok.com/f/86602/1024x242/55f90e03a9/image2-1.png)

You can run your test suite from here or go inside the test case to modify anything you would like to.

<ReadMore> Read also [Why Do We Need QA Engineers?](https://selleo.com/blog/why-do-we-need-quality-assurance-engineers) </ReadMore>

Test suite looks like this on the inside:

![Img](https://a.storyblok.com/f/86602/1024x240/a6fc463610/image3-1.png)

If you go deeper, you will be able to see all steps recorded in the relevant test case:

![Img](https://a.storyblok.com/f/86602/1024x614/fd00efd3b8/image8.png)

Endtest is using CSS selectors by default but there are also different options available in *Locate Element By* section:

![Img](https://a.storyblok.com/f/86602/170x243/d303a04fb7/image14.png)

You can also add and edit steps manually, tweak the selectors or even use such actions as *Execute Javascript* or *Send API Request*

![Img](https://a.storyblok.com/f/86602/277x430/2449b9cd7f/image7.png)

When you are ready, you can run your test suite by clicking the respective button and the test execution will start.

![Img](https://a.storyblok.com/f/86602/640x385/9a69ce85e8/image13.png)

In this step, you can also choose a Platform, Operating System, Browser etc. as well as test cases you desire to run.

After clicking the *Run* button, test execution starts:

![Img](https://a.storyblok.com/f/86602/640x382/4c238543a4/image4.png)

After the test execution is finished, it is clearly described in the window:

![Img](https://a.storyblok.com/f/86602/640x382/63a7f9b307/image5.png)

You can see the logs to check how it went or go to *Video* to watch the execution:

![Img](https://a.storyblok.com/f/86602/640x389/3ac5b8d3fe/image17.png)

Any errors or failed assertions will be highlighted in red and screenshot from error moment will be taken:

![Img](https://a.storyblok.com/f/86602/640x495/dd1307a310/image12.png)

The above error happens when we disable the recording of hover events.

## Summary

In software development, end-to-end testing is a great way to **verify if your application is working properly**, taking into account all of its components. It is a great way to check for any errors in order to avoid potential problems with your software.

Endtest is one of the easiest tools to use for E2E tests. It is incredibly **easy to use**, even for those with little to no experience in this field. Their website is easy to use and the customer service team does a great job with supporting programmers.

In Selleo, we have **solid rules** and **vast experience in testing**. If you want to work with a team that will ensure your web or mobile application works perfectly. Fill out the [contact form](https://selleo.com/contact) to get a free quote and connect with our specialists.

End-to-end testing validates data processing/batch from other downstream/upstream systems, which is why it is ‘end-to-end’.
Do you want to find out more about it? Or are you looking for a complete guide on how to use endtest.io? This article is your answer.

How To Conduct End-To-End Testing In Endtest.io?

As a developer you must have heard a lot about tests. Tests help to avoid a lot of bugs and edge cases that otherwise you would never thought of.

There are four types of tests to conduct:

* Unit Tests
* Integration tests
* E2E tests
* System tests

This article will focus on **GraphQL E2E tests**. **E2E tests** are conducted by a robot, that is mimicking user's interactions with the app. In my React Native application, I use Detox for testing selected user paths. **Detox** is a library that lets us prepare Gray Box tests.

### What is Gray Box testing?

Let’s say it’s a compromise between **Black Box and White Box testing**. Black Box tests are conducted by a person who has no knowledge about software (i.e. manual tests). White Box tests do the opposite. They are mostly done by machines, which have all the knowledge about app structure (i.e. unit tests).
E2E tests are done from the user’s point of view and not from the engineer’s perspective, however, the tester still has some idea about code. It makes E2E a good addition to your test suite.

### Setup Detox

#### Prepare your GraphQL server

This article <https://blog.swmansion.com/detox-your-graphql-74b58dca3221> helped me a lot with the initial setup of a **GraphQL server**. However, I found out that it could be explained better, especially for a less experienced [frontend developer](https://selleo.com/front-end-developers).

#### Download your GraphQL schema

We need introspected schema to run our server. There are some ways to do this, but I managed to download it with graphql command-line interface.

1. install graphql-cli via NPM

`npm install -g graphql-cli` 

2. Setup your .graphqlconfig file. 

`graphql init`

You will be asked about your api endpoint. For me it was an url to locally running API server - <http://localhost:5000/graphql>

This is how the config looks:

<Gist id="548e3b222a29706d623f69bafaa3f4e6" />

3. Download the schema from the server

* Get introspected schema

`graphql get-schema`

* Get a readable schema for future mocking 

`graphql get-schema --output schema.graphql`

After downloading the introspected schema in json, you need to flatten query results by removing the **data** attribute from the root of file. The required result is under **data** attribute.

#### Prepare local server

I used the code from the article mentioned above. It was the main source for creating my mocks, I just changed it a little bit to make it work for me.

<Gist id="989d5dc30a2166b2c2722268050c2919" />

#### Mock your data

Let’s move on to mocking. In the app, I have all the data downloaded with graphql. Unfortunately, I cannot test creation of bookings, since users (students) are not allowed to do this. The only way to perform the test is to mock the data.

<Gist id="5d4b6e0eb37f038261b19cf6267a6743" />

Here is a simplified version of the schema. Booking is the query for a single object and BookingConnectionWithCounts is for downloading a list of Bookings (the count is used for pagination in the web application).

In order to show data, we need to mock both types - one for the list and another for details. 

You must mock all scalars from your schema. You can do it globally, but keep in mind that all scalars will have the same value. For me, I wanted my booking's dates to be varied because I need to show the time range. I’m using readable scheme for mocking.

Beware of warnings. If they overlay the component that you intended for detox to click, it can expand the warning instead and your test will fail. Mock everything that is required.

#### Test it!

When all is done, we can start testing. My tests are pretty simple:

* Display bookings - checks the presence of booking in the list
* Show booking details - enters into a booking details and checks whether the Booking has English lessons defined
* Check bookings history - checks if bookings are rendered in history 

<Gist id="05f6d372e8f0d8e47e33f2544636493e" />

Tests done by a machine: <https://youtu.be/sLzNArDey3c>

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/1200x1200/39aa06ae48/app_mock.jpg)

If you need help with your development, [contact us](https://selleo.com/ruby-on-rails-expert-developers-team).

This article will focus on E2E testing. E2E tests are conducted by a robot, that is mimicking user's interactions with the app. In my React Native application, I use Detox for testing selected user paths. Detox is a library that lets us prepare Gray Box tests.

Read our articles on Selleo Blog

Business

Technology

How To Get Started With Cypress? A Simple Guide

How To Conduct End-To-End Testing In Endtest.io?

Mocking GraphQL For E2E Test Purpose

Tell us about your project