Add a script to conveniently compare screenshots on this site#2136
Open
dscho wants to merge 11 commits intogit:gh-pagesfrom
Open
Add a script to conveniently compare screenshots on this site#2136dscho wants to merge 11 commits intogit:gh-pagesfrom
dscho wants to merge 11 commits intogit:gh-pagesfrom
Conversation
This is a script (developed using Claude Opus' assistance) which uses Playwright to generate before/after screenshots. Its functionality is quite basic for now. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
Thanks, Claude Opus! Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
Extract the duplicated screenshot logic into a takeScreenshot() function to prepare for adding more screenshot options. Assisted-by: Claude Opus 4.5 Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
This allows clipping the screenshots to a specified region using the ImageMagick-style geometry format WxH+X+Y. The viewport is automatically expanded to accommodate the clip region, and the output now includes both the clip dimensions and the full page dimensions. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
When a path to a git-scm.com worktree is given instead of a URL, the script now automatically builds the site with Hugo and starts a local server to serve it. The server is torn down immediately after taking the screenshot. Due to indentation changes, this commit is best viewed with `-w`. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
Allow specifying a specific page to navigate to when using a worktree by appending a colon and the page path, e.g. /path/to/worktree:/docs/git-config Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
Allow specifying a commit to checkout before building by appending @commit to the worktree path, e.g. .@Head~2 or /path/to/worktree@main. The original branch or detached HEAD state is restored after taking the screenshot. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
Treat @{u} as equivalent to @@{u} since refs cannot start with a
curly brace. This allows conveniently comparing the upstream branch
against the current worktree.
Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
When the first argument specifies a page path (either via URL or worktree:/path syntax), the second argument will automatically use the same page path if none is specified. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
After taking screenshots, output an HTML table template that can be copied into a PR comment. The absolute paths serve as placeholders that can be selected and replaced by uploading the images. The paths are placed on their own lines so that users can easily triple-click to select the entire path, copy it, and then paste the uploaded image URL in its place. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
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.
Changes
Context
In PRs like #2133, it is good to accompany the code changes and the explanation (including rationale!) with a before/after comparison. This is oddly involved at the moment!
Historically, I used to whip out my trusty interactive 🪟ShiftS screenshot shortcut, and kind of aimed to catch the same areas before and after making my change. Then, I pasted them into the PR description and surrounded them by Markdown table markup. Quite tedious, if I'm honest!
So here's a script that automates a lot of that. It can even be used to re-build the site locally from two given revisions, and then take snapshots of those pages, using Playwright. It also allows to clip the areas to capture via specifying pixel values, which is admittedly not that convenient, but I couldn't find a better way.
The output is a copy/paste'able bit of Markdown/HTML with the images' absolute paths inserted: There is no API to upload images to GitHub PRs, and therefore they have to be uploaded manually. At least this way, the user can copy the entire Markdown, paste it into the PR description editor, then cut the first path to the clipboard, click the "Paste, drop, or click to add files" button below the editor, paste the path, then repeat with the second path.
This is precisely what I did over in #2133, with the tell-tale
<!-- Generated by 'node compare-screenshots.js --clip=256x256+900+0 https://git-scm.com/about https://dscho.github.io/git-scm.com/about' -->comment in the PR body (can be seen here: https://api.github.com/repos/git/git-scm.com/pulls/2133).