A button hidden on a small screen. A flow that no longer feels right. Diffraction reviews the changed experience and brings the evidence back to your pull request.
Explore the checkout
Loading example recording…
From diff to evidence.
A review you can follow.
From the first browser step to the finding on your pull request. See what was tested, what changed, and why it matters.
Your diff sets the direction.
A focused review plan, shaped by your changes and the flows around them.
form-and-field /storefrontPublic
storefront main
A small storefront. A checkout worth reviewing.
checkout/footer.tsx
export function ShippingBanner() {
return (
<aside className='shipping-banner'>
Free shipping on orders over $75
</aside>
);
}
All workflows
Add a sticky checkout footer #128
Open
alex wants to merge 2 commits into main from feat/checkout-footer
Illustrative review · Browsers and flows are selected for each pull request.
Ship faster. Keep the experience.
The interface is the product
People experience your work through buttons, forms, and flows. A small UI failure can stand between them and the reason they came.
More changes. Less time.
As development accelerates, more changes reach review. Fast browser feedback helps teams protect the experience without making every pull request a manual QA session.
Part of the review you know
Bring UI evidence alongside code review and CI, on the same pull request. Give reviewers the context to fix the experience before it reaches customers.
Less guesswork.More clarity.
Follow the steps. See the screen. Understand what happened, and where to look next.
Diffraction reviews how web applications look and behave after a code change. It follows relevant user flows and looks for visual and interaction regressions, called aberrations.
Does it work with our existing tests?+
Yes. Existing end-to-end tests provide useful context and reusable coverage. Diffraction adds a context-aware review of the experience around the proposed changes.
Where can I see the evidence?+
The review links back to recorded browser steps, screenshots and replay evidence. Each browser and viewport gets its own recording, so the evidence reflects what was actually tested.
How does a review start?+
Diffraction connects through a GitHub App. A pull request provides the changes and project context used to plan and run a UI review, with the results linked back to that pull request.
What is an aberration?+
An aberration is a departure from the expected experience, such as a clipped control, an overlapping footer, or a flow that no longer works. Findings include the context and evidence needed to understand the problem.
Is a replay a live preview?+
A replay shows what happened during a recorded review. Each browser and screen size has its own recording. Testing a different screen size or a new interaction requires another run.
UI review complete
Reviewed the checkout flow across 4 browser & viewport combinations. One issue needs attention.
The new shipping banner overlaps
Continue to paymentat 390 × 844. Customers can reach checkout, but cannot continue to payment.Diffraction · See the full spectrum of every diff.