Software testing is a challenge for modern web apps, and at Spokeo, we wanted a more efficient approach. We were using a combination of RSpec and Selenium to test a Ruby on Rails app with React. However, the test suite was extremely slow. Continuous integration became a challenge because the tests’ long-duration runtime blocked our branch merging.
To make matters worse, triaging test case failures was time-consuming because of how stack traces were reported. Exceptions wrapped by the test libraries made it onerous to trace issues back to the source.
The testing approach was not aligned with modern web development. Our engineering team of software developers determined it was time for a change. They did some research and constructed a proposal to migrate to the Cypress testing framework and use the testing library abstraction for element selectors. They brought the idea to the broader group of tech leads and received positive feedback. Using the Spokeo tech initiative process, the plan was pitched to their manager and then the CTO, who gave the project the green light.
Who's Calling Me?
Search any phone number to learn more about the owner!
Four months later, our team is using automated software testing with Cypress for all new tests. The build process was updated to leverage the parallel test features of Cypress, and the results surprised even the team itself.
A 24-hour synchronous test suite now runs in only 40 minutes! Debugging is also much easier, given clear stack traces and other features of Cypress, such as test pause and inspection. We were able to take this opportunity to rethink the overall test approach and make our automated testing more efficient.
Challenges Using RSpec and Selenium With Ruby on Rails Apps
The application being tested was implemented using Ruby on Rails, so it initially made sense to use RSpec as the primary test tool. Selenium was also used for UI testing; however, the entire test suite ran very slowly. Each code commit resulted in a lengthy build process that significantly burdened the continuous integration server.
As a result, code merges became a pain point due to the required time investment. The number of commits stacked up quickly, and the team’s agility was impacted. Additionally, feedback from failed test cases was difficult to trace back to the point of origin, so debugging took longer than it should have.
To address these issues, the developers chose Cypress, an end-to-end Web UI test tool. Cypress is written in JavaScript, so it easily fits into the tech stack. It has libraries for dealing with the basic DOM, React, and other popular front-end frameworks. Our front-end developers were able to pick it up quickly and be productive right out of the gate. Cypress is fast, and it has great support for parallel test execution.
Debugging was much easier as stack traces were easily mapped back to the source. Cypress also includes a pause feature that lets developers inspect and debug code during the middle of a test.
Another innovative feature of Cypress that comes out of the box is snapshots. Cypress can capture the data outputs from the system as a snapshot and then leverage different algorithms to validate the results. This approach is more resilient than other test frameworks to changes in the HTML or format of the web page, which don’t affect the accuracy of the results.
Modern Software Testing Approach Achieved Using Cypress
It took approximately four months to complete the migration, in part because we simultaneously rethought our overall test approach. In addition to refactoring our test structure and libraries to use Cypress, we also created reusable helper components for common test actions such as user registration and login. The team decided to write all new tests going forward in Cypress and transition older tests over time. Keeping some of the old tests around was beneficial for use in comparisons and as a sanity check.
The timeframe for the effort was loosely defined. There was no hard deadline since this was not a top-down initiative. An efficient, modern testing approach was the goal. The team knew the benefits were well worth it, even if it required more time than anticipated.
Cypress focuses on the ability to write tests that resemble how users interact with a web page. Its test library provides more natural page and DOM queries than what traditional CSS selectors offer.
Test automation added by the team removed much of the manual work previously involved in test creation. For example, this test for disabled credit cards uses the login and time travel methods for simplicity and readability.
it(‘should display expired payment’, () => {
cy.login();
cy.timeTravel(100);
cy.disableCreditCard();
cy.triggerPayment();
cy.visit(‘/user/account’);
cy.findByText(/We\’re missing a payment/i).should(‘exist’);
});
While the web developers picked up Cypress quickly, our QA developers only knew Ruby previously. Thus, they needed to learn the tool and some JavaScript in the process. However, on the whole, the adoption of Cypress went smoothly, and we’re quite pleased with the improvements to our web application testing.
Spokeo: A Home for Creative, Passionate Software Developers
Spokeo is a forward-thinking company that values software developers and the creativity they bring to the table. The migration to the end-to-end automated Cypress software testing tool was driven entirely by the developers. Leadership listened and gave the team flexibility to make these improvements. The results exceeded even the engineering team’s vision for the effort, with the test suite now running 25x faster than it previously did.
Spokeo is a mid-size company that supports an engineering team of about 60 developers, which gives developers the security and benefits of a larger company with the feel and energy of a startup. Developers have the opportunity to work on the most important projects and priorities within the company. No one is stuck in a single part of the organization.
Developers work in cross-functional teams with representatives from each area, including product design, QA, test automation, and DevOps. These teams can tackle any task. Software engineering teams are named simply Alpha, Bravo, Charlie, etc. We also guide team members on their career paths by placing them on projects that lead to skill growth in their areas of interest.
Each software developer at Spokeo has the opportunity to make a significant impact while working on exciting new projects and technologies. If you want to jumpstart your career, check out Spokeo software developer jobs now.