workspace/code/fms/.playwright-cli/inspect-fmsfile.mjs

import { chromium } from 'playwright-core'

const BASE = 'http://localhost:5082'
const out = {}
const browser = await chromium.launch({
  headless: true,
  executablePath: `${process.env.LOCALAPPDATA}\\ms-playwright\\chromium-1232\\chrome-win64\\chrome.exe`,
})
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } })
const logs = []
page.on('console', (m) => logs.push(`[${m.type()}] ${m.text()}`))
page.on('pageerror', (e) => logs.push(`[pageerror] ${e.message}`))

// bypass auth: inject sessionStorage token before app boot
await page.addInitScript(() => {
  sessionStorage.setItem(
    'fms-login',
    JSON.stringify({ loginInfo: { token: 'dev-token', user: { id: 1, name: 'dev' } } }),
  )
})

try {
  // first load the app (redirects to /dashboard)
  await page.goto(BASE, { waitUntil: 'networkidle', timeout: 30000 })
  await page.waitForTimeout(1000)
  // now navigate to file-demo
  await page.goto(`${BASE}/file-demo`, { waitUntil: 'networkidle', timeout: 30000 })
  await page.waitForTimeout(3000)

  out.url = page.url()

  // screenshot full page
  await page.screenshot({ path: '.playwright-cli/fmsfile-1.png', fullPage: false })

  // find the splitter panels
  const panels = await page.evaluate(() => {
    const els = Array.from(document.querySelectorAll('.fms-splitter-panel'))
    return els.map((el, i) => ({
      i,
      w: el.getBoundingClientRect().width,
      h: el.getBoundingClientRect().height,
      cls: el.className,
      text: (el.textContent || '').slice(0, 60).replace(/\s+/g, ' '),
    }))
  })
  out.panels = panels

  // find splitter bars
  const bars = await page.evaluate(() => {
    const els = Array.from(document.querySelectorAll('.fms-splitter-bar'))
    return els.map((el, i) => {
      const r = el.getBoundingClientRect()
      return { i, x: r.x, y: r.y, w: r.width, h: r.height, cls: el.className }
    })
  })
  out.bars = bars

  // check tree width & min-width
  const treeInfo = await page.evaluate(() => {
    const tree = document.querySelector('.tree')
    const panel = document.querySelector('.fc-panel')
    return {
      treeExists: !!tree,
      treeRect: tree ? { w: tree.getBoundingClientRect().width, h: tree.getBoundingClientRect().height } : null,
      treeMinWidth: tree ? getComputedStyle(tree).minWidth : null,
      panelRect: panel ? { w: panel.getBoundingClientRect().width } : null,
    }
  })
  out.treeInfo = treeInfo

  // try dragging first bar right by +80px and check panel widths
  if (bars.length) {
    const b = bars[0]
    const cx = b.x + b.w / 2
    const cy = b.y + b.h / 2
    await page.mouse.move(cx, cy)
    await page.mouse.down()
    await page.mouse.move(cx + 80, cy, { steps: 8 })
    await page.mouse.up()
    await page.waitForTimeout(600)
    const after = await page.evaluate(() => {
      const els = Array.from(document.querySelectorAll('.fms-splitter-panel'))
      return els.map((el, i) => ({ i, w: Math.round(el.getBoundingClientRect().width) }))
    })
    out.afterDragBar0 = after
  }

  // now drag first bar left by -120px
  if (bars.length) {
    const b = await page.evaluate(() => {
      const el = document.querySelector('.fms-splitter-bar')
      const r = el.getBoundingClientRect()
      return { x: r.x, w: r.width, y: r.y, h: r.height }
    })
    const cx = b.x + b.w / 2
    const cy = b.y + b.h / 2
    await page.mouse.move(cx, cy)
    await page.mouse.down()
    await page.mouse.move(cx - 120, cy, { steps: 8 })
    await page.mouse.up()
    await page.waitForTimeout(600)
    const after = await page.evaluate(() => {
      const els = Array.from(document.querySelectorAll('.fms-splitter-panel'))
      return els.map((el, i) => ({ i, w: Math.round(el.getBoundingClientRect().width) }))
    })
    out.afterDragBar0Left = after
  }

  // list-mode table: check action column widths
  const listInfo = await page.evaluate(() => {
    const ths = Array.from(document.querySelectorAll('.fl-table th')).map((th) => ({
      text: (th.textContent || '').trim(),
      w: Math.round(th.getBoundingClientRect().width),
    }))
    const actionCells = Array.from(document.querySelectorAll('.fl-table td.is-center:last-child, .fl-table td .fl-actions'))
    return {
      headerCols: ths,
      actionCellCount: actionCells.length,
      firstActionCellW: actionCells[0] ? Math.round(actionCells[0].getBoundingClientRect().width) : null,
    }
  })
  out.listInfo = listInfo

  // check fl-footer bar
  const footerInfo = await page.evaluate(() => {
    const footer = document.querySelector('.fl-footer__bar')
    const btns = Array.from(document.querySelectorAll('.fl-footer__btns .button')).map((b) => ({
      text: (b.textContent || '').trim(),
      w: Math.round(b.getBoundingClientRect().width),
    }))
    return { exists: !!footer, btns }
  })
  out.footerInfo = footerInfo
} catch (e) {
  out.error = String(e)
}

out.logs = logs
console.log(JSON.stringify(out, null, 2))
await browser.close()