88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
/**
|
|
* 复现用户报的问题：
|
|
* 编辑态里的 Select，点选项后**不立即**生效；要点别处才更新。
|
|
* 「select 消失了，但框里的数据没变」。
|
|
*
|
|
* 严格控制步骤，每步都记录 DOM 实际内容与 row 数据。
|
|
*/
|
|
test('reproduce: select value not applied immediately', async ({ page }) => {
|
|
const logs: string[] = []
|
|
page.on('pageerror', (e) => logs.push('pageerror: ' + e.message))
|
|
page.on('console', (m) => {
|
|
if (m.type() === 'error' || m.type() === 'warning') logs.push('[' + m.type() + '] ' + m.text().slice(0, 200))
|
|
})
|
|
|
|
await page.goto('/ocean/booking')
|
|
await page.waitForTimeout(2000)
|
|
|
|
const rowState = () =>
|
|
page.evaluate(() => {
|
|
const root = document.querySelector('.g3-table') as HTMLElement
|
|
const rows = Array.from(root.querySelectorAll('.stk-tbody-main tr')).filter(
|
|
(r) => !(r as HTMLElement).className.includes('padding-top'),
|
|
) as HTMLElement[]
|
|
const tr = rows[0]
|
|
// 起运港列（pol）—— 用 data-col-key 精确定位
|
|
const polTd = tr?.querySelector('td[data-col-key="pol"]') as HTMLElement | null
|
|
const editor = polTd?.querySelector('.g3-select') as HTMLElement | null
|
|
const displayText = polTd?.textContent?.trim() ?? null
|
|
// 触发器里显示的文字
|
|
const triggerInput = editor?.querySelector('input') as HTMLInputElement | null
|
|
return {
|
|
rowKey: tr?.getAttribute('data-row-key'),
|
|
polTdText: displayText,
|
|
hasSelectEditor: !!editor,
|
|
triggerValue: triggerInput?.value ?? null,
|
|
// 展示态（非编辑）的文本
|
|
displaySpan: polTd?.querySelector('.g3-table__cell-display')?.textContent ?? null,
|
|
}
|
|
})
|
|
|
|
console.log('1) 初始: ' + JSON.stringify(await rowState()))
|
|
|
|
// 点起运港单元格进入编辑
|
|
const polCell = page.locator('.stk-tbody-main tr:not(.padding-top-tr)').first().locator('td[data-col-key="pol"]')
|
|
await polCell.click()
|
|
await page.waitForTimeout(600)
|
|
console.log('2) 进入编辑后: ' + JSON.stringify(await rowState()))
|
|
|
|
// 打开下拉
|
|
const selectRoot = polCell.locator('.g3-select')
|
|
await selectRoot.click()
|
|
await page.waitForTimeout(500)
|
|
|
|
const dropdownInfo = await page.evaluate(() => {
|
|
const panels = Array.from(document.querySelectorAll('.g3-select__dropdown, [role="listbox"], .g3-popover'))
|
|
return {
|
|
panelCount: panels.length,
|
|
options: panels.length
|
|
? Array.from(panels[panels.length - 1].querySelectorAll('[role="option"], li, .g3-select__option')).map((o) =>
|
|
(o.textContent || '').trim().slice(0, 12),
|
|
)
|
|
: [],
|
|
}
|
|
})
|
|
console.log('3) 下拉内容: ' + JSON.stringify(dropdownInfo))
|
|
|
|
// 点「宁波」
|
|
const option = page.locator('[role="option"], .g3-select__option').filter({ hasText: '宁波' }).first()
|
|
const optCount = await option.count()
|
|
console.log('4) 找到「宁波」选项数: ' + optCount)
|
|
if (optCount > 0) {
|
|
await option.click()
|
|
await page.waitForTimeout(700)
|
|
console.log('5) 点完选项后: ' + JSON.stringify(await rowState()))
|
|
console.log(' （期望 pol 立即变成 CNNGB / 宁波）')
|
|
|
|
// 再点空白处
|
|
await page.locator('.booking__title').click()
|
|
await page.waitForTimeout(700)
|
|
console.log('6) 点空白处后: ' + JSON.stringify(await rowState()))
|
|
}
|
|
|
|
console.log('ERRORS: ' + JSON.stringify(logs.slice(0, 8), null, 2))
|
|
expect(true).toBe(true)
|
|
})
|