In this video· click a step to jump to it
Test recording
Madera — app walkthrough
175,249 ms · 22,192 pixels changed
We built this regression test for madera.app — it's yours to keep, free.
Take this test with you
This is a real Playwright test, recorded against madera.app. 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, s) => screenshotPath.replace('.png', `-${n}-${s}.png`);
async function snap(n, s, label) { stepLogger.log('Scenario ' + n + ': ' + label); try { await page.screenshot({ path: shot(n, s), fullPage: true }); } catch (e) { try { await page.screenshot({ path: shot(n, s) }); } catch (e2) {} } }
const APP = 'https://madera.app';
async function gallery() {
await page.goto(APP, { waitUntil: 'domcontentloaded' }).catch(function(){});
await page.waitForLoadState('networkidle').catch(function(){});
await page.waitForTimeout(2200);
await page.keyboard.press('Escape').catch(function(){});
const d = page.getByText('Demos', { exact: true }).first();
if (await d.isVisible().catch(function(){return false;})) { await d.click().catch(function(){}); await page.waitForTimeout(1000); }
}Checks run
Notes from the demo run
AI-generatedMadera is a minimal, dark-themed parametric furniture builder. Passwordless email one-time-code sign-in drops you into a Projects/Demos workspace where furniture templates (Closet, Double Closet, Chest, Side Table) render as live previews. Opening a template and hitting Remix drops you into a clean Design editor: a real-time 2D furniture diagram with editable module widths (A/B/C), Depth, Thickness and Overhang, plus add-module controls and a generated Cutlist for the actual cut measurements.
- Parametric Design editorRemixing a template opens a live 2D diagram where each cabinet, door and drawer is editable, with dimension controls (A/B/C widths, Depth, Thickness, Overhang) updating the design in real time. This is the product's core value and it reads instantly.
- Auto-generated CutlistEvery design produces a Cutlist tab with part-by-part measurements and operations, taking the project from a sketch to something buildable without a separate CAD step.
- Passwordless onboardingA single email field issues a one-time code and auto-creates the account, with no password to invent and no third-party OAuth dependency.
- 3D viewport needs WebGL to paintThe right-hand 3D preview relies on WebGL and renders blank in a headless/automated capture, while the left-hand 2D Design editor renders perfectly. Worth knowing for the founder: any headless screenshot or visual-regression tooling (including their own) will capture an empty 3D pane unless WebGL is forced on.
- Cutlist is flagged work-in-progressThe Cutlist view carries a disclaimer that measurements may contain errors and have not been validated in real builds — honest, but a place where buyer trust is won or lost.
- Code length mismatchThe one-time-code input shows a 6-digit placeholder, but the emailed code is actually 8 digits.
Visual change
Share this run
Proof your app is not AI slop
This test was built for madera.app — 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.