Use React and Cypress to create screenshots for the Apple App Store | by David Ubelacker | September 2023

In today’s digital age, a visually compelling presence in the Apple App Store can be the difference between obscurity and success. When potential users stumble upon your app listing, the first impression they have often comes from the screenshots you provide. High-quality screenshots can effectively convey the value and functionality of your app, enticing users to explore further and, ideally, click the “Download” button.

These days, most developers are no longer content with creating simple screenshots and uploading them to the App Store. They enhance screenshots by adding frames, including text, to highlight the benefits of the app and make them more visually appealing.

Creating those all-important screenshots can be a daunting task, especially if you’re looking for consistency, accuracy, and efficiency, especially when using different language versions of your app.

Normally, these screenshots are created using a graphics tool like Figma. However, as a software developer, I know how to create web applications, but I find the process of creating and maintaining screenshots for different languages ​​and devices in Figma to be tedious and time-consuming.

This is where React and Cypress come to the rescue. If you’re familiar with Cypress, you might think that I used it to test a native mobile app and capture screenshots. But this is not the case. Instead, I use the very efficient Fastlane solution to create screenshots itself:

For the final App Store screenshots, I created a simple React app to stitch the screenshots together with frames containing textual details and promotions. This app displays various screenshots in different languages ​​and devices. Additionally, I implemented a Cypress test that iterates through the entire app, capturing a screenshot for each language and device version of the app.