20260820223837

2026-08-20 22:38:37 +08:00
1 parent 68ac5db038
commit 45854b0570
@@ -0,0 +1,140 @@
+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()