u

code/g3soft-libs/packages/ui/e2e-erp/repro-select.spec.ts

@@ -0,0 +1,87 @@
+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)
+})