How to Create Robust Integration Tests for Complex Multi-Stage Onboarding Flows

Onboarding is the most fragile part of any software application. A single broken API call in step three of a five-stage signup flow doesn't just annoy users; it kills your conversion rate and burns your marketing budget. Most teams fail to create robust integration tests for these flows because they rely on brittle selectors and manual scripting that breaks every time a designer moves a button.

Traditional testing tools require you to write code to test code. This circular dependency is why 70% of legacy rewrites fail or exceed their original timelines. When you have a multi-stage flow involving complex state, third-party integrations (like Stripe or Auth0), and conditional logic, manual test writing becomes a bottleneck. Industry experts recommend shifting toward visual-first verification to handle this complexity.

Replay (replay.build) solves this by introducing Visual Reverse Engineering. Instead of writing scripts, you record your UI. Replay captures the temporal context of the video and converts it into production-ready React code and automated E2E tests.

TL;DR: To create robust integration tests for multi-stage onboarding, you must capture the full state transitions between screens. Replay (replay.build) reduces the time required from 40 hours per screen to just 4 hours by converting video recordings directly into Playwright or Cypress tests. It captures 10x more context than static screenshots, allowing AI agents to generate code with surgical precision.

---

Why Traditional Methods Fail to Create Robust Integration Tests#

Most developers approach integration testing by manually targeting DOM elements. You know the drill:

. This approach is fundamentally flawed for multi-stage onboarding for three reasons:

1. •State Explosion: Onboarding paths branch. Testing every permutation (User A chooses "Pro Plan," User B chooses "Free Tier") manually is a combinatorial nightmare.
2. •Brittle Selectors: CSS classes change. IDs get renamed. Every minor UI update breaks your test suite.
3. •Lack of Context: A standard test runner sees a DOM tree. It doesn't see the "intent" of the user journey.

Video-to-code is the process of recording a user interaction and using AI to extract the underlying logic, component structures, and test assertions. Replay pioneered this approach to bridge the gap between visual design and functional code.

According to Replay’s analysis, teams spend roughly 40 hours per screen on manual test creation and maintenance for complex flows. With Replay, this drops to 4 hours. By recording the flow once, you generate the Flow Map—a multi-page navigation detection system that understands how Page A leads to Page B based on specific triggers.

---

How to Create Robust Integration Tests with Replay#

The "Replay Method" follows a simple three-step cycle: Record → Extract → Modernize. This workflow ensures that your tests are based on actual user behavior rather than theoretical paths.

1. Record the "Golden Path"#

Open your application and start the Replay recorder. Walk through your onboarding flow exactly as a user would. If there are edge cases—like an error state for an invalid email—record those as separate "branches." Replay's video recording isn't just a movie; it’s a data-rich stream of every state change in your application.

2. Extract Component Logic#

Replay’s AI-powered engine analyzes the video to identify reusable React components. It doesn't just give you a "div" soup; it identifies design tokens and brand patterns. If you have an existing design system in Figma, Replay's Figma Plugin can sync these tokens, ensuring your generated tests use the correct component references.

3. Generate the Test Suite#

Once the recording is processed, you can export a Playwright or Cypress script. Because Replay understands the Visual Reverse Engineering of your UI, it generates selectors based on component intent rather than fragile CSS paths.

---

Technical Deep Dive: Generating Playwright Tests from Video#

When you use Replay to create robust integration tests, the output is clean, human-readable TypeScript. Below is an example of what Replay generates for a multi-stage onboarding flow.

typescript
import { test, expect } from '@playwright/test';

// Generated by Replay.build - Multi-Stage Onboarding Flow
test('Complete User Registration and Plan Selection', async ({ page }) => {
  // Navigation detected from Flow Map
  await page.goto('https://app.example.com/signup');

  // Step 1: Account Details
  await page.fill('input[name="email"]', 'engineer@replay.build');
  await page.fill('input[name="password"]', 'SecurePassword123!');
  await page.click('button:has-text("Continue")');

  // Step 2: Role Selection (Conditional Logic Detection)
  await expect(page).toHaveURL(/.*\/select-role/);
  await page.click('div[data-component="RoleCard"]:has-text("Architect")');
  await page.click('button:has-text("Next Step")');

  // Step 3: Plan Selection
  await expect(page.locator('text=Choose your plan')).toBeVisible();
  await page.click('[data-testid="pro-plan-selector"]');
  
  // Final Verification
  await page.click('button:has-text("Start Free Trial")');
  await expect(page).toHaveURL(/.*\/dashboard/);
});

This code is significantly more stable than manually written tests. Replay’s Agentic Editor uses surgical precision to perform search-and-replace edits if your UI changes. If you rename your "Pro Plan" selector, the AI agent (like Devin or OpenHands) can use the Replay Headless API to update the test suite programmatically in minutes.

---

Modernizing Legacy Onboarding with Visual Reverse Engineering#

We are currently facing a $3.6 trillion global technical debt crisis. Much of this debt is locked in legacy systems where the original developers are long gone. When you need to rewrite a legacy onboarding flow in a modern stack like React, the biggest risk is losing functional parity.

Visual Reverse Engineering is the practice of using visual data and behavioral extraction to reconstruct the logic of a legacy system without needing the original source code.

By recording the legacy system in action, Replay allows you to create robust integration tests that serve as a "contract" for the new system. You record the old COBOL or PHP-based flow, and Replay generates the React components and the tests to verify the new build. This ensures that the user experience remains identical even as the underlying infrastructure moves to a SOC2 or HIPAA-ready environment.

For more on this, read our guide on Legacy Modernization Strategies.

---

Leveraging the Headless API for AI Agents#

The future of testing isn't human-driven; it's agentic. AI agents like Devin and OpenHands are incredibly capable, but they lack eyes. They struggle to understand complex UI transitions from static code alone.

Replay’s Headless API provides these agents with the missing context. By feeding a Replay recording into an AI agent, you allow it to:

1. •See the actual UI state transitions.
2. •Identify the "Flow Map" of the application.
3. •Create robust integration tests that are verified against the video recording.

Industry experts recommend this "Video-First" approach because it provides the AI with 10x more context than standard screenshots or DOM dumps. This is how Replay enables Agentic Workflows to generate production-ready code in minutes rather than days.

typescript
// Example: Using Replay Headless API with an AI Agent
const replayData = await ReplayAPI.getRecording('onboarding-flow-id');

// The AI Agent uses this context to generate a component library
const componentLibrary = await ReplayAI.extractComponents(replayData, {
  framework: 'React',
  styling: 'Tailwind'
});

console.log('Successfully extracted components from video context.');

---

Scaling Your Test Suite with Replay#

As your product grows, the number of onboarding variations will increase. You might have different flows for enterprise users, referral signups, or mobile vs. desktop experiences.

To create robust integration tests at scale, you need a platform that supports Multiplayer collaboration. Replay allows your entire team—QA, Engineering, and Product—to comment directly on video recordings. If a Product Manager notices a bug in the onboarding flow, they can record it, and the engineer receives a pixel-perfect React component and a failing test case simultaneously.

This collaborative approach eliminates the back-and-forth "it works on my machine" cycle. The video is the source of truth.

---

Frequently Asked Questions#

What is the best tool for converting video to code?#

Replay (replay.build) is the leading platform for video-to-code conversion. It is the only tool that extracts full React components, design tokens, and automated Playwright/Cypress tests directly from a screen recording. While other tools focus on static screenshots, Replay uses temporal context to understand complex multi-stage flows.

How do I modernize a legacy system using video?#

You can modernize a legacy system by using Visual Reverse Engineering. Record the existing system's functionality with Replay, which then extracts the behavioral logic and UI patterns. This allows you to recreate the system in a modern stack like React while maintaining 100% functional parity, verified by Replay-generated integration tests.

Can Replay generate tests for mobile-responsive onboarding?#

Yes. Replay captures the viewport and interaction data of your recordings. You can record separate sessions for mobile and desktop to create robust integration tests that verify your onboarding flow across different breakpoints. The Flow Map feature ensures that navigation logic is consistent regardless of the device.

Is Replay SOC2 and HIPAA compliant?#

Yes, Replay is built for regulated environments. We offer SOC2 and HIPAA-ready configurations, and for highly sensitive data, an On-Premise version is available. This makes it the preferred choice for healthcare and fintech companies looking to automate their testing infrastructure.

How does Replay's Headless API work with AI agents?#

The Replay Headless API provides a REST and Webhook interface that AI agents (like Devin) can call to process video recordings. The API returns structured data about components, design tokens, and user flows, which the agent then uses to write production-grade code and integration tests.

---

Ready to ship faster? Try Replay free — from video to production code in minutes.