Create an E2E testing library with scalability in mind.

E2E discovery

In recent months, Empathy has notably deepened the quality and trust that are built into our software. In terms of quality, we’re improving processes such as code reviews or pair programming. And regarding trust, we’re applying even more importance to techniques such as TDD and enforcing tests for pull requests which solve bugs.

Among the products that Empathy offers to its clients, our web application known as Empathy X (built using technologies such as TypeScript and Vue) stands out. Its main advantage is its high extensibility and configurability, which allow us to adapt to the needs of each client in a unique way in each case. But its greatest virtue may also be its worst deterrent in terms of testing.

Due to the high number of clients, it would be really easy to accumulate hundreds of repeated tests in each client, and it’s not viable to maintain this volume of code. Because of that, we concluded that we need to create something reusable but at the same time really configurable in order to add and remove tests individually, to adapt the tests to each client.

E2E testing library

Once we’d defined what we need, the next step was to think about what we want to test — and more important, how are we going to do it.

What to test? In our main Empathy X components, such as Banners, Facets, History, NQs, Partials, Popular Searches, Promoted, RTs, Results, Search, Sort, Spellcheck and Tagging, we want to ensure the functionality of actions such as filtering, scrolling, searching, sorting or tagging.

How to do it? We’re relying on a well-established JavaScript library with a large community. Its main feature is its extensibility which fits perfectly with the paradigm of our library. The syntax for the tests is quite simple, as you can see below (following the BDD paradigm). You can find more information here if you wish to learn more.

const devices = [
{screen: 'Mobile', size: 'iphone-6'},
{screen: 'Tablet', size: 'ipad-2'},
{screen: 'Desktop', size: 'macbook-13'}
context('Banner should appears on ', () => {
devices.forEach(device => {
it(`${ device.screen } screen`, () => {
cy.visit('?q=' + Cypress.env('banner'));

One of the nicest things about Cypress is the ability to run each test in different devices in a really easy way and with a few lines of code. Also, as you can see, the way to interact with the page is really nice through methods like visit, get or click.

Finally, the assertion part is quite similar to alternatives in the Unit Tests ecosystem, such as Jest, Mocha or Chai. If you want to learn more about this. please take a look here.

How does it work?

The implementation of our library is really straightforward: It works as a container with the set of tests that we previously defined, nothing more, nothing less.

The interesting part of this approach is the ability to add this library as an npm dependency, and out of the box you’ll have hundreds more tests ready to use. And if in the future more tests are added to the library, we only have to upload the new library version to the client!

The extensibility of Cypress allow us to change the default location of the tests and refer to the library folder inside the node_modules folder. The same logic applies if we want to disable or replace one specific test by just pointing to our library folder.

From the configuration point of view, it will only be necessary to modify a couple of files:

  • empathy.json: Empathy X library configuration for existing tests.
  • local.json: Client configuration for new tests.
Library architecture

In these configuration files we will define our environment variables (mainly the terms that we are going to use to search) and the tests that we want to disable/replace. As you can see, the goal is to make this process as easy and quick as possible.

Real example

After all this explanation, we now see a real implementation of our library in one of our main clients; indeed, the process is really short and simple.

First of all we need to add our npm library:

npm install @empathy/empathy-x-cypress --save-dev

Once we have installed the library we should add the configuration files, adapt them to our client and finally open Cypress to be able to run the tests with the following:

npm run cypress:open
Cypress application window

Once we have the Cypress application open, we simply click on “Run all specs” to run all the available tests. One more window will open to the right of your screen with the list of tests which are running; at the left of each test, you can see a color indicator: green when the test passes and red if something went wrong.

As you might be thinking right now, having a well-defined and large suite of tests gives us confidence to apply changes faster and more safely without having regression problems. Now we’re able to add more tests to the library in order to cover more components’ functionality and instantly run them in all of our clients.

Hope you enjoyed this post! And please don’t hesitate to reach us if you have questions!

Helping brands provide irresistible search.

Helping brands provide irresistible search. Pairing software with interfaces to combine function and beauty in one. From mere results to meaningful relations and engaging interactions.

Pedro López Mareque

Written by

🖥 Software Developer 🤘🏼 Vim addict 🤘🏼

Helping brands provide irresistible search. Pairing software with interfaces to combine function and beauty in one. From mere results to meaningful relations and engaging interactions.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store