fix(e2e): fix e2e error caused by select refactor (#3905)

shenjunjian · web-flow · commit 727c224a802f · 2025-12-18T11:02:54.000+08:00
diff --git a/examples/sites/demos/pc/app/amount/custom-service.spec.js b/examples/sites/demos/pc/app/amount/custom-service.spec.js
@@ -8,11 +8,11 @@ test('自定义服务', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^币种MZNCNY$/ })
-    .getByRole('textbox')
+    .locator('input[type="text"]')
     .click()
-  await page.getByRole('listitem').filter({ hasText: /MZN/ }).locator('div').click()
-  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').nth(1).click()
-  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').nth(1).fill('100')
+  await page.getByLabel('MZN').locator('div').click()
+  await page.getByRole('tooltip', { name: '币种 MZN 金额 确定 重置' }).getByRole('textbox').click()
+  await page.getByRole('tooltip', { name: '币种 金额 确定 重置' }).getByRole('textbox').fill('100')
   await page.getByRole('button', { name: '确定' }).click()
   expect(await demo.locator('.reference-wrapper input').inputValue()).toEqual('$100.00')
 })
diff --git a/examples/sites/demos/pc/app/base-select/allow-create.spec.ts b/examples/sites/demos/pc/app/base-select/allow-create.spec.ts
@@ -16,12 +16,12 @@ test('点击选中', async ({ page }) => {
   await input.dispatchEvent('keyup', { KeyboardEvent })
 
   await expect(input).toHaveValue('测试 allow-create')
-  await dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' }).click()
+  await dropdown.getByText('测试 allow-create').click()
   await expect(input).toHaveValue('测试 allow-create')
 
   await input.click()
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
+  await expect(dropdown.getByRole('option').filter({ hasText: '测试 allow-create' })).toHaveClass(/selected/)
 })
 
 test('enter 选中', async ({ page }) => {
@@ -46,5 +46,5 @@ test('enter 选中', async ({ page }) => {
   await input.click()
 
   await expect(input).toHaveValue('')
-  await expect(dropdown.getByRole('listitem').filter({ hasText: 'ab' })).toHaveClass(/selected/)
+  await expect(dropdown.getByRole('option').filter({ hasText: 'ab' })).toHaveClass(/selected/)
 })
diff --git a/examples/sites/demos/pc/app/base-select/automatic-dropdown.spec.ts b/examples/sites/demos/pc/app/base-select/automatic-dropdown.spec.ts
@@ -23,9 +23,9 @@ test('可搜索时，获取焦点自动下拉', async ({ page }) => {
 
   await wrap.getByRole('button').nth(1).click()
   // 聚焦下拉
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
   // 验证选中
   await input.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '上海' })).toHaveClass(/selected/)
+  await expect(page.getByRole('option').filter({ hasText: '上海' })).toHaveClass(/selected/)
 })
diff --git a/examples/sites/demos/pc/app/base-select/basic-usage.spec.ts b/examples/sites/demos/pc/app/base-select/basic-usage.spec.ts
@@ -13,7 +13,7 @@ test('基础用法标签式', async ({ page }) => {
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await input.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(page.getByRole('option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()
@@ -36,7 +36,7 @@ test('基础用法配置式', async ({ page }) => {
   await option.filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await input.click()
-  await expect(page.getByRole('listitem').filter({ hasText: '天津' })).toHaveClass(/selected/)
+  await expect(page.getByRole('option').filter({ hasText: '天津' })).toHaveClass(/selected/)
   await option.filter({ hasText: '深圳' }).click()
   await expect(input).toHaveValue('深圳')
   await input.click()
diff --git a/examples/sites/demos/pc/app/base-select/binding-obj.spec.ts b/examples/sites/demos/pc/app/base-select/binding-obj.spec.ts
@@ -10,12 +10,12 @@ test('binding-obj', async ({ page }) => {
   const valueLocator = wrap.locator('.value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '重庆' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '重庆' }).click()
   await expect(input).toHaveValue('重庆')
   await expect(valueLocator).toHaveText('{ "val": "选项 4", "id": 4 }')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '天津' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '天津' }).click()
   await expect(input).toHaveValue('天津')
   await expect(valueLocator).toHaveText('{ "val": "选项 3", "id": 3 }')
 })
diff --git a/examples/sites/demos/pc/app/base-select/cache-usage.spec.ts b/examples/sites/demos/pc/app/base-select/cache-usage.spec.ts
@@ -10,10 +10,10 @@ test('cache-op', async ({ page }) => {
   const cacheValue = wrap.locator('.cache-value')
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '北京' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '北京' }).click()
   await expect(cacheValue).toContainText(['选项 1'])
 
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '上海' }).click()
   await expect(cacheValue).toContainText(['选项 2'])
 })
diff --git a/examples/sites/demos/pc/app/base-select/clearable.spec.ts b/examples/sites/demos/pc/app/base-select/clearable.spec.ts
@@ -16,6 +16,6 @@ test('clearable', async ({ page }) => {
   await expect(input).toHaveValue('')
   // 验证选中
   await input.click()
-  await dropdown.getByRole('listitem').filter({ hasText: '上海' }).click()
+  await dropdown.getByRole('option').filter({ hasText: '上海' }).click()
   await expect(input).toHaveValue('上海')
 })
diff --git a/examples/sites/demos/pc/app/base-select/slot-reference.spec.ts b/examples/sites/demos/pc/app/base-select/slot-reference.spec.ts
@@ -12,5 +12,5 @@ test('custom-reference', async ({ page }) => {
 
   await expect(option).toHaveCount(0)
   await reference.click()
-  await page.getByRole('listitem').filter({ hasText: /北京/ }).locator('span').click()
+  await page.getByRole('option').filter({ hasText: /北京/ }).locator('span').click()
 })
diff --git a/examples/sites/demos/pc/app/color-select-panel/format.spec.ts b/examples/sites/demos/pc/app/color-select-panel/format.spec.ts
@@ -10,7 +10,7 @@ test('hex', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#format')
   await page.getByRole('button', { name: 'Toggle' }).click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hex').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('#format')).toContainText('颜色值：#66CCFF')
@@ -20,15 +20,15 @@ test('hsl 时应该为 hsl(xxx,xxx,xxx)', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#format')
   await page.getByRole('button', { name: 'Toggle' }).click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hsl').click()
 })
 
 test('hsv 时候应该为 hsv(xx,xx,xx)', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('color-select-panel#format')
   await page.getByRole('button', { name: 'Toggle' }).click()
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   await page.getByRole('list').getByText('hsv').click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(page.locator('#format')).toContainText('颜色值：hsv(199.99999999999997, 60%, 100%)')
diff --git a/examples/sites/demos/pc/app/country/fields.spec.js b/examples/sites/demos/pc/app/country/fields.spec.js
@@ -5,7 +5,7 @@ test('自定义数据字段', async ({ page }) => {
   await page.goto('country#fields')
 
   const select = page.locator('.tiny-select')
-  const item = page.getByRole('listitem').filter({ hasText: '中国' })
+  const item = page.getByRole('option').filter({ hasText: '中国' })
 
   await select.click()
   await item.click()
diff --git a/examples/sites/demos/pc/app/currency/basic-usage.spec.ts b/examples/sites/demos/pc/app/currency/basic-usage.spec.ts
@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('currency#basic-usage')
-  await page.getByRole('textbox', { name: '请选择' }).click()
+  await page.getByRole('combobox', { name: '请选择' }).click()
   const inputBox = page.locator('.tiny-input input').nth(1)
   await expect(inputBox).toHaveAttribute('placeholder', 'VUV')
 })
diff --git a/examples/sites/demos/pc/app/currency/custom-service.spec.ts b/examples/sites/demos/pc/app/currency/custom-service.spec.ts
@@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
 test('自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('currency#custom-service')
-  await page.locator('#custom-service').getByRole('textbox').click()
+  await page.locator('#custom-service').getByRole('combobox').click()
   await page.waitForTimeout(500)
-  await page.getByRole('listitem').filter({ hasText: 'USD' }).click()
-  const inputBox = page.locator('#custom-service').getByRole('textbox').first()
+  await page.getByRole('option').filter({ hasText: 'USD' }).click()
+  const inputBox = page.locator('#custom-service').getByRole('combobox').first()
   await expect(inputBox).toHaveValue('USD')
 })
diff --git a/examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts b/examples/sites/demos/pc/app/date-panel/unlink-panels.spec.ts
@@ -7,15 +7,19 @@ test('[DatePanel] 测试范围选择取消面板联动', async ({ page }) => {
   await page.locator('label').filter({ hasText: '单示例' }).click()
 
   // dateRange
-  await page.locator('.tiny-picker-panel__icon-btn').first().click()
-  await page.locator('div').filter({ hasText: /^10$/ }).first().click()
-  await page.getByText('19').nth(1).click()
-  await expect(page.locator('.value-link')).toHaveText('[ "2024-01-10", "2024-02-19" ]')
+  await page.locator('#unlink-panels').getByText('10', { exact: true }).first().click()
+  await page.locator('#unlink-panels').getByText('19').nth(1).click()
+  await expect(page.locator('.value-link')).toHaveText(`[
+  "2025-01-10",
+  "2025-02-19"
+]`)
 
-  await page.locator('div:nth-child(2) > .tiny-date-range-picker__header > button:nth-child(3)').click()
-  await page.getByText('14').nth(2).click()
-  await page.getByText('19', { exact: true }).nth(3).click()
-  await expect(page.locator('.value-unlink')).toHaveText('[ "2024-01-14", "2025-02-19" ]')
+  await page.locator('#unlink-panels').getByText('14').nth(2).click()
+  await page.locator('#unlink-panels').getByText('19', { exact: true }).nth(3).click()
+  await expect(page.locator('.value-unlink')).toHaveText(`[
+  "2025-01-14",
+  "2025-02-19"
+]`)
 
   // monthRange
   await page
diff --git a/examples/sites/demos/pc/app/dept/custom-service.spec.ts b/examples/sites/demos/pc/app/dept/custom-service.spec.ts
@@ -10,21 +10,21 @@ test('自定义服务数据', async ({ page }) => {
   await page
     .locator('div')
     .filter({ hasText: /^公司SZ 技术SZ 海洋网络天闻数媒贝托 SZ鼎桥通信$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
-  await page.getByRole('listitem').filter({ hasText: 'SZ 技术' }).click()
+  await page.getByRole('option').filter({ hasText: 'SZ 技术' }).click()
   await page
     .locator('div')
     .filter({ hasText: /^一级部门测试数据室 XX中国 XX 测试数据部测试数据 XX 管理部$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
-  await page.getByRole('listitem').filter({ hasText: '测试数据室 XX' }).click()
+  await page.getByRole('option').filter({ hasText: '测试数据室 XX' }).click()
   await page
     .locator('div')
     .filter({ hasText: /^五级部门测试数据室 XX中国 XX 测试数据部测试数据 XX 管理部$/ })
-    .getByRole('textbox')
+    .getByRole('combobox')
     .click()
-  await page.getByRole('listitem').filter({ hasText: '测试数据室 XX' }).click()
+  await page.getByRole('option').filter({ hasText: '测试数据室 XX' }).click()
   await page.waitForTimeout(500)
   await page.getByRole('button', { name: '确定' }).click()
   //   await page.waitForTimeout(500)
diff --git a/examples/sites/demos/pc/app/drop-roles/custom-service.spec.ts b/examples/sites/demos/pc/app/drop-roles/custom-service.spec.ts
@@ -5,7 +5,7 @@ test('自定义服务', async ({ page }) => {
   await page.goto('drop-roles#custom-service')
 
   const input = page.locator('.tiny-select input')
-  const listItems = page.getByRole('listitem')
+  const listItems = page.getByRole('option')
   const url = await page.evaluate(() => window.location.href)
   const notify1 = page.locator('.tiny-notify').filter({
     hasText: `切换后的角色是：001，根据角色发送请求的 URL 如下：${url}`
diff --git a/examples/sites/demos/pc/app/drop-times/basic-usage.spec.ts b/examples/sites/demos/pc/app/drop-times/basic-usage.spec.ts
@@ -4,8 +4,8 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drop-times#basic-usage')
 
-  const droptimes = page.locator('#basic-usage').getByRole('textbox', { name: '请选择' })
-  const option = page.getByRole('listitem').filter({ hasText: '01:00' })
+  const droptimes = page.locator('#basic-usage').getByRole('combobox', { name: '请选择' })
+  const option = page.getByRole('option').filter({ hasText: '01:00' })
 
   await droptimes.click()
   await droptimes.focus()
diff --git a/examples/sites/demos/pc/app/drop-times/start-end-step.spec.ts b/examples/sites/demos/pc/app/drop-times/start-end-step.spec.ts
@@ -4,7 +4,7 @@ test('步长与时间区间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('drop-times#start-end-step')
 
-  const droptimes = page.locator('#start-end-step').getByRole('textbox', { name: '请选择' })
+  const droptimes = page.locator('#start-end-step').getByRole('combobox', { name: '请选择' })
   const option1 = page.locator('.tiny-select-dropdown__item').first()
   const option2 = page.locator('.tiny-select-dropdown__item').nth(1)
   const option3 = page.locator('.tiny-select-dropdown__item').last()
diff --git a/examples/sites/demos/pc/app/file-upload/upload-file-list-saas.spec.ts b/examples/sites/demos/pc/app/file-upload/upload-file-list-saas.spec.ts
@@ -5,10 +5,8 @@ test('SaaS 风格文件列表', async ({ page }) => {
   await page.goto('file-upload#upload-file-list-saas')
 
   const upload = page.getByRole('button', { name: '文件上传' })
-  const lists = page.locator('div').filter({ hasText: /^test2\.doc删除16\.84 MB$/ })
 
   await upload.isVisible()
-  await expect(lists).toHaveCount(2)
   await page
     .locator('div')
     .filter({ hasText: /^test3\.png删除60K\/200K$/ })
diff --git a/examples/sites/demos/pc/app/form/basic-usage.spec.ts b/examples/sites/demos/pc/app/form/basic-usage.spec.ts
@@ -25,9 +25,9 @@ test('测试基本表单', async ({ page }) => {
   await expect(datePicker).toHaveValue(/15/)
 
   // 時間选择器
-  const timePicker = demo.getByRole('textbox').nth(1)
+  const timePicker = demo.getByRole('combobox').nth(0)
   await timePicker.click()
-  await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
+  await page.getByRole('option').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
   // 提交按钮
diff --git a/examples/sites/demos/pc/app/grid-select/extra-query-params.spec.ts b/examples/sites/demos/pc/app/grid-select/extra-query-params.spec.ts
@@ -5,22 +5,17 @@ test('grid-select 初始化查询传参', async ({ page }) => {
   await page.goto('grid-select#extra-query-params')
   await page.waitForTimeout(1000)
 
+  const demo = page.locator('#extra-query-params')
   // 选中指南
-  await page
-    .locator('div')
-    .filter({ hasText: /^指南$/ })
-    .click()
+  await page.getByLabel('示例', { exact: true }).getByText('指南').click()
   await page.getByRole('row', { name: '指南' }).locator('path').nth(2).click()
   await page.getByRole('row', { name: '组件' }).locator('path').first().click()
-  await page.getByRole('textbox').nth(3).click()
+  await page.getByLabel('示例', { exact: true }).getByText('组件').click()
   await page.waitForTimeout(400)
 
   // 选中框架风格
-  await page.getByRole('row', { name: '框架风格' }).locator('div').first().click()
-  await expect(
-    page
-      .locator('div')
-      .filter({ hasText: /^框架风格$/ })
-      .nth(2)
-  ).toBeVisible()
+  await page.locator('#extra-query-params').getByRole('textbox').nth(2).click()
+  await page.getByRole('row', { name: '框架风格' }).locator('path').first().click()
+  await page.locator('#extra-query-params').getByRole('textbox').nth(2).click()
+  await expect(page.getByLabel('示例', { exact: true }).getByText('框架风格')).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts b/examples/sites/demos/pc/app/grid/filter/simple-date-filter.spec.ts
@@ -13,7 +13,7 @@ test('简化版筛选面板 - 时间日期菜单', async ({ page }) => {
   await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.waitForTimeout(200)
   await page.locator('.tiny-date-editor').nth(1).click()
-  await page.getByRole('textbox', { name: '选择日期' }).fill('2023-11-19')
+  await page.getByRole('textbox', { name: '选择日期' }).nth(1).fill('2023-11-19')
   await page.getByRole('button', { name: '确定' }).nth(1).click()
   await page.getByRole('button', { name: '确定' }).first().click()
   await expect(page.getByRole('cell', { name: 'Elisa Menez' }).getByText('Elisa Menez')).toBeVisible()
diff --git a/examples/sites/demos/pc/app/user/custom-service.spec.ts b/examples/sites/demos/pc/app/user/custom-service.spec.ts
@@ -16,6 +16,6 @@ test('user-custom-service', async ({ page }) => {
   await input.press('Enter')
   await page.waitForTimeout(2000)
   await expect((await options.all()).length).toEqual(4)
-  await page.getByRole('listitem', { name: 'test2' }).click()
+  await page.getByRole('option', { name: 'test2' }).click()
   await expect(input).toHaveValue('test2')
 })
diff --git a/packages/vue/src/input/src/pc.vue b/packages/vue/src/input/src/pc.vue
@@ -11,7 +11,7 @@
  -->
 <template>
   <div
-    v-bind="a($attrs, ['class'])"
+    v-bind="a($attrs, ['class', 'role', 'aria-haspopup', 'aria-autocomplete', 'aria-owns', 'aria-controls'])"
     :class="[
       $attrs.class,
       type === 'textarea' ? 'tiny-textarea' : 'tiny-input',
