Revitalizing Cypress Pipeline and Enhancing E2E Testing Confidence: This Dot Labs' Expert Solutions for a Leading Financial Software Provider
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
Lerna
GitLab
Cypress
Gherkin
GraphQL- 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.
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.
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.
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.
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.
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.
You might also like
Portfolio
Our clients are building for the future. Explore This Dot Labs' portfolio, and see how we have helped them achieve their diverse technical goals.
Process Automation and Improved Stability for ContractObserver’s Contract Analysis Site
topics covered in this case study:
This Dot collaborated with ContractObserver to provide steady site reliability improvements, deliver new features to improve the contract data pipeline for their most mission-critical service, and automate the team’s testing protocol, making it faster and less prone to performance interruptions.
Assessing core web vitals performance to improve SEO
topics covered in this case study:
Our client, a financial services platform serving nearly 2 million users daily, approached This Dot to identify and address performance issues on their Angular-built website.
Enhancing Sentry’s Suite of Debugging Tools with a Cutting Edge Replay Feature
topics covered in this case study:
Sentry’s Emerging Technologies team approached This Dot Labs to augment their team developing a new feature offering a visual replay of user interactions that would seamlessly fit in with Sentry’s portfolio of error and performance monitoring tools.
Automating Code Maintenance: This Dot Labs’ Successful Partnership with an Online Metaverse Platform
topics covered in this case study:
Our team created an automated conversion tool to detect newly released code, determine changes introduced by it, and trigger an automatic upgrade to the converted library.
- See full portfolio