chore(e2e): auto-generate README demo GIF via Playwright - #574
Open
Gudsfile wants to merge 2 commits into
Open
Conversation
Gudsfile
added
documentation
|
Gudsfile
force-pushed
the
chore/206-auto-generate-readme-gif
branch
2 times, most recently
from
July 28, 2026 19:10
52ccb87 to
ffe9a4d
Compare
Gudsfile
force-pushed
the
chore/206-auto-generate-readme-gif
branch
from
July 28, 2026 20:05
ffe9a4d to
6fb576d
Compare
Gudsfile
marked this pull request as ready for review
July 28, 2026 20:07
Gudsfile
force-pushed
the
chore/206-auto-generate-readme-gif
branch
from
July 28, 2026 21:02
6fb576d to
13d78b4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
1️⃣ First
🔇 Problem
The demo GIF in the README was a hand-made recording. It could not be refreshed as the interface evolved, so it slowly drifted out of sync with the real app.
Closes #206.
🎹 Proposal
The demo GIF is now reproducible from the app itself. A Playwright script drives the real application against the deterministic e2e dataset: it uploads the fixed synthetic streaming history, browses the Simple view (year filter, cards) and switches to the Lab view, recording the whole session as video. The recording is then converted to an optimized GIF with
ffmpeg, and shrunk further withgifsiclewhen it is available.The output is written to the existing README image path (
.github/img/tracksy_demo.gif), so the README itself needs no change and the GIF can be regenerated whenever the interface changes.It runs as a single command,
moon run e2e:generate-readme-gif, which startsapp:devand regenerates the deterministic dataset automatically (same pattern as the existing e2e tasks). The regenerated GIF is included in this PR.🎶 Comments
Dependencies:
ffmpegis required (video → GIF).gifsicleis optional and only used to shrink the result further; the task warns and continues if it is missing.Server warm-up: the script pre-loads the app in a throwaway browser context before recording, so the cold Vite compilation of the DuckDB/arrow island does not appear as a blank frame in the GIF.
Deferred — CI automation: the issue also mentions regenerating the GIF automatically on merge to
main. That is intentionally left as a follow-up. A robust auto-commit workflow (installing browsers + ffmpeg, running the flow, committing the binary back) adds non-trivial maintenance and failure surface; shipping the reproducible command first keeps this PR focused and safe. Regenerating locally with one command already solves the drift problem. Aworkflow_dispatchjob can be layered on later.🎤 Test
moon run e2e:install-browsers # first time only moon run e2e:generate-readme-gifProduces
.github/img/tracksy_demo.gif(~3.1 MB, 640×400, ~14 s). Ran end-to-end locally; the GIF shows the upload → Simple view → Lab view flow.