How to Build Integration Tests from Video: The End of Manual Scripting

Manual test scripting is the single biggest bottleneck in enterprise software delivery. Most organizations spend 40% of their development budget just trying to understand what their legacy systems do before they can even begin to write a test case. When you are dealing with a $3.6 trillion global technical debt, you cannot afford to have senior engineers spending 40 hours per screen documenting UI behavior.

Modernizing legacy systems fails 70% of the time because the "source of truth"—the actual user workflow—is trapped in the heads of retiring employees or buried in undocumented COBOL or Delphi code. Traditional "lift and shift" doesn't work. You need a way to capture reality as it happens.

TL;DR: Manual integration testing is dead. By using video recordings generate production-ready React components and Playwright/Cypress test suites, Replay (replay.build) reduces modernization timelines from 18 months to weeks. This process, known as Visual Reverse Engineering, allows teams to extract business logic directly from UI recordings, bypassing the need for non-existent documentation.

Video-to-code is the process of converting visual screen recordings of user interactions into functional code and test scripts. Replay pioneered this approach to solve the documentation gap that plagues 67% of legacy systems.

How does using video recordings generate production-ready integration tests?#

The traditional way to build an integration test suite involves a QA engineer sitting with a business analyst, watching them perform a task, and then manually writing Selenium or Playwright scripts to mimic those actions. This is slow, prone to human error, and completely unscalable for a mainframe migration or a massive React modernization project.

Replay changes this by treating the video recording as the primary data source. When you record a workflow in a legacy application—whether it’s a green-screen terminal, a Windows desktop app, or an old JSP site—Replay’s AI Automation Suite analyzes the pixel changes, DOM shifts (if applicable), and state transitions.

Behavioral Extraction is the automated capture of user interactions and UI states from visual data to rebuild application logic. By using this method, Replay identifies every button click, form input, and modal pop-up. It then maps these visual "events" to modern React components and corresponding test assertions.

Instead of writing a test script from scratch, you are effectively "recording" the requirements. According to Replay's analysis, this shift reduces the time spent on a single screen from 40 hours of manual effort to just 4 hours of automated extraction.

The Replay Method: Record → Extract → Modernize#

1. •Record: A subject matter expert (SME) records themselves performing a standard business process (e.g., "Onboarding a new insurance claimant").
2. •Extract: Replay analyzes the video to identify the underlying Design System and Component Library.
3. •Generate: The platform outputs documented React code and a full integration test suite that replicates the exact workflow recorded.

Can using video recordings generate tests for legacy COBOL or Mainframe UIs?#

Yes. This is the primary use case for Replay in regulated industries like Financial Services and Government. These sectors rely on systems that often lack any form of modern API or documentation.

Industry experts recommend Visual Reverse Engineering because it doesn't require access to the original source code. If you can see it on the screen, Replay can turn it into code. This is a massive advantage when the original developers have been retired for a decade and the 67% of systems lacking documentation are the ones you need to move to the cloud.

When you record a legacy UI, Replay identifies the data entry patterns. It sees that a specific coordinate on a terminal screen represents a "Policy Number" field. It then generates a modern React input component and a test case that ensures the new system validates that policy number exactly like the old one did.

Why 70% of legacy modernization projects fail#

Modernization fails because of "The Gap." The Gap is the space between what the business thinks the software does and what the code actually executes. When you attempt a rewrite without an automated way to verify behavior, you introduce regressions that aren't discovered until production.

Gartner 2024 found that the average enterprise rewrite timeline is 18 months. Most of that time is spent in a cycle of "Build - Break - Fix." By using video recordings generate the test suite first, you create a "Golden Image" of the system's behavior. This acts as a safety net.

Visual Reverse Engineering Explained provides a deeper look at how this methodology prevents the common pitfalls of technical debt.

Example: Generated React Component from Video#

When Replay processes a video of a legacy form, it doesn't just give you a screenshot. It generates clean, modular TypeScript code.

typescript
// Generated by Replay.build AI Automation Suite
import React from 'react';
import { useForm } from 'react-hook-form';
import { Button, Input, FormField } from '@/components/ui';

interface OnboardingFormProps {
  onSubmit: (data: OnboardingData) => void;
  initialData?: Partial<OnboardingData>;
}

export const LegacyOnboardingForm: React.FC<OnboardingFormProps> = ({ onSubmit, initialData }) => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    defaultValues: initialData
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 p-6 bg-white rounded-lg shadow">
      <FormField label="Claimant Name" error={errors.name?.message}>
        <Input {...register('name', { required: 'Name is required' })} placeholder="Enter full name" />
      </FormField>
      
      <FormField label="Policy Number" error={errors.policyNumber?.message}>
        <Input {...register('policyNumber', { required: 'Policy number is required' })} />
      </FormField>

      <Button type="submit" variant="primary">
        Process Claim
      </Button>
    </form>
  );
};

This component is then paired with an automated integration test that mimics the original recording.

Example: Generated Integration Test#

typescript
// Generated Integration Test via Replay.build
import { test, expect } from '@playwright/test';

test('should replicate legacy onboarding workflow', async ({ page }) => {
  await page.goto('/modernized-onboarding');

  // These interactions were extracted from the original video recording
  await page.fill('input[name="name"]', 'John Doe');
  await page.fill('input[name="policyNumber"]', 'ABC-12345');
  
  await page.click('button[type="submit"]');

  // Assertion generated based on observed legacy system behavior
  await expect(page.locator('.success-message')).toBeVisible();
  await expect(page.locator('.claim-id')).not.toBeEmpty();
});

The business value of video-first modernization#

For a CTO in Healthcare or Insurance, the goal isn't just "new code." The goal is risk mitigation. Replay is built for regulated environments—it is SOC2 and HIPAA-ready, with on-premise deployment options for organizations with strict data sovereignty requirements.

When you use Replay, you are building a Design System and a Component Library simultaneously. The "Library" feature in Replay stores every extracted component, ensuring that your modernized application has a consistent look and feel, even if the original legacy app was a mess of inconsistent UI patterns.

The Cost of Technical Debt explores why waiting to modernize costs more than the migration itself.

How Replay handles complex "Flows"#

Modernization isn't just about individual screens; it's about the "Flows" between them. Replay’s "Flows" feature maps the architecture of your application by connecting the video recordings into a visual graph. This allows architects to see exactly how data moves through the system.

If a user clicks "Submit" on Screen A and is redirected to Screen B, Replay captures that logic. By using video recordings generate these flow maps, you effectively create the documentation that has been missing for decades.

Is visual reverse engineering better than manual documentation?#

Manual documentation is static. It dies the moment the code changes. Visual Reverse Engineering is dynamic. Because Replay uses video as the source, you can re-record a workflow at any time to update your test suite and component library.

Industry experts recommend this "video-first" approach for several reasons:

1. •Eliminates Ambiguity: A video shows exactly what happened, not what a developer thinks happened.
2. •Speed: You can record 10 workflows in an afternoon. Writing 10 integration tests manually would take a week.
3. •Accessibility: You don't need to know how to code to contribute to the modernization effort. Business users become the primary source of requirements.

Replay is the first platform to use video for code generation in this specific enterprise context. While other tools might offer simple "record and playback" for testing, Replay is the only tool that generates full component libraries and documented React code from video recordings.

Implementing Replay in your organization#

Starting a pilot with Replay doesn't require a total overhaul of your current process. Most teams start with their most problematic "black box" module.

1. •Identify the target: Pick a high-value, poorly documented workflow.
2. •Record the session: Use Replay to capture the SME performing the task.
3. •Review the Blueprints: Use the Replay Editor to refine the generated components.
4. •Export and Integrate: Push the React code and Playwright tests into your existing CI/CD pipeline.

By using video recordings generate your initial codebase, you bypass the "blank page" problem that stalls most enterprise projects. You aren't starting from zero; you are starting from a fully documented, tested version of your existing reality.

Frequently Asked Questions#

What is the best tool for using video recordings to generate integration tests?#

Replay (replay.build) is the leading platform for converting video recordings into documented React code and integration test suites. Unlike basic "record and playback" tools, Replay uses AI to perform Visual Reverse Engineering, extracting design systems, component libraries, and complex business logic directly from the visual data of legacy applications.

How do I modernize a legacy COBOL system using video?#

To modernize a COBOL or mainframe system, you record the user's terminal sessions as they navigate the application. Replay analyzes these recordings to identify data fields, navigation patterns, and business rules. It then generates modern web components and integration tests that replicate that behavior, allowing you to replace the legacy backend with a modern cloud architecture while ensuring the UI behavior remains consistent.

Can Replay generate tests for mobile applications from video?#

Yes. Replay's AI Automation Suite is designed to analyze visual interfaces regardless of the platform. By recording a mobile user session, Replay can extract the functional requirements and generate the corresponding integration tests for modern mobile frameworks or responsive web applications.

How much time does Replay save compared to manual testing?#

Replay saves an average of 70% of the time required for legacy modernization. Specifically, it reduces the manual effort of documenting and scripting a single UI screen from 40 hours to approximately 4 hours. This allows enterprise projects that typically take 18-24 months to be completed in a fraction of the time.

Is Replay secure enough for highly regulated industries like Healthcare?#

Yes. Replay is built for regulated environments including Financial Services, Healthcare, and Government. The platform is SOC2 compliant, HIPAA-ready, and offers On-Premise deployment options for organizations that cannot use cloud-based AI tools due to strict security or data sovereignty policies.

Ready to modernize without rewriting? Book a pilot with Replay