Recording of the visual regression run on nibbleful.com · Nibbleful — app walkthrough.

In this video· click a step to jump to it

N
Passed ✓

Test recording

Nibbleful — app walkthrough

75,695 ms · 18 pixels changed

We built this regression test for nibbleful.com — it's yours to keep, free.

Take this test with you

This is a real Playwright test, recorded against nibbleful.com. Claim it into your own workspace and re-run it on every deploy — free.

export async function test(page, baseUrl, screenshotPath, stepLogger) {
  const shot = (n, slug) => screenshotPath.replace('.png', `-${n}-${slug}.png`);
  const COL = '/collections/01a0d193-fad5-7b25-99ee-3f903617d4ce';
  const SCROLL_THROUGH = "(async () => { const ease = t => 1 - Math.pow(1 - t, 3); const max = Math.max(0, document.body.scrollHeight - window.innerHeight); if (max < 40) return; const anim = (a, b, ms) => new Promise(res => { const t0 = performance.now(); const step = now => { const p = Math.min(1, (now - t0) / ms); window.scrollTo(0, a + (b - a) * ease(p)); p < 1 ? requestAnimationFrame(step) : res(); }; requestAnimationFrame(step); }); await anim(0, max, 1400); await new Promise(r => setTimeout(r, 350)); await anim(max, 0, 800); })()";

  await page.context().setExtraHTTPHeaders({ 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36' });
  for (const pattern of ['**/cdn-cgi/scripts/**/email-decode.min.js', '**/sentry-cdn.com/**', '**/cdn.segment.com/**', '**/connect.facebook.net/**', '**/www.googletagmanager.com/**']) {
    await page.route(pattern, function (r) { return r.abort(); }).catch(function () {});
  }

  // ---------- Public context: home ----------
  stepLogger.log('Public: Nibbleful home');
+92 more lines — claim the test to get the full code.

Checks run

Run
✓
Visual
0.05%
Text
—
DOM
✓
Network
—
Console
✓
A11y
A
Perf
420 over
URL
✓
Variables
—
Full report
Log in →
18
Diff px
1m 16s
Duration
A
Accessible
WCAG 2.2 · 97
C
Fast
Web Vitals · 70

Notes from the demo run

AI-generated

We created a Nibbleful account and drove the whole org workspace signed in: the dashboard, collections, a real collection's three tabs (Settings, Records, Quick Start) in both private and public-ingest flavours, the new-collection form, the API key list and its per-collection scoping form, the request log and prepaid billing. Signup to a usable dashboard was one form with no verification step, and an organization was created for us automatically. The product's whole pitch - 'just send the JSON' - survives contact with the dashboard: a collection is a name, a key is a set of per-collection checkboxes, and the Quick Start hands you the exact curl for the collection you are looking at.

Highlights
  • Quick Start is collection-specific, not generic
    The curl and browser-fetch snippets are pre-filled with this collection's real UUID rather than a placeholder path. Copy, paste, done. Most usage-based APIs make you assemble the URL yourself from three doc pages.
  • Key scoping is explained at the point of decision
    The new-key form says per-collection read/write is the default, that WRITE is required to POST, and that a key with no permissions returns collection_not_found. That is the failure mode a new user would otherwise debug blind, documented inline on the form that causes it.
  • nib_pk_ versus nib_sk_ is spelled out where it matters
    The Public Ingest tab states plainly that the pk token is write-only, is not a secret, and that sk keys must never reach frontend code. Putting that on the snippet rather than in a security doc is how you actually prevent leaked keys.
  • The getting-started list is ordered and priced
    'Prepaid funds, a Collection, a write-scoped API key, then one Quick Start request' plus 'accepted operations cost $0.001, dashboard browsing is free'. A new user knows the sequence and the cost before spending anything.
Friction points
  • The org name is derived from the raw email local-part
    Signing up as [email protected] produced an organization called "Lastestcloud+Nibbleful's Organization", plus-sign and all, and it renders truncated in the sidebar. Anyone using a plus-alias or a dotted address gets a slightly broken-looking workspace name on their very first screen. Either strip non-alpha characters or prompt for an org name during signup.
  • Public ingest is off by default with the enable link one level away
    The Quick Start's Public Ingest tab renders the full snippet and then warns 'Public ingest is disabled for this Collection. Enable it on Settings.' The snippet on screen cannot work yet. An inline toggle right there, or greying the snippet until it is enabled, would stop people copying a request that is guaranteed to fail.

Visual change

Step 1018 px changed
Before
Before
After
After
Diff
Diff

Share this run

Earned · Lastest awards

Proof your app is not AI slop

LASTEST
starter
tests
all passing
regressions
0
Badges stay live, ratchet upward, only downgrade on confirmed regression.
57,226 test runs recorded · 1,151 products tested with Lastest

This test was built for nibbleful.com — claim it free

One click copies the test and baseline screenshots into your own Lastest workspace. Re-run on every deploy and catch regressions before your users do — free, no card required.