UI Demo

async function moveAndClick(page, locator, label, opts = {}) {
  const {postClickDelay = 800, ...clickOpts} = opts
  const el = typeof locator === 'string' ? page.locator(locator).first() : locator
  const visible = await el.isVisible().catch(() => false)
  if (!visible) {
    console.error(`WARNING: moveAndClick skipped - "${label}" not visible`)
    return false
  }
  try {
    await el.scrollIntoViewIfNeeded()
    await page.waitForTimeout(300)
    const box = await el.boundingBox()
    if (box) {
      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, {steps: 10})
      await page.waitForTimeout(400)
    }
    await el.click(clickOpts)
  } catch (e) {
    console.error(`WARNING: moveAndClick failed on "${label}": ${e.message}`)
    return false
  }
  await page.waitForTimeout(postClickDelay)
  return true
}

async function typeSlowly(page, locator, text, label, charDelay = 35) {
  const el = typeof locator === 'string' ? page.locator(locator).first() : locator
  const visible = await el.isVisible().catch(() => false)
  if (!visible) {
    console.error(`WARNING: typeSlowly skipped - "${label}" not visible`)
    return false
  }
  await moveAndClick(page, el, label)
  await el.fill('')
  await el.pressSequentially(text, {delay: charDelay})
  await page.waitForTimeout(500)
  return true
}

await page.evaluate(() => window.scrollTo({top: 400, behavior: 'smooth'}))
await page.waitForTimeout(1500)

async function panElements(page, selector, maxCount = 6) {
  const elements = await page.locator(selector).all()
  for (let i = 0; i < Math.min(elements.length, maxCount); i++) {
    try {
      const box = await elements[i].boundingBox()
      if (box && box.y < 700) {
        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, {steps: 8})
        await page.waitForTimeout(600)
      }
    } catch (e) {
      console.warn(
        `WARNING: panElements skipped element ${i} (selector: "${selector}"): ${e.message}`,
      )
    }
  }
}

async function injectSubtitleBar(page) {
  await page.evaluate(() => {
    if (document.getElementById('demo-subtitle')) return
    const bar = document.createElement('div')
    bar.id = 'demo-subtitle'
    bar.style.cssText = `
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 999998;
      text-align: center; padding: 12px 24px;
      background: rgba(0, 0, 0, 0.75);
      color: white; font-family: -apple-system, "Segoe UI", sans-serif;
      font-size: 16px; font-weight: 500; letter-spacing: 0.3px;
      transition: opacity 0.3s;
      pointer-events: none;
    `
    bar.textContent = ''
    bar.style.opacity = '0'
    document.body.appendChild(bar)
  })
}

async function showSubtitle(page, text) {
  await page.evaluate((t) => {
    const bar = document.getElementById('demo-subtitle')
    if (!bar) return
    if (t) {
      bar.textContent = t
      bar.style.opacity = '1'
    } else {
      bar.style.opacity = '0'
    }
  }, text)
  if (text) await page.waitForTimeout(800)
}

await showSubtitle(page, 'Step 1 - Logging in')
await showSubtitle(page, 'Step 2 - Dashboard overview')
await showSubtitle(page, '')

'use strict'
const {chromium} = require('playwright')
const path = require('path')
const fs = require('fs')

const BASE_URL = process.env.QA_BASE_URL || 'http://localhost:3000'
const VIDEO_DIR = path.join(__dirname, 'screenshots')
const OUTPUT_NAME = 'demo-FEATURE.webm'
const REHEARSAL = process.argv.includes('--rehearse')

// Paste injectCursor, injectSubtitleBar, showSubtitle, moveAndClick,
// typeSlowly, ensureVisible, and panElements here.

;(async () => {
  const browser = await chromium.launch({headless: true})

  if (REHEARSAL) {
    const context = await browser.newContext({viewport: {width: 1280, height: 720}})
    const page = await context.newPage()
    // Navigate through the flow and run ensureVisible for each selector.
    await browser.close()
    return
  }

  const context = await browser.newContext({
    recordVideo: {dir: VIDEO_DIR, size: {width: 1280, height: 720}},
    viewport: {width: 1280, height: 720},
  })
  const page = await context.newPage()

  try {
    await injectCursor(page)
    await injectSubtitleBar(page)

    await showSubtitle(page, 'Step 1 - Logging in')
    // login actions

    await page.goto(`${BASE_URL}/dashboard`)
    await injectCursor(page)
    await injectSubtitleBar(page)
    await showSubtitle(page, 'Step 2 - Dashboard overview')
    // pan dashboard

    await showSubtitle(page, 'Step 3 - Main workflow')
    // action sequence

    await showSubtitle(page, 'Step 4 - Result')
    // final reveal
    await showSubtitle(page, '')
  } catch (err) {
    console.error('DEMO ERROR:', err.message)
  } finally {
    await context.close()
    const video = page.video()
    if (video) {
      const src = await video.path()
      const dest = path.join(VIDEO_DIR, OUTPUT_NAME)
      try {
        fs.copyFileSync(src, dest)
        console.log('Video saved:', dest)
      } catch (e) {
        console.error('ERROR: Failed to copy video:', e.message)
        console.error('  Source:', src)
        console.error('  Destination:', dest)
      }
    }
    await browser.close()
  }
})()

# Phase 2: Rehearse
node demo-script.cjs --rehearse

# Phase 3: Record
node demo-script.cjs