70 lines
2.7 KiB
JavaScript
70 lines
2.7 KiB
JavaScript
import { chromium } from '@playwright/test'
|
|
|
|
/**
|
|
* 上一步的疑点：lastRowBottom 恒为 3053，不随容器高度变化。
|
|
* 猜想：容器变矮 → 行区溢出/被裁 → 该坐标不再是"可见的最后一行底边"。
|
|
*
|
|
* 这里把「滚动容器」也一起量出来，看清溢出时到底发生了什么。
|
|
*/
|
|
const BASE = process.env.PROBE_URL || 'http://localhost:5200'
|
|
const browser = await chromium.launch()
|
|
const page = await browser.newPage({ viewport: { width: 1400, height: 1200 } })
|
|
await page.goto(BASE, { waitUntil: 'networkidle' })
|
|
|
|
for (const h of [400, 200, 128, 126, 120, 80]) {
|
|
await page.evaluate((hh) => {
|
|
const wrap = document.querySelector('[data-testid="table-wrap"]')
|
|
wrap.style.height = `${hh}px`
|
|
}, h)
|
|
await page.waitForTimeout(500)
|
|
|
|
const r = await page.evaluate(() => {
|
|
const wrap = document.querySelector('[data-testid="table-wrap"]')
|
|
const root = wrap.querySelector('.g3-table')
|
|
const inner = wrap.querySelector('.stk-table')
|
|
const tbody = wrap.querySelector('.stk-tbody-main')
|
|
const rows = [...wrap.querySelectorAll('.stk-tbody-main tr')]
|
|
const last = rows[rows.length - 1]
|
|
|
|
// 找到所有可能的滚动容器
|
|
const scrollers = [...wrap.querySelectorAll('*')]
|
|
.filter((el) => {
|
|
const s = getComputedStyle(el)
|
|
return /auto|scroll/.test(s.overflowY) && el.scrollHeight > el.clientHeight + 1
|
|
})
|
|
.map((el) => ({
|
|
cls: el.className.toString().slice(0, 40),
|
|
clientH: el.clientHeight,
|
|
scrollH: el.scrollHeight,
|
|
scrollTop: el.scrollTop,
|
|
}))
|
|
|
|
const hasBottom = (s) => /linear-gradient\(0deg, rgb/.test(s)
|
|
const innerRect = inner.getBoundingClientRect()
|
|
const cs = getComputedStyle(inner)
|
|
|
|
return {
|
|
rootCls: root.className,
|
|
wrapH: Math.round(wrap.getBoundingClientRect().height),
|
|
innerRect: { top: Math.round(innerRect.top), bottom: Math.round(innerRect.bottom) },
|
|
innerBottomEdge: Math.round(innerRect.bottom - (parseFloat(cs.borderBottomWidth) || 0)),
|
|
tbodyRect: tbody
|
|
? { top: Math.round(tbody.getBoundingClientRect().top), bottom: Math.round(tbody.getBoundingClientRect().bottom), h: Math.round(tbody.getBoundingClientRect().height) }
|
|
: null,
|
|
lastRow: last
|
|
? {
|
|
top: Math.round(last.getBoundingClientRect().top),
|
|
bottom: Math.round(last.getBoundingClientRect().bottom),
|
|
draws: [...last.querySelectorAll('td')].some((td) => hasBottom(getComputedStyle(td).backgroundImage)),
|
|
}
|
|
: null,
|
|
rowBottoms: rows.map((tr) => Math.round(tr.getBoundingClientRect().bottom)),
|
|
scrollers,
|
|
}
|
|
})
|
|
console.log(`\n===== container ${h}px =====`)
|
|
console.log(JSON.stringify(r, null, 2))
|
|
}
|
|
|
|
await browser.close()
|