MetaMask / MetaMask/metamask-mobile

Make a modified version of `./.github/workflows/run-e2e-workflow.yml` to automate screenshot generation

Open
#20,541 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### What is this about?

In order to provide support to MetaMask, we need to automate the process of creating and maintaining a source of up-to-date product imagery. This initiative is already functional for Extension; see [the `metamask-screenshots` repo in the Consensys org](https://github.com/Consensys/metamask-screenshots).

The tooling and environment requirements for Mobile are such that following the design pattern used for Extension (in a GH Action, clone the repo, install and build, run e2e tests with screenshotting / .html generation logic, save the resulting assets) is unfeasible **outside of the context of the MetaMask Mobile repo itself.**

The essential request is to **modify [the GH Action mentioned in the title of this issue](https://github.com/MetaMask/metamask-mobile/blob/main/.github/workflows/run-e2e-workflow.yml) to create screenshots not only on "failure", but "always", and upload those artifacts to the `metamask-screenshots` repo**.

More details will be provided below.

### Scenario

_No response_

### Design

_No response_

### Technical Details

## Implementation steps:

1. @mapachurro willl create a branch in the MM Mobile repo in order to test the GHA functionality
2. Modify [this line,](https://github.com/MetaMask/metamask-mobile/blob/31826e7570a421208d8aa20a99bd1846585731ae/.github/workflows/run-e2e-workflow.yml#L204) and any others which govern the logic of Detox's screenshot production logic, to _always_ produce screenshots during tests run in the scope of this GHA.
- **Caveat:** It may be the case that Detox requires more nuanced instruction / configuration for full screenshot capabilities. Detox needs to take a screenshot not only when a new screen is loaded, but when any on-screen state changes in any way; e.g. a button is tapped and a modal appears, even if the overall screen name / hash / identifier has not changed, that modal state and any options on it need to be captured.
3. Test these changes and get Detox / the GHA executing to the level of "produces screenshots from e2e tests"
- There might not be _full coverage of all screens_ in the initail version
4. Once the GHA is at an acceptable baseline of "working", implement further jobs in _either_ the modified GHA, _or_ create a subsequent GHA that runs upon successful completion of the first, which transfers the artifacts (screenshots) to the `metamask-screenshots` repo. This is in order to avoid filling up the Mobile repo with these static assets, and from a broader perspective, in order to respect a separation of concerns; this is a delivery / business process utility, not part of the Mobile codebase itself.
- **Caveat:** This may require moving the `metamask-screenshots` repo from the Consensys org to the MetaMask org, depending on the capabilities of the GH tokens issued to transfer the assets from one repo to another. DevOps team's assistance may be required here.

cc @sethkfman 🫡

### Threat Modeling Framework

- We are working on automating the production of product imagery through GitHub Actions
- As with all GitHub Actions, there is a risk of e.g. repo secrets being exposed, and of running up a GH bill for computation time / resources
- The `metamask-screenshots` repo is currently _internal_, as it is for internal business purposes, and no need for it being public has been identified

### Acceptance Criteria

### Cases to satisfy:

1. Teams from Marketing and Customer Success can easily access a reliable, up-to-date "source of truth" for Mobile product imagery for use in websites, etc.
2. These images are produced *in all languages supported by Mobile*, enabling those public-facing resources to be internationalized
3. Specifically, we are able to update Mobile app stores with current product imagery across all officially-supported locales more easily and more often through the use of these screenshots

### Stretch goal:
4. Further enhance Technical Support and internal MetaMask QA's abilities to perform e.g. visual regression testing on nightly builds by having an easy-to-use, automatically-generated visual explorer of app UI

### Stakeholder review needed before the work gets merged

- [ ] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)

### References

kumavis' prior art on this issue, for MetaMask Extension (March 2025): https://github.com/MetaMask/metamask-extension/pull/30955

mapachurro's implementation of kumavis' modifications in the `metamask-screenshots` repo: https://github.com/Consensys/metamask-screenshots

The "screenshot explorer" app deployed from that repo via GH Pages: https://consensys.github.io/metamask-screenshots/

Contributor guide

Open the contributing guide

Research direction

Start with .github/workflows/run-e2e-workflow.yml, especially the screenshot logic at line 204, and review the linked metamask-screenshots repository and Detox behavior. Run the workflow and verify that e2e tests always produce screenshots, including changed UI states, then confirm the artifacts can be transferred to the screenshots repository.

Written by the indexing model from the issue text.

Assessment

Tech stack
github-actions, react-native
Domain
ci-cd, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.