Use React and Cypress to Create Screenshots for Apple’s App Store
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’s listing, the first impression they get is often through the screenshots you provide. High-quality screenshots can effectively convey the value and functionality of your app, enticing users to explore further and, ideally, hit that “Download” button.
These days, most developers don’t just create plain screenshots and upload them to the App Store anymore. They enhance the screenshots by adding frames, including text to highlight the app’s benefits, and making them more visually appealing.
Creating these all-important screenshots can be a daunting task, especially if you’re striving for consistency, accuracy, and efficiency, particularly when dealing with different language versions of your app.
Normally, such screenshots are created using a graphic 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.
That’s where React and Cypress come to the rescue. If you’re familiar with Cypress, you might be thinking that I used it to test a native mobile app and capture screenshots. But, that’s not the case. Instead, I use the highly effective Fastlane solution to create screenshots itself:
For the final App store screenshots, I have created a simple React app for assembling the screenshots with frames that include textual details and promotions. This app displays various screenshots in different languages and devices. Additionally, I have implemented a Cypress test that navigates through the entire application, capturing a screenshot for each language and device version of the app.
With a config file, I can easily add new languages and devices, and then simply run the Cypress tests again to generate the new screenshots needed:
If you’d like to learn more, I’ve published the generator on GitHub:
And in case you’re curious about which app I’ve created this for, it’s for my Letter App. In summary, it’s an app for iPhone, iPad, and Mac that allows users to quickly and easily write and print professionally designed letters:
