Capture React Screenshots with routine-design
Are you comfortable using screenshots in your development workflow?
If you’re working in a large React code base, with lots of components…you probably want screenshots of individual components.
I created routine-design so developers can capture screenshots of their React components. Routine-design is easy to install in your Node.js repository. Once you set up a Google Cloud project, you can capture screenshots of individual React components and store them on the cloud.
(This story is building off 4 Secrets to Comfortably Working With Screenshots. I basically automated the code parts.)
Google Cloud
Do not save screenshot images in a repository. Git does not merge images well. Instead, store images on Google Cloud, and keep track of their information in a JSON file. Images hosted on the cloud are easy to look at, and JSON files are easy to merge.
Sign into Google Cloud Platform using a Google account. Click the “Try Free” button and follow the instructions to create a new Project. Take note of the project ID. You’ll need it later.
Once you’ve created a project, Go to IAM & admin> Service accounts
Create a service account. Name your service account by combining the word “screenshots” with the name of your repository. You do not need specify a role fro the service account. Create a JSON key.
The key is downloaded as a JSON file onto your computer. I recommend moving the JSON file out of your Downloads directory, and into a more permanent location. Now set your environment variable to point to that JSON file.
export GOOGLE_APPLICATION_CREDENTIALS="/home/user/auth.json”Once you’ve created a service account, navigate to Google Cloud Storage.
Click the button for “Create Bucket”. Name your new bucket the same as the service account, by combining the word “screenshots” with the name of your repository.
Now click on the Permissions tab. Click “Add members” and add “allUsers” as the “Storage Object Viewer”
Now anyone can see the images hosted on the cloud.
But not everyone can upload images to the cloud, only authorized users. So click “Add members” again and add the service account as the “Storage Object Creator”
That is all you need to connect your developer environment to Google Cloud. Unfortunately, you won’t know if you did it correctly until you go through the next section, which will actually upload images to Google Cloud.
Capture
First, read and follow the instructions from my previous blog post: Debug a React Component Faster with routine-design. By the end you will have a Web server which renders individual components. The rest of this blog post will explain how to automate taking screenshots of that Web server.
Screenshots work best when they are deterministic. Which is why I suggest not taking screenshots of components in the middle of an animation. My blog post about creating a RenderServer, builds on top of Create React App (CRA). But CRA has a constantly spinning logo. In order to capture a deterministic screenshot of the logo component, I suggest you remove the animation property from src/logo/index.scss.
Update your package.json with a new script that captures ./test/render/logo. The script will save the screenshot images on Google Cloud, using the project ID and storage bucket name
"scripts": { "capture:logo": "routine-design directory capture project-id my-app-screenshots ./test/render --component-directory=logo", // other scripts like // "start": "react-scripts start"},
In one tab, run npm run render. You need this RenderServer running. Otherwise there will be no screenshots to capture. In another tab, first remember to export GOOGLE_APPLICATION_CREDENTIALS, then run
npm run capture:logoNow open the test/render/logo/image.json. You should see an image URL. Open this URL, and you should see a screenshot of the Logo component. Congratulations! You’ve captured a screenshot of an individual React component.
If you have any problems with routine-design, be sure to file bugs in the GitHub repository.
Image.json
The image.json file only updates when the rendering changes. Go ahead and commit your changes, include the new test/render/logo/image.json file. Now run npm run capture:logo again. If you run git status you’ll see that the image.json file has not changed.
Make a habit of updating image.json for every git commit. Add more individual components to ./test/render as you add more features. These two habits increase coverage of your user visible output. When you go to refactor React and Sass code, use this coverage to check that you did not make any user visible changes. Just run npm run capture:foo and then git status. If the image.json does not change, you have not made a user visible change.
But if the rendering does change, then so will image.json. Update src/logo/index.scss to
.App-logo { height: 50vmin;}
Run npm run capture:logo. Then open test/render/logo/image.json and open the image URL. The logo in the screenshot should be bigger. And if you run git status again, you’ll see that image.json has changed.
If you make a habit of updating image.json for every git commit, you’ll build an accurate git history for image.json. You can look at the history of image.json to see all related Pull Requests (PRs). And remember, image.json has URLs for each image. So you can look at the exact screenshot of that component in that PR.
