Comparison modes and keyboard shortcuts
The build review page shows one screenshot at a time next to its baseline. This page describes the five comparison modes and the keys that move you through a review without the mouse. Review visual changes covers what to decide.
Comparison modes
Switch modes with the buttons above the image, or press 1 to 5. Hover over a button to see its key.
| Mode | Key | What you see | Use it to |
|---|---|---|---|
| Side by Side | 1 | Baseline on the left and Candidate on the right. Zooming or panning one moves both. | Compare layout and content at a glance. |
| Overlay | 2 | Both images on one canvas, split by a divider you drag. The baseline is on the left of the divider and the candidate on the right. | Find where an edge or a line of text moved. |
| Diff | 3 | The candidate with changed pixels highlighted on top. Drag the Opacity slider to fade the highlight. | See exactly which pixels changed, including small ones. |
| Blink | 4 | The baseline and the candidate alternating about twice a second. Hold Space to show the baseline. | Spot a shift of a few pixels that’s hard to see side by side. |
| 3-Up | 5 | Baseline, Current and Diff in three panes. | Check the change and its highlight in one view. |
The review page opens in Side by Side. Your choice lasts while you move between screenshots, and resets when you reload the page. Drawing ignore regions switches to Diff.
A New or Removed screenshot has only one image, so only Diff is available and the other buttons are disabled. Diff shows the one image without a highlight.
To zoom, use these keys in any mode:
| Key | Zoom |
|---|---|
f | Fit the whole image on screen |
w | Fill the width |
h | Fill the height |
0 | 100% zoom |
Ctrl + arrow keys | Scroll the image |
Keyboard shortcuts
Press ? on the build review page to open Keyboard Shortcuts. A few entries depend on what you’re doing, such as Space in Blink or Delete while you edit ignore regions. Press ? again or Esc to close it.
Shortcuts don’t work while you’re typing in a text field, such as a rejection comment.
| Key | Action |
|---|---|
j or ↓ | Next screenshot. When snapshots have several viewports, next snapshot name. |
k or ↑ | Previous screenshot, or previous snapshot name |
] / [ | Next / previous viewport of the same snapshot |
. / , | Next / previous browser of the same snapshot |
a | Approve the screenshot |
x | Reject the screenshot |
u | Change the decision |
Shift + n | Approve every New screenshot |
Shift + a | Approve every Changed screenshot |
Shift + Enter | Approve every New, Changed and Removed screenshot that’s waiting |
1 to 5 | Switch comparison mode |
p | Open or close the performance tab |
y | Open or close the Accessibility tab |
c | Open or close the Console tab. Console results don’t show in the review page yet, so the tab doesn’t appear. |
Enter | Open the Finish review dialog once the review can be finished, or confirm the dialog that’s open |
? | Show the keyboard shortcuts |
Esc | Close a dialog |
The three bulk keys open a confirmation that counts what they’ll approve. Shift + Enter opens the same one as Approve all, and it lists a Removed count when removals are included. Check that count before you select Confirm approve: approving a removal retires its baseline when you finish (see Completeness and removals).
The performance tab only exists when the screenshot has performance results, and the Accessibility tab when the build has accessibility results. Performance and console and Accessibility checks explain them.
While you edit ignore regions, select a region and press Delete or Backspace to remove it. See Flaky snapshots.
Command palette
Press Ctrl + K (⌘ + K on a Mac), or select Search in the header on a wide screen, to open the command palette. Type to filter, use the arrow keys to move and Enter to run a command.
It offers:
- Go to Projects, Go to Account, and one Open project: command per project, followed by its name.
- Inside a project: Go to Builds, Go to Performance History, Go to Project Usage, and Go to Project Settings for organization owners and admins.
- Create new project, for organization owners and admins.
- Toggle theme (its label shows the current theme), Copy current URL and Documentation.
The palette doesn’t list the review shortcuts. Use ? for those.
Light and dark mode
The app starts in your operating system’s light or dark setting. To switch, select the sun or moon button in the header. On a small screen it’s in your user menu, in the Theme row. You can also run Toggle theme from the command palette, which is the only way on a small screen in the demo.
pixmoat remembers the choice in this browser. This changes only how pixmoat looks, not your screenshots. To capture your own app in light and dark themes, see Connect Playwright.
The demo tour
In the demo, a Guide button opens How this demo works. It also opens by itself the first time you enter the demo in a browser session. Select Show me around for a short tour of the build review page, or Skip. During the tour, use Next and Back, or the arrow keys, and Skip tour or Esc to leave. On the last step, Next becomes Finish. To take the tour again, select Guide, then Show me around.