Sign in Sign up free

Recording of the visual regression run on www.bytechef.io · ByteChef — register + app walkthrough.

In this video· click a step to jump to it

W

Failed

Test recording

ByteChef — register + app walkthrough

67,045 ms · 379,200 pixels changed

We built this regression test for www.bytechef.io — it's yours to keep, free.

Take this test with you

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

Claim this test — free Sign in to run it

export async function test(page, baseUrl, screenshotPath, stepLogger) {
  // Demo identity (fresh per run, traceable to Viktor's inbox via plus-addressing).
  const DEMO_EMAIL = '[email protected]'•••'Lastest-Demo-202605131108!';
  const DEMO_NAME = 'Lastest Demo';
  // ByteChef's auth and app surface lives on a separate subdomain from the
  // marketing site; baseUrl drives the marketing phase and APP drives the rest.
  const APP = 'https://app.bytechef.io';

  const shot = (n, slug) => screenshotPath.replace('.png', `-${n}-${slug}.png`);
  const settle = () => page.waitForLoadState('networkidle').catch(() => {});

  // ─── Public marketing phase ────────────────────────────────────────────────

+162 more lines — claim the test to get the full code.

Checks run

Run

✕

Visual

10.74%

Text

—

DOM

✓

Network

—

Console

✓

A11y

—

Perf

—

URL

✓

Variables

—

379,200

Diff px

1m 07s

Duration

—

Accessible

Notes from the demo run

AI-generated

ByteChef ships two distinct authenticated products under a shared sidebar: Automation (consumer-facing workflow runs) and Embedded (integration-as-a-service for developer customers). The two are visually identical, differentiated only by the URL prefix; that bet on shared chrome trades a small amount of orientation cost for a much smaller surface to maintain. The app uses a light theme with a single blue accent on primary CTAs and active nav items. Sidebars on /automation/* and /embedded/* both render icons-only by default (5-6 entries each), with a workspace switcher labeled DEVELOPMENT in the top-right. Empty states are tight: a single icon, one-line description, and a single primary CTA per page; no marketing copy bleeding into the product. The two-step signup form (email then password) plus the Spring/JHipster activation gate signal an enterprise-leaning architecture, but the product itself stays approachable.

Highlights

Two products, one sidebar
Automation and Embedded share visual chrome but cover completely different jobs: end-user workflow execution vs SaaS integration-as-a-service. Most products would split these into separate apps; ByteChef bets that a workspace switcher is enough orientation. The bet largely pays off, but the lack of a mode label in the active workspace UI means a new user can sit on /embedded/integrations and not realize they're not in Automation.
Empty states are single-CTA
/automation/projects, /automation/deployments, /embedded/integrations, /embedded/configurations: every empty state has exactly one primary button ('Create Project', 'Create Deployment', etc). No upsell modal, no documentation card, no tutorial wizard. Confident product.
Workspace switcher in chrome
The DEVELOPMENT badge in the top-right doubles as the environment selector for the user's workflows. Putting it inline rather than burying it in Settings means switching envs is one click from any page, including the empty states.
Spring/JHipster XSRF discipline
The /api/register endpoint correctly requires an X-XSRF-TOKEN cookie-to-header copy. Most indie SaaS skip this on signup. Conservative, defensive backend posture.

Friction points

Email-activation gate blocks first-time login
After signup, the user is bounced to /login and login returns 401 until they click an activation link in the verification email. The activation step is necessary but the resulting redirect dance, signup to activation email to back-to-login to finally /automation/projects, is four screens for one user action. Combining signup plus automatic activation for verified-by-domain emails would shorten it significantly.
Mode label missing on workspace chrome
The workspace switcher in the top-right says DEVELOPMENT on both /automation/* and /embedded/* routes. The two sections render with different sidebar icons but no top-bar text saying Automation vs Embedded, so a returning user who deep-links into a page may not realize which product mode they're in until they look at the URL.
Console-level 401 noise on Embedded pages
Every page under /embedded/* fires a background call to a project-scoped endpoint that returns 401 in the user's console even when the page itself renders fine. Most users won't notice; testers and prospective developer-customers will.
Aria-label drift on submit button
The login submit button has aria-label='log in button' rather than the accessible name 'Log in'. Screen readers will announce 'log in button button'. The test code had to query by aria-label exactly to find it reliably.

Couldn't reach

/automation/workflows/new and other Create CTAs·Would trigger long-running workflow operations on the user's account. Walked the parent route only.
/embedded/app-events, /embedded/executions·Empty state similar to /embedded/integrations. Skipped to keep walk short.

Visual change

Share this run

57,604 test runs recorded · 1,174 products tested with Lastest

This test was built for www.bytechef.io — 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.

Claim this test Sign in

Browse more live Lastest demo reports →