Treat Your Demo Environment Like a Test Fixture
When a feature demo takes far more takes than it should, the cause is often the app, not the person recording it. A toast from a background job slides in. A table sorts differently than it did last time. A timestamp says "3 minutes ago" in one take and "11 minutes ago" in the next. A dev overlay sits in the corner of every frame. Developers already know this kind of problem. It's the same thing…
When a feature demo requires multiple attempts, the root cause is often the application, not the person recording it. Common issues include changing toast notifications, sorting discrepancies, and varying timestamps. Developers are familiar with this kind of problem, which is similar to what causes tests to be flaky - uncontrolled state.
To resolve this, treat the demo environment like a test fixture, ensuring known data, a fixed starting point, and consistency between runs. This article focuses on that setup. Recording screen sessions is helpful, but creating demo videos from code can also be beneficial. Key takeaways for minimizing demo retakes include:
1. Deterministic means for a demo: A test is deterministic when the same input produces the same output every time. For demos, this means consistent data, screen appearance, and timing. Common issues include relative times, random IDs, sorting dependencies, background jobs, feature flags, and development-only UI elements. Addressing these issues creates a stable demo environment.
2. Seed script: Develop a one-command script to create demo data, ensuring consistent starting conditions. Incorporate principles like believable names, fixed dates, stable order, and no real customer data.
3. Reset command: Create a reset command that returns the demo environment to its original state after each take. Use a separate demo account or tenant and ensure it cannot be run on production.
4. Pin the screen: Utilize a production build for demos, match the window size to what users see, and configure the environment to remove overlays and distractions.
5. Freeze time and quiet the background: Control timestamps using a fixed clock or demo mode, disable background jobs and websockets, and minimize OS notifications.
6. Match feature flags: Ensure the demo reflects the state users will actually experience by incorporating feature flag values into the demo configuration.
Before recording, perform a walkthrough of the flow using a script or Playwright test. This will help identify potential issues and confirm that the demo looks as expected.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
