Medusa

Enhancing Medusa's Next.JS Ecommerce Template: A Case Study

We recently collaborated with the headless ecommerce platform, Medusa, implementing a comprehensive End-to-End (E2E) testing suite, integrated with a new Github CI workflow, for their Next.js template. This suite, spanning over 7,000 lines of code and covering over a dozen webpages, has significantly improved the reliability of core workflows for any ecommerce site using their template. In the process, we identified and rectified several bugs, enhancing the overall user experience.

Ecommerce is a complex domain where even minor UX improvements can significantly boost revenue. For instance, a renowned UX researcher once identified friction points in the checkout process of a $25 billion American retailer in 2009, leading to a 45% increase in sales, amounting to an additional $300 million. Identifying such friction points in the baseline template is crucial for Medusa's customers who base their businesses off this template.

Medusa: Revolutionizing Ecommerce with Modularity

Medusa, a rising star in the ecommerce space, offers an open-source ecommerce platform featuring a robust modular backend and admin system. Their clientele includes industry giants like Mitsubishi, EKI, and Makro. They also provide an open-source Next.js template for budding Ecommerce stores.

Our collaboration with Medusa involved enhancing their Next.js ecommerce template by integrating a comprehensive E2E testing suite with a CI build script in Github Actions. We also identified and reported numerous bugs, thereby improving the overall functionality. Additionally, we provided detailed documentation for setting up the testing suite, facilitating a smoother onboarding process for future developers.

Developing a Comprehensive E2E Testing Suite

When we began, Medusa's ecommerce template had minimal testing—a simple 100-line test script built in Cypress covering only a handful of features. We decided to transition to Playwright due to its advantages and used it to build a comprehensive testing suite.

Our Strategy

Our greenfield project allowed us to quickly establish a comprehensive testing suite. Leveraging our expertise in Playwright and a clear architectural vision for the testing suite, we first developed the testing boilerplate for the entire project. This included creating Page Object Models (POMs) for each page and modal, integrating them with the test runner, and preparing the main codebase with unique test ids for Playwright's test runner. This approach not only made our test suites resilient to changes in the codebase and design but also familiarized us with the project's architecture and components.

After setting up the base project and testing roadmap, we began testing each workflow critical to any ecommerce site. This ranged from basic workflows like registration and authentication to more complex customer journeys like product search, cart management, checkout, and order management. This comprehensive test suite has bolstered the confidence of Medusa developers in accepting future pull requests, as it helps prevent bugs and maintain the stability of key workflows.

Identifying and Rectifying Bugs

During our journey of building the comprehensive E2E test suite, we encountered several broken functionalities and edge cases. By reporting and rectifying these bugs, we have reduced the technical issues for ecommerce sites basing their business off this project, thereby helping Medusa maintain its reputation as a technical leader for modern ecommerce stores.

Critical Bugs Identified

• Giftcard Application Issue: We found a critical bug in the checkout flow where a user could not complete the checkout if they applied a giftcard with no remaining balance. This issue was promptly fixed.
• Address Syncing Inconsistencies: We identified a UX issue with managing addresses within a registered user's account. If a customer wanted to use their default billing address during checkout, they had to refill the form, as it wasn't automatically populated or available in a dropdown menu.
• Logout Issue: We discovered an issue where logging out in certain cases returned a 404 page, causing confusion for users. This issue was resolved by using local state within the browser instead of storing state in a response header.

Streamlining Medusa's Workflow for the Next.js Template

The final major contribution was the creation of a CI workflow with GitHub actions. Now, whenever a contributor submits a PR, the entire suite of tests is run, saving hours of manual labor and significantly increasing productivity.

This automated testing layer, combined with our comprehensive test suite, provides thousands of lines of code worth of checks that would otherwise have to be done manually for every PR. This not only saves precious developer time but also ensures the stability and reliability of the platform.

Amplifying Medusa’s Business Impact Through Our Collaboration

Our partnership with Medusa has significantly enhanced the development workflow for their ecommerce template by adhering to best practices in testing. They now have robust assurances for future code modifications, redesigns, and other project changes. Moreover, as this is a template, ecommerce stores utilizing it can have stronger confidence that their modifications will function as expected. This leads to improved customer experiences for all the ecommerce brands involved, thereby amplifying Medusa’s business impact.