Take the ticket branches page's five screenshots automatically by zaerl · Pull Request #633 · WordPress/contributor-toolkit

zaerl · 2026-10-05T15:32:34Z

Why

Fourth part of #561. After #631 six of the guide's screenshots were still a person's to take, and five of those no script took at all: the pictures on the ticket branches page. Settings (#559) and dark mode (#560) will each change every picture in the guide again, so a picture that takes a person is one that will be stale. This takes the five automatically, on the checkout fixture of #631.

What changes

Five shots join the automatic tier, which is now twenty-six of twenty-seven:

site-with-tickets: a Core site with a ticket in hand and the card of its other tickets at the foot of the page.
ticket-list-card: that card, with a ticket linked.
ticket-list-unlinked: the same card with none linked, two tickets in it.
trunk-work-question: what the app asks when a ticket is linked over an edit on trunk.
carried-work-notice: the ticket's card after the edit came along.

Tickets the site was left with are the fixture's. A row in the list has an age ("Edited 1 day ago"), which a shot cannot give it through the app: every ticket it left would have been left just now. So for these variants the fixture makes what the app makes when a ticket is started and left with nothing done: a branch where trunk was, and the record of it (which ticket, where it branched, when it was last worked on). The hours are chosen well inside the wording they come out as, so a picture is the same at any time of day.

The checkout fixture's trunk commit is dated as the seeded sites' code is, two days back. It was dated the moment it was made, so a site's details said its code was newer than the site.

What the harness gained for them:

A wait for a button that can be pressed and not only one that is on the page. A row's buttons are disabled until a link has wholly ended.
A whole-window picture can refuse to be taken when the page has outgrown the window (site-with-tickets is taken in a window 1480 high, since its second card is at the foot of the page).

One change outside the harness: commitFiles in tests/unit/helpers/git.cjs takes a date. It is the fixture layer the tests build their repositories with; no test passes the option, and without it the command is the one it was.

Beside the images: the alt text of the five, and the sentence in CONTRIBUTING.md about which pictures need a person.

Not in this pull request:

setup-wizard, the one picture still taken by a person. It can be taken automatically too, and is the next pull request, with the removal of the live tier it leaves empty.
The guide's prose. The ticket branches page now says things beside these pictures that the pictures contradict; the list is in the review outcome.

How to test this

Platforms: macOS to reproduce the committed images; the harness is written to run on any, and I have run it on macOS only. Nothing here ships in the app.

From the repository root, on the current head, after npm ci:

npm run shots
git status --short docs/public/screenshots

The run prints twenty-six lines, each ✓ <name>.png, and exits 0. It opens the app's window fourteen times; do not type while it runs, and no browser tab opens.
On the machine and the UTC day the images were taken, git status usually shows nothing. Some runs show one or two images changed by a handful of pixels on a rounded corner (4 of the 17 runs I made today, always in a picture older than this change, 12 pixels in the one I measured); take it again and it is gone. That is more often than the one in ten Take four more of the guide's screenshots automatically, and make a retake change less #621 measured: there are more pictures to a run now.
Open ticket-list-unlinked.png: two rows, #60000 "Edited 3 hours ago" above #61002 "Edited 1 day ago", each with Continue working and Delete this ticket’s work, none greyed. carried-work-notice.png: a blue notice that 1 uncommitted change came along into #60000, and under it "You have 1 unsubmitted change for ticket #60000". site-with-tickets.png: under Details, "Trunk as of" is two days before the run, the day "Created" gives.

What must not have happened: a button in a ticket's row drawn greyed or as if the pointer were on it; anything asked of GitHub or Trac; a folder named wpct-docs-fixture or wpct-userdata-… left in the temporary directory after the run.

What I could not test: Windows. And on Windows the fixture is under the user's temporary folder, so a whole-window picture taken there would have the user's name in "Local path"; that was so before this change, and the committed pictures are taken on macOS, where the path is /tmp/wpct-docs-fixture/….

Risks and limitations

Review: 2 passes, 5 findings fixed here, 2 follow-ups taken here, 1 left. Details below.
Three of the five pictures start from a state the fixture wrote, where Take five more of the guide's screenshots automatically, on a fixture that is a real checkout #631's start from one the app made: the tickets a site was left with. The record is the app's own, key for key, and the reviewer checked it against the code that writes it; a change to what the app records for a ticket would have to be made here too.
A shared test helper changes. npm test passes, and I checked by hand that a commit made with a date carries it as author's and committer's, and that one made without is dated now.
The fixture's tickets are made up: #60000 and #61002 are not those tickets on Trac.
The guide's text beside these pictures is still the old window's.

Seeded tickets, and not tickets left through the app. Through the app the rows all read "Edited just now", in a page whose text is about coming back to a ticket days later. The age is the one thing a shot cannot make; everything else about a left ticket is a branch and three values, which is what is written.
One day and three hours, and not a week. Past a week the row gives a date, written the way the computer writes dates, which changes with the day and the machine.
A taller window for the two cards, and not a page scrolled to its foot: the picture is of a site with a ticket in hand and others below, and scrolled it would lose the ticket in hand.
The date as an option of the fixture layer's commit. The first version ran the Git binary from the harness, with the commit's identity written out again: a third way to the binary beside the app's and the tests'.

Review outcome (required — see AGENTS.md)

Pass 1: 3 [fix here] · 3 [follow-up]. Pass 2 (on the fix-up): 2 [fix here] · 0 [follow-up]. All 5 fixed, 2 follow-ups taken here, 1 left.

Both passes were made before the rebase onto #631's merge, on commits that are the same changes as these; the heads below are the ones reviewed.

Review: completed — a separate agent context, read-only; head 551457e on 91fffb0, the head Take five more of the guide's screenshots automatically, on a fixture that is a real checkout #631 merged; the five images opened and each alt text read against its picture, the seeded record compared with what linking and leaving a ticket write, every request the five flows make traced to a stand-in or to something local; ESLint run on the harness, npm test and the shots not run; 3 [fix here], 3 [follow-up].
- Fixed: the notice's picture did not wait for the line that says there is one unsubmitted change, which a read of its own brings later, and could come out without it; two pictures waited for a row's buttons to be on the page and not to be ones that can be pressed; a comment said leaving a ticket is the one thing a shot does not do through the app, where editing the checkout is another.
- Follow-ups, taken here: CONTRIBUTING.md said a running server and a real diff need a person; the checkout's trunk was dated the day of the run, newer than the site.
- Follow-up left: on Windows the fixture's path has the user's name in it. See "What I could not test".
- Listed and left for the text, in ticket-branches.md: "each row is a Continue working on #NNNNN link" and "Continue working on" twice more (it is a Continue working button); "edited 2 days ago" (capitalised, and the pictures' are a day and three hours); "Delete this ticket's" with a straight apostrophe; "came along into #62281" and "1 unsubmitted change for ticket #29798" (the pictures' ticket is #60000); and the delete question, which the app now words "Delete all work on ticket #61002?" and "This can’t be undone."
Review: completed — a second separate agent context, read-only; head c0cd36e on 91fffb0; the dated commit followed through the fixture's order and the app's reading of trunk's date, the trial click checked against how the row's buttons are disabled, the two retaken images opened; ESLint run on the harness, npm test and the shots not run; 2 [fix here], 0 [follow-up].
- Fixed: the harness dated its commit by running the Git binary itself (now an option of the fixture layer's commit); a comment said a row's buttons can be pressed after the card has read the ticket, an order the app does not promise.
- A style note, taken: one wait the trial click already does.
Since review: c0cd36e → ce66772 is those fixes, not reviewed again; it is what changes tests/unit/helpers/git.cjs. The three commits were then rebased onto Take five more of the guide's screenshots automatically, on a fixture that is a real checkout #631's merge with no conflict and are 1765fc9, 48b78ea, f56f33f. On that head: npm run lint and npm test pass, and a retake of the tier changed no image.

Implementation notes

scripts/screenshots/fixtures.cjs: OTHER_TICKET, PARKED_TICKETS; buildRepoFixture makes the branches and writes their record; the trunk commit dated FRESH.trunkDate.
scripts/screenshots/shots.cjs: waitUntilPressable, fixTheLine, askToLinkOverAnEdit; the five shots.
tests/unit/helpers/git.cjs: git and gitOk take an environment, commitFiles a date.
No app code changes, so the Electron suite, the journeys and the packaged smoke were not run.

Screenshots or recording

The images are the change: docs/public/screenshots/ in the diff, which GitHub shows before and after.

🤖 Generated with Claude Code

The last five of the guide's pictures that no script took (#561): a site with two tickets, the card of a site's other tickets with one linked and with none, the question asked when a ticket is linked over an edit on trunk, and the notice that the edit came along. The automatic tier is now twenty-six, and one picture, of a site being set up, is still a person's. They are taken on the checkout fixture. A ticket in the list has an age ("Edited 1 day ago"), which a shot cannot give it through the app: every ticket it left would have been left just now. So the tickets a site was left with are the fixture's, a branch where trunk was and the record the app writes of one, with the hours chosen well inside the wording they come out as. The picture of a site with two tickets is of a window taller than the harness opens, since the second card is at the foot of the page, and is refused if the page outgrows it. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

…xture's trunk From the review. The notice's picture waits for the line that says there is one unsubmitted change, which a read of its own brings after the link has ended and which was missing from a picture taken before it. The pictures of a ticket's row wait for its buttons to be ones that can be pressed, where they waited for them to be on the page; a trial click is the wait, and the pointer is taken away after it. The checkout fixture's trunk commit is dated as the seeded sites' code is, two days back, where it was dated the moment it was made: the site's details said its code was newer than the site, and a ticket left a day ago had branched from today's trunk. CONTRIBUTING.md said a running server and a real diff need a person to photograph. One picture does, of a site being set up. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

From the second review. The harness dated its trunk commit by running the Git binary itself, with the commit's identity written out again: a third way to the binary, beside the app's and the tests'. commitFiles takes the date instead, and adds the committer's date to the one command's environment the way git-binary.cjs has a variable added. A comment said a row's buttons can be pressed after the card has read the ticket, which the app does not promise, and one wait the trial click already does is gone. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

coderabbitai · 2026-10-05T15:33:34Z

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository: WordPress/contributor-toolkit/.coderabbit.yaml
Review profile: CHILL
Plan: Advanced
Run ID: 671a15b5-4503-4454-9b53-9ca7392870a4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

zaerl and others added 3 commits October 5, 2026 17:31

zaerl self-assigned this Oct 5, 2026

zaerl merged commit 217b120 into trunk Oct 5, 2026
10 checks passed

zaerl deleted the docs/automate-ticket-branch-screenshots branch October 5, 2026 15:44

zaerl added this to the v2.0.0 milestone Oct 7, 2026

Navigation Menu

Repository navigation

Take the ticket branches page's five screenshots automatically - #633

Take the ticket branches page's five screenshots automatically#633
zaerl merged 3 commits into
trunkfrom
docs/automate-ticket-branch-screenshots

zaerl commented Oct 5, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 5, 2026

Review skipped

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

zaerl commented Oct 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

What changes

How to test this

Risks and limitations

Related

Uh oh!

coderabbitai Bot commented Oct 5, 2026

Review skipped

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

zaerl commented Oct 5, 2026 •

edited

Loading