70 lines
2.7 KiB
JavaScript
70 lines
2.7 KiB
JavaScript
import { chromium } from '@playwright/test'
|
||
|
||
/**
|
||
* 停止试错，先看清真相：把那 4 个像素的**实际 RGB 和所属元素**打出来。
|
||
*/
|
||
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' })
|
||
|
||
const clipSample = async (x, y, w, h) => {
|
||
const shot = await page.screenshot({ clip: { x, y, width: w, height: h } })
|
||
return page.evaluate(async (dataUrl) => {
|
||
const img = new Image()
|
||
await new Promise((res) => {
|
||
img.onload = res
|
||
img.src = dataUrl
|
||
})
|
||
const cv = document.createElement('canvas')
|
||
cv.width = img.width
|
||
cv.height = img.height
|
||
const ctx = cv.getContext('2d')
|
||
ctx.drawImage(img, 0, 0)
|
||
const d = ctx.getImageData(0, 0, img.width, img.height).data
|
||
const out = []
|
||
for (let i = 0; i < d.length; i += 4) out.push([d[i], d[i + 1], d[i + 2]])
|
||
return out
|
||
}, `data:image/png;base64,${shot.toString('base64')}`)
|
||
}
|
||
|
||
// 取一档"坏"的（h=250）和一档"好"的（h=400）
|
||
for (const h of [250, 400]) {
|
||
await page.evaluate((hh) => {
|
||
document.querySelector('[data-testid="table-big-wrap"]').style.height = `${hh}px`
|
||
}, h)
|
||
await page.waitForTimeout(500)
|
||
await page.locator('[data-testid="table-big-wrap"]').scrollIntoViewIfNeeded()
|
||
await page.waitForTimeout(220)
|
||
|
||
const g = await page.evaluate(() => {
|
||
const wrap = document.querySelector('[data-testid="table-big-wrap"]')
|
||
const root = wrap.querySelector('.g3-table')
|
||
const r = root.getBoundingClientRect()
|
||
// 把该 x 位置自上而下的元素列出来（用 elementFromPoint 逐个 y 采样）
|
||
return { left: Math.round(r.left), bottom: Math.round(r.bottom) }
|
||
})
|
||
|
||
const x = g.left + 300
|
||
console.log(`\n=========== h=${h} root.bottom=${g.bottom} ===========`)
|
||
console.log('从 root.bottom-6 到 root.bottom+3，每行的色值与该点元素：')
|
||
const px = await clipSample(x, g.bottom - 6, 1, 10)
|
||
for (let i = 0; i < 10; i += 1) {
|
||
const y = g.bottom - 6 + i
|
||
const info = await page.evaluate(
|
||
({ x, y }) => {
|
||
const el = document.elementFromPoint(x, y)
|
||
if (!el) return 'null'
|
||
const s = getComputedStyle(el)
|
||
return `${el.tagName}.${String(el.className).slice(0, 45)} | bg=${s.backgroundColor} | bgImg=${s.backgroundImage === 'none' ? 'none' : 'HAS'} | shadow=${s.boxShadow === 'none' ? 'none' : 'HAS'}`
|
||
},
|
||
{ x, y },
|
||
)
|
||
const [r, gg, b] = px[i]
|
||
const mark = r < 246 || gg < 246 || b < 246 ? '◀ 深' : ''
|
||
console.log(` y=${y} rgb(${r},${gg},${b}) ${mark} ${info}`)
|
||
}
|
||
}
|
||
|
||
await browser.close()
|