Skip to main content
Version: Current

Reviewing diffs

When Happo finds diffs, it's up to you to either accept or reject them. The diffs are presented in a Happo report, and the UI looks something like this:

Happo compare page

The diffs are listed on the right. On the left is a tree of the components and variants that changed: pick one to jump to it. The filter box above the tree narrows both the tree and the list. Type part of a name, or terms such as component:, variant:, target:, status: and change:, and the box suggests values as you type. Above the list, a row of counts says what needs review, what changed, was added or was removed, and more. Click a count to show only those.

The announcement post describes the compare page in full.

Accepting/Rejecting a report​

Every diff has its own reject (✕) and accept (✓) buttons, so you can review a comparison one diff at a time, or split it with a teammate. Diffs that made the same change are grouped into one, and one decision covers the whole group. A decision is recorded against the pair of screenshots, so it carries over to later commits on the same pull request. Once every diff is accepted, the comparison is accepted as well.

You can also decide on the whole comparison at once, with the Reject and Accept buttons at the top right of the page, next to how many of its diffs have been reviewed:

Happo review buttons

By accepting, you signal to others that the diffs are expected, or at least okay from a design standpoint. The buttons will then look like this:

Happo review buttons, accepted

By rejecting, you signal to others that the diffs aren't okay, and that the change shouldn't be merged.

Happo review buttons, rejected

If you have the right CI setup, the accept/reject status will also be posted back to the PR/commit on github.com.

Alerts​

In rare cases you will see an alert message at the top of the compare page informing you about updates made. This is Happo informing you about changes made to internal infrastructure that might affect the screenshots and cause diffs. These could be e.g. browser updates, internal bug fixes, etc.

Happo records which version of its renderer took each report's screenshots. When the "before" and "after" reports were rendered differently, the alert names the targets affected and, where it knows them, the browser versions on each side. Targets rendered the same way on both sides are left out. When it can, Happo renders the "before" report again the way the "after" report was rendered before comparing them, so the diffs come only from your change, and no alert is shown for those targets. For older reports that don't record this, you'll be alerted about changes that were made in the timespan between when the "before" report and the "after" report were created.

An alert about a Happo browser update at the top of a report