WalkaroundVisual regression testing

Every screen checked before you hand back the keys

At pickup, Walkaround photographs every screen of your app at every width. At return, after your next pull request, it walks around again and circles every new mark, graded by how deep it goes. Swirl marks get buffed out; a missing Pay button stops the build.

Checkout · 390 wide

PR #318 · return inspection
Pickupmain · a41f
ReturnPR #318 · c07e
Bare steelAt 390 wide the Pay button is covered by the new sticky chat bar. Customers cannot pay. Build stopped.
Rate
First 5,000 photos a month free, then $4 per 1,000. Every seat is free.
Runs in
GitHub Actions, GitLab CI, CircleCI, Bitbucket Pipelines, Buildkite, Jenkins
Shoots
Chrome, Firefox, Safari and Edge, at any width you name
Start
npx walkaround init adds one step to your CI file. First walkaround in about four minutes.
Unit 2B · Juniper Supply, build c07eReturn inspection
Checkout Cart Product Search Home Account Login Settings

Choose a panel to open its screen above. Orange circles are new marks; the gray dashed one is noise Walkaround buffed out.At pickup the car is clean: this is your baseline.

Layer 1 · Clear coat

Swirl marks get buffed out

Text anti-aliasing shifts by a pixel between machines. A shadow renders a shade lighter. Most screenshot tools flag all of it, and the team learns to click Approve without looking.

Walkaround renders both sides on the same browser build, then ignores changes thinner than the clear coat. You never see them, so you keep looking at the marks you do see.

On the Home screen: 1,204 pixels in the banner headline moved by one pixel. Buffed out, not reported.

PickupHome
ReturnHome
Layer 2 · Base coat

The color changed

Someone renamed a design token and the Add to cart button went from blue to violet on one screen only. Nobody broke anything, but nobody meant it either.

Walkaround circles it, names the property that moved, and asks one question. If you meant it, sign it off and it becomes the new paint. If not, it goes on the pull request as a comment.

PickupProduct
ReturnProduct
Layer 3 · Primer

Something moved

A longer product name pushed the price onto a second line, and the Remove link slid under it. It only happens at 390 wide, on the one screen with the longest name.

Primer marks are layout: spacing, wrapping, alignment. Walkaround tells you how far the thing moved and at which widths, so you can see it is a phone problem before you open a phone.

PickupCart · 390
ReturnCart · 390
Layer 4 · Bare steel

Down to the metal

On Checkout at 390 wide, the Pay button is gone. A new sticky chat bar landed on top of it. This is the mark that costs money.

Bare steel stops the build. Walkaround posts the before and after on the pull request, fails the check, and will not let it merge until the panel is fixed or someone with the keys signs it off by name.

PickupCheckout · 390
ReturnCheckout · 390
The paint gauge

Decide how deep stops the build

Every team draws the line somewhere else. A design system team wants to hear about a color. A team shipping hourly only wants bare steel. Set the gauge once per project, and marks above the line are logged but never block a merge.

Flip the key tag to Return, then move the gauge.

The return lane

Other lots, this morning

Return lane · Tue Oct 206 cars in since 7 am
  1. 7:12Ferrow BikesPortland, OR · PR #2,114Bare steelPlace order slid under the cookie banner at 390 in Safari. Held, fixed in 38 minutes.
  2. 7:40Tallgrass ClinicOmaha, NE · PR #881PrimerAppointment times wrapped to two lines at 1000. Signed off by Priya N.
  3. 8:03Kettle Hill CoffeeAsheville, NC · PR #57Base coatBrand green drifted on 14 screens after a token rename. Put on the PR.
  4. 8:15PaydockAustin, TX · PR #3,402Clear coat3,880 pixels of font smoothing. Buffed out, nobody pinged.
  5. 8:31Okra TableNew Orleans, LA · PR #612Bare steelReserve button rendered 0 px wide in Firefox. Held.
  6. 8:52Northbeam TutorsMadison, WI · PR #1,090No marks212 photos, every panel clean. Merged.
Bare steel caught Remarks at return
We were approving 300 screenshot diffs a week without reading them. Now the PR says four things, and the Friday before Thanksgiving one of them was our checkout.
Marisol Vega
Front-end lead, Ferrow Bikes · 14 months on the lot
Remarks at return
Our designers sign off base coat themselves. I only get pinged when it is primer or worse.
Dev Raman
Staff engineer, Paydock
1,940teams return builds here
11.2Mphotos walked in September
2 minmedian review per PR
The rate board

Pay by the photo, not the seat

Everyone on the team can look, sign off and comment. You pay for the photographs Walkaround takes, and only the ones past your free allowance each month, to the cent.

First 5,000 photos a month$0
Every 1,000 after that$4
People who can sign offAny
ContractNone
15,600 photos a month$42.40

60 screens × 3 widths × 20 PRs × 52 weeks ÷ 12 months. 10,600 past the free 5,000, at $0.004 each.

Pickup points

Your CI runs the walkaround and Walkaround posts the check back.

  • GitHub Actions
  • GitLab CI
  • CircleCI
  • Bitbucket Pipelines
  • Buildkite
  • Jenkins

Cameras

Real browser engines, the same build on both sides.

  • Chrome
  • Firefox
  • Safari (WebKit)
  • Edge
  • Any width, 320 to 2560

Makes and models

Point it at a URL, a Storybook, or the tests you already have.

  • React
  • Next.js
  • Vue
  • Svelte
  • Angular
  • Storybook
  • Playwright
  • Cypress