Skip to content

Revitalizing Cypress Pipeline and Enhancing E2E Testing Confidence: This Dot Labs' Expert Solutions for a Leading Financial Software Provider

E2ECypress TrainingDocumentation

Overview

This Dot Labs was hired to revive, stabilize, and modernize an abandoned suite of Cypress tests, with the goal of getting 25 individual tests running in their pipeline in under 20 minutes with a consistent pass rate near 100%. In addition, we were tasked with training the engineering team on how to write better Cypress tests and teach them industry best practices related to Cypress testing.

Our team provided an array of services, including adding dependency caching, turning on tests, modernizing existing scripts, conducting training sessions, generating documentation, and conducting a Cypress project audit.

Through our efforts, we were able to increase stakeholder confidence in E2E testing and enable different groups of developers to take ownership of specific sections of an application without jeopardizing others' work.


Services Provided

  • Added dependency caching for the overall pipeline
  • Turned tests on & modernized existing scripts
  • Conducted 2 Live training days & recorded these training sessions
  • Conducted Cypress training office hours 2-3 times per week for 3 weeks
  • Generated documentation in Confluence, distilling lessons learned, best practices, and discoveries for shared learning
  • Successfully merged 31 scenarios running, and passing consistently in the pipeline, an additional 18 being stress tested, for a total of 49
  • Conducted a Cypress project audit, including a tagging merge request
  • Created tagging spreadsheets and corresponding pipeline runs
  • Generated bash script proof of concept for tagged runs

Tech-stack

Angular LogoAngular
Lerna LogoLerna
GitLab LogoGitLab
Cypress LogoCypress
Gherkin LogoGherkin
GraphQL LogoGraphQL
  • Angular: Core customer facing application portal for both users, vendors, and administrators. Supporting multiple roles on login.
  • Monorepo / Lerna: Large monolithic application with dozens of packages from other teams throughout the organization.
  • Gitlab Runners: Used to run automated testing, linting, deployments, etc based on pull request actions and mergers. Cypress testing ran on any pull request and required passing before being able to merge.
  • Cypress: Run End to End tests extensively covering user actions from login, to uploading files, and filtering reports. Cypress dashboard used to keep and log historical records of passing, failed, and flaky tests.
  • Gherkin Syntax: Using readable Gherkin syntax to make testing stories clear and concise to the business and stakeholders.
  • GraphQL: Internal GraphQL API where used on a live staging environment and extensively stubbed to ensure testing path was isolated to only desired changes.
  • REST API: Internal REST API where used on a live staging environment and extensively stubbed to ensure testing path was isolated to only desired changes.

This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.

We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.

Incremenetal Refactoring Client Logo

The client is a leading provider of cloud-based software that simplifies, digitizes, and automates back-office financial processes for small and mid-sized businesses.

Faster pipeline runs promote increased productivity for developer teams

By adding dependency caching, our team reduced the client's previous eight minute install to just two minutes, representing a 75% reduction. In addition, our team performed various GitLab optimizations to optimize the application performance, and further improve pipeline runs. This enables more productive hours for the development team, allowing engineers to write code instead of waiting on a slow CI/CD process to complete upon commit pushes. Of course, developers save on raw time, but also preserve their workflows and context to promote momentum as they work.

cypress-tests

Instilling confidence in E2E testing

By creating a pipeline with passing tests, our team was able to increase stakeholder confidence in the fact that existing code is only merged with new, stable code that will not produce additional work later. This has been instrumental to shifting the organization toward full E2E code coverage.

Cypress - confidence in e2e testing

Promoting Longevity and Adoption with Training and Documentation

Our team conducted two Cypress training days for developers which were recorded for those not in attendance, but also so that developers could reference and utilize. Not simply general trainings on Cypress, these live trainings were tailored specifically for those working with our client's systems.

In order to further cement the concepts discussed in our trainings, we offered office hours for three weeks, allowing developers to ask questions about their unique challenges, and dive deeper into concepts that were covered in the original trainings.

Going further, we leveraged the value of the time and resources our client invested by creating strong Confluence documentation to distill best practices and lessons covered during our trainings and consulting work, and provide a troubleshooting guide for when the development team encounters problems with testing.

Cypress wait-until

Showcasing best practices with a set of passing scenarios

Many of the challenges faced on our initial set of tests will likely pose recurring challenges in the future. Therefore, our team created a set of passing scenarios that developers can use as a reference point for future testing work, expediting the process of writing and modifying future tests.

Promoting collaboration through a new tagging system

To enable different groups of developers to take ownership of specific sections of an application without jeopardizing others' work, we created a tagging system. Doing this also provided a simple way for teams to run chosen sections of the application's tests by utilizing the tagging system we established.

Cypress git-commits

Creating a proof of concept for customized scripts

As part of our tagging system work, we created a proof of concept for customized scripts that could be modified as needed to run all or specified portions of the tests. This tool promotes the efficient gathering of relevant test run data to make intelligent decisions on where to focus efforts, as well as output the results of current efforts as it relates to the E2E Cypress test suite.

Summary

Our team's experience in modern web best practices, combined with our deep expertise in Cypress testing, enabled us to revive, stabilize, and modernize our client's abandoned suite of Cypress tests.By adding dependency caching, turning on tests, modernizing existing scripts, conducting training sessions, and generating documentation, we were able to increase stakeholder confidence in E2E testing and enable the client's development team to take ownership of specific sections of an application without jeopardizing others' work.Our services resulted in faster pipeline runs, increased productivity for the development team, and a significant improvement in E2E testing confidence. If you're looking to improve your web development practices, including Cypress testing, our team of skilled developers can provide the expert guidance and solutions you need. Don't hesitate to contact us to see how we can help you achieve your full potential.

Let's see how This Dot can help you

Are you looking for a development consulting firm that can provide staff augmentation, architectural guidance, and consulting to your company? Look no further than This Dot Labs. Our team of experienced developers and managers can help you implement and teach modern web best practices, and deliver your projects on time and within budget. Contact us today to learn more about our services and how we can help you achieve your development goals.