@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/toggle-menu/automatic-filtering.spec.ts

@@ -3,18 +3,9 @@ import { test, expect } from '@playwright/test'
 test('自动过滤', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#automatic-filtering')
-  const preview = page.locator('#preview')
-  await preview.getByTitle('更新日志').click()
-  await preview.getByTitle('开发指南').click()
-  await preview.getByTitle('表单组件').click()
-  await preview.getByTitle('数据组件').click()
-  await preview.getByTitle('其他组件').click()
-  await page.getByPlaceholder('请输入过滤值').click()
-  await page.getByPlaceholder('请输入过滤值').fill('组件')
-  // 未点击搜索图标，将不会进行搜索
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(14)
-  // 点击搜索按钮
+  await page.getByRole('textbox', { name: '请输入过滤值' }).click()
+  await page.getByRole('textbox', { name: '请输入过滤值' }).fill('组件')
   await page.locator('.tiny-toggle-menu__filter-search > .tiny-svg').click()
-  // 搜索结果应该为5
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(5)
+  await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
+  await expect(page.locator('.tiny-tree-node__content').first()).toContainText('组件')
 })

package/demos/pc/app/toggle-menu/basic-usage.spec.ts

@@ -3,44 +3,13 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#basic-usage')
-  const preview = page.locator('#preview')
-  const nodes = preview.locator('.tiny-toggle-menu .tiny-tree > div')
-  // 点击文字展开
-  await preview.getByTitle('更新日志').click()
-  // 点击文字展开
-  await preview.getByTitle('开发指南').hover()
-  // “更新日志”应该被选中
-  await expect(nodes.first().locator('.tiny-tree-node__content')).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-
-  // 点击文字展开
-  await preview.getByTitle('开发指南').click()
-  // 子菜单应该可见
-  await expect(nodes.nth(1).locator('.tiny-tree-node__children')).toBeVisible()
-
-  // 点击下拉图标展开
-  await preview.getByRole('treeitem', { name: '表单组件' }).locator('svg').click()
-  // // 子菜单应该可见
-  await expect(nodes.nth(2).locator('.tiny-tree-node__children')).toBeVisible()
-
-  // 点击整个元素展开
-  await preview.getByRole('treeitem', { name: '数据组件' }).locator('div').nth(1).click()
-  // 子菜单应该可见
-  await expect(nodes.nth(3).locator('.tiny-tree-node__children')).toBeVisible()
-
-  // 点击整个元素收起
-  await preview.getByRole('treeitem', { name: '数据组件' }).locator('div').nth(1).click()
-  // 子菜单应该可见
-  await expect(nodes.nth(3).locator('.tiny-tree-node__children')).not.toBeVisible()
-
-  await preview.getByPlaceholder('请输入内容进行筛选').click()
-  // 输入筛选关键字
-  await preview.getByPlaceholder('请输入内容进行筛选').fill('组件')
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(5)
-
-  // 点击右侧收缩按钮
-  await page.locator('.tiny-toggle-menu__toggle').click()
-  // 收缩项文字不可见
-  await expect(preview.locator('.tiny-tree .tiny-toggle-menu__body:visible')).toHaveCount(0)
-  // 过滤框应该不可见
-  await expect(preview.locator('.tiny-toggle-menu .tiny-toggle-menu__filter')).toBeHidden()
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '表单组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '数据组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '其他组件', exact: true }).getByRole('img').click()
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).click()
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('组件')
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('')
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('按钮')
+  await page.locator('#basic-usage').getByRole('textbox', { name: '请输入内容进行筛选' }).fill('')
 })

package/demos/pc/app/toggle-menu/custom-icon.spec.ts

@@ -3,9 +3,8 @@ import { test, expect } from '@playwright/test'
 test('自定义菜单左侧图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#custom-icon')
-  const preview = page.locator('#preview')
-  const nodes = preview.locator('.tiny-toggle-menu .tiny-tree > div')
-  const svg = preview.getByRole('treeitem', { name: '开发指南' }).locator('svg')
+  const nodes = page.locator('.tiny-toggle-menu .tiny-tree > div')
+  const svg = page.getByRole('treeitem', { name: '开发指南' }).locator('svg')
   await expect(svg.locator('path').first()).not.toHaveAttribute('d', /^M7 21c.2 0 .5-.1.6-.2l9/)
   await svg.click()
   // 子菜单应该可见

package/demos/pc/app/toggle-menu/default-expand-all.spec.ts

@@ -3,11 +3,9 @@ import { test, expect } from '@playwright/test'
 test('默认展开所有节点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#default-expand-all')
-  const preview = page.locator('#preview')
-  // 默认所有的节点都可见
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(14)
-  await page.getByTitle('开发指南').click()
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(11)
-  await page.getByTitle('表单组件').nth(1).click()
-  await expect(preview.locator('.tiny-tree .tiny-tree-node:visible')).toHaveCount(9)
+  // 关闭所有的节点
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '表单组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '数据组件', exact: true }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '其他组件', exact: true }).getByRole('img').click()
 })

package/demos/pc/app/toggle-menu/drag-events.spec.ts

@@ -3,28 +3,16 @@ import { test, expect } from '@playwright/test'
 test('拖拽事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#drag-events')
-  const preview = page.locator('#preview')
-  const dragNode = preview
-    .getByRole('treeitem', { name: '开发指南' })
-    .locator('div')
-    .filter({ hasText: '开发指南' })
-    .first()
-  const dragToNode = preview
-    .getByRole('treeitem', { name: '数据组件' })
-    .locator('div')
-    .filter({ hasText: '数据组件' })
-    .first()
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
+  await page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).click()
+  const dragNode = page.getByRole('treeitem', { name: '引入组件' }).locator('div').nth(3).boundingBox()
   // 开始拖拽
-  await dragNode.hover()
+  const { x, y } = await dragNode
+  await page.mouse.move(x, y)
   await page.mouse.down()
-  await dragToNode.hover()
+  await page.mouse.move(x, y - 50)
+  await page.mouse.move(x, y - 100)
   await page.mouse.up()
-  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽节点后的事件' })).toBeVisible()
-  await expect(
-    page.locator('.tiny-notify').filter({ hasText: '拖拽进入某个节点（包含自身节点）时触发的事件' })
-  ).toBeVisible()
-  await expect(
-    page.locator('.tiny-notify').filter({ hasText: '拖拽经过某个节点（包含自身节点）时触发的事件' })
-  ).toBeVisible()
-  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽结束时触发的事件' })).toBeVisible()
+  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽节点后的事件' })).toBeHidden()
+  await expect(page.locator('.tiny-notify').filter({ hasText: '拖拽结束时触发的事件' })).toBeHidden()
 })

package/demos/pc/app/toggle-menu/draggable.spec.ts

@@ -3,21 +3,25 @@ import { test, expect } from '@playwright/test'
 test('拖拽节点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#draggable')
-  const preview = page.locator('#preview')
-  const nodes = preview.locator('.tiny-toggle-menu .tiny-tree > div')
-  const dragNode = preview.getByText('更新日志')
-  const dragToNode = preview
-    .getByRole('treeitem', { name: '表单组件' })
+  const dragNode = await page
     .locator('div')
-    .filter({ hasText: '表单组件' })
-    .first()
+    .filter({ hasText: /^其他组件$/ })
+    .nth(3)
+    .boundingBox()
+  const dragToNode = await await page
+    .locator('div')
+    .filter({ hasText: /^表单组件$/ })
+    .nth(3)
+    .boundingBox()
   // 开始拖拽
-  await dragNode.hover()
+  const { x, y } = await dragNode
+  const { x: dragToNodeX, y: dragToNodeY } = await dragToNode
+  // 移动事件
+  await page.mouse.move(x, y)
   await page.mouse.down()
-  await dragToNode.hover()
+  await page.mouse.move(dragToNodeX, dragToNodeY)
   await page.mouse.up()
-  // 展开子菜单
-  await dragToNode.click()
-  // “更新日志”应该在“表单组件”下可以找到
-  await expect(nodes.nth(1).locator('.tiny-toggle-menu__name').filter({ hasText: '更新日志' })).toHaveCount(1)
+  await expect(page.getByRole('treeitem', { name: '其他组件', exact: true }).locator('div').nth(3)).toContainText(
+    /^其他组件$/
+  )
 })

package/demos/pc/app/toggle-menu/node-click.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('点击节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-click')
-  const preview = page.locator('#preview')
-  await preview.getByRole('treeitem', { name: '更新日志' }).locator('div').nth(1).click()
+  await page.getByRole('treeitem', { name: '更新日志' }).locator('div').nth(1).click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' })).toBeVisible()
-  await preview.getByRole('treeitem', { name: '开发指南' }).locator('div').nth(1).click()
+  await page.getByRole('treeitem', { name: '开发指南' }).locator('div').nth(1).click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(1)).toBeVisible()
   await page.getByRole('treeitem', { name: '权限' }).locator('div').nth(1).click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '点击节点后的事件' }).nth(2)).toBeVisible()

package/demos/pc/app/toggle-menu/node-collapse.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('收缩节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-collapse')
-  const preview = page.locator('#preview')
   // 点击展开
-  await preview.getByTitle('开发指南').click()
+  await page.getByTitle('开发指南').click()
   // 点击收起
-  await preview.getByTitle('开发指南').click()
+  await page.getByTitle('开发指南').click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '收缩节点后的事件' })).toBeVisible()
 })

package/demos/pc/app/toggle-menu/node-drop.spec.ts

@@ -3,13 +3,12 @@ import { test, expect } from '@playwright/test'
 test('拖放节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-drop')
-  const preview = page.locator('#preview')
-  const dragNode = preview
+  const dragNode = page
     .getByRole('treeitem', { name: '开发指南' })
     .locator('div')
     .filter({ hasText: '开发指南' })
     .first()
-  const dragToNode = preview
+  const dragToNode = page
     .getByRole('treeitem', { name: '数据组件' })
     .locator('div')
     .filter({ hasText: '数据组件' })
@@ -19,5 +18,5 @@ test('拖放节点事件', async ({ page }) => {
   await page.mouse.down()
   await dragToNode.hover()
   await page.mouse.up()
-  await expect(page.locator('.tiny-modal').filter({ hasText: '拖放节点后的事件' })).toBeVisible()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '拖放节点后的事件' })).toBeHidden()
 })

package/demos/pc/app/toggle-menu/node-expand.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('展开节点事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#node-expand')
-  const preview = page.locator('#preview')
   // 点击展开
-  await preview.getByTitle('开发指南').click()
+  await page.getByRole('treeitem', { name: '开发指南' }).getByRole('img').click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '展开节点后的事件' }).first()).toBeVisible()
-  await preview.getByTitle('表单组件').click()
+  await page.getByRole('treeitem', { name: '表单组件', exact: true }).getByRole('img').click()
   await expect(page.locator('.tiny-modal__box').filter({ hasText: '展开节点后的事件' }).nth(1)).toBeVisible()
 })

package/demos/pc/app/toggle-menu/show-filter.spec.ts

@@ -3,9 +3,8 @@ import { test, expect } from '@playwright/test'
 test('显示过滤搜索框', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#show-filter')
-  const preview = page.locator('#preview')
   // 应该获取不到搜索框
-  await expect(preview.locator('.tiny-toggle-menu__filter')).toHaveCount(0)
+  await expect(page.locator('.tiny-toggle-menu__filter')).toHaveCount(0)
   const noWrapText = page
     .getByRole('treeitem', { name: '菜单内容超长是否换行显示，默认为不换行' })
     .locator('div')

package/demos/pc/app/toggle-menu/slot-node.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自定义节点内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#slot-node')
-  const preview = page.locator('#preview')
-  await expect(preview.locator('.tiny-toggle-menu__name > div').filter({ hasText: '表单组件3' })).toHaveCount(1)
+  await expect(page.locator('.tiny-toggle-menu__name > div').filter({ hasText: '表单组件3' })).toHaveCount(1)
   await page.getByRole('treeitem', { name: '数据组件4' }).locator('svg').click()
-  await expect(preview.locator('.tiny-toggle-menu__name > div').filter({ hasText: 'Pager 分页14' })).toHaveCount(1)
+  await expect(page.locator('.tiny-toggle-menu__name > div').filter({ hasText: 'Pager 分页14' })).toHaveCount(1)
 })

package/demos/pc/app/toggle-menu/toggle-props.spec.ts

@@ -3,17 +3,10 @@ import { test, expect } from '@playwright/test'
 test('props 选项映射', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('toggle-menu#basic-usage')
-  const preview = page.locator('#preview')
-  const nodes = preview.locator('.tiny-toggle-menu .tiny-tree > div')
+  const nodes = page.locator('.tiny-toggle-menu .tiny-tree > div')
   // 点击文字展开
-  await preview.getByTitle('更新日志').click()
   // 点击文字展开
-  await preview.getByTitle('开发指南').hover()
-  // “更新日志”应该被选中
-  await expect(nodes.first().locator('.tiny-tree-node__content')).toHaveCSS('background-color', 'rgb(94, 124, 224)')
-
-  // 点击文字展开
-  await preview.getByTitle('开发指南').click()
+  await page.getByTitle('开发指南').click()
   // 子菜单应该可见
   await expect(nodes.nth(1).locator('.tiny-tree-node__children')).toBeVisible()
 })

package/demos/pc/app/tooltip/basic-usage.spec.js

@@ -4,15 +4,17 @@ test('测试Tooltip的是否能出现', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
   await page.goto('tooltip#basic-usage')
-  let button = page.getByRole('button', { name: '上左' })
+
+  const preview = page.locator('.pc-demo-container')
+  let button = preview.getByRole('button', { name: '上左' })
   let tooltip = page.getByRole('tooltip', { name: 'Top Left 提示文字' })
 
-  await button.hover()
   await page.waitForTimeout(100)
+  await page.mouse.move(600, 300)
   await expect(tooltip).toBeVisible()
 
   // 测试Tooltip的位置是否正确
-  button = page.getByRole('button', { name: '上右' })
+  button = preview.getByRole('button', { name: '上右' })
   tooltip = page.getByRole('tooltip', { name: 'Top Right 提示文字' })
 
   await button.hover()
@@ -22,7 +24,7 @@ test('测试Tooltip的是否能出现', async ({ page }) => {
   // tooltip + 高度 要小于button的y
   expect(tooltipBox.y + tooltipBox.height).toBeLessThan(buttonBox.y)
 
-  button = page.getByRole('button', { name: '下左' })
+  button = preview.getByRole('button', { name: '下左' })
   tooltip = page.getByRole('tooltip', { name: 'Bottom Left 提示文字' })
 
   await button.hover()

package/demos/pc/app/tooltip/content.spec.js

@@ -4,9 +4,23 @@ test('测试插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#content')
 
-  const button2 = page.getByRole('button', { name: '校验错误' })
-  const tooltip2 = page.getByText('该网段不可用')
+  const button1 = page.getByRole('button', { name: '鼠标悬浮到这里' }).nth(0)
+  const tooltip1 = page.getByText('这是提示内容')
+  const button2 = page.getByRole('button', { name: '鼠标悬浮到这里' }).nth(1)
+  const tooltip2 = page.getByText('1. 提示内容')
+  const button3 = page.getByRole('button', { name: '校验错误' })
+  const tooltip3 = page.getByText('该网段不可用')
+
+  await page.waitForTimeout(10)
+  await button1.hover()
+  await expect(tooltip1).toBeVisible()
+  await page.waitForTimeout(10)
 
   await button2.hover()
   await expect(tooltip2).toBeVisible()
+  await page.waitForTimeout(10)
+
+  await button3.hover()
+  await expect(tooltip3).toBeVisible()
+  await page.waitForTimeout(10)
 })

package/demos/pc/app/tooltip/control.spec.js

@@ -10,12 +10,30 @@ test('测试手动控制tooltip', async ({ page }) => {
   const disableSwitch = preview.locator('.tiny-switch').nth(2)
 
   const pop1 = page.getByText('智能提示的提示内容')
+  const pop2 = page.getByText('手动控制模式的提示内容')
+  const pop3 = page.getByText('禁用的提示内容')
 
+  // 测试visible
   await preview.getByText('内容不超长').hover()
   await expect(pop1).toBeVisible()
-  await page.waitForTimeout(50)
+  await page.waitForTimeout(20)
 
   await visibleSwitch.click()
   await preview.getByText('内容不超长').hover()
   await expect(pop1).toBeHidden()
+
+  await page.waitForTimeout(20)
+
+  // 测试manual
+  await expect(pop2).toBeHidden()
+  await manualSwitch.click()
+  await expect(pop2).toBeVisible()
+
+  await page.waitForTimeout(20)
+
+  // 测试禁用
+  await preview.getByText('我的内容很长很长').nth(2).hover()
+  await expect(pop3).toBeVisible()
+  await disableSwitch.click()
+  await expect(pop3).toBeHidden()
 })

package/demos/pc/app/tooltip/custom-popper.spec.js

@@ -4,10 +4,39 @@ test('测试是否显示箭头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#custom-popper')
 
-  const button = page.getByRole('button', { name: '鼠标悬浮在这里' })
+  const preview = page.locator('.pc-demo-container')
+  const button = preview.getByRole('button', { name: '鼠标悬浮在这里' })
   const tip = page.getByText('我是提示内容')
+  const arrowSwitch = preview.locator('.tiny-switch').nth(0)
+  const enterableSwitch = preview.locator('.tiny-switch').nth(1)
+
   const arrow = tip.locator('div.popper__arrow')
 
+  // 测试小箭头
+  await page.waitForTimeout(20)
   await button.hover()
+  await page.waitForTimeout(20)
   await expect(arrow).toHaveCount(1)
+  await page.waitForTimeout(20)
+  await arrowSwitch.click()
+  await page.waitForTimeout(20)
+  await button.hover()
+  await expect(arrow).toHaveCount(0)
+  await page.waitForTimeout(20)
+
+  // 测试可进入
+  await tip.hover()
+  await page.waitForTimeout(20)
+  await expect(tip).toBeVisible()
+
+  await enterableSwitch.click()
+  await page.waitForTimeout(20)
+
+  await button.hover()
+  await tip.hover()
+  await page.waitForTimeout(20)
+  await expect(tip).toBeHidden()
+
+  // 测试字体
+  await expect(tip).toHaveCSS('font-size', '20px')
 })

package/demos/pc/app/tooltip/delay.spec.js

@@ -6,9 +6,31 @@ test('测试延迟显示隐藏', async ({ page }) => {
 
   const button1 = page.getByRole('button', { name: '延迟 2s 出现' })
   const tip1 = page.getByRole('tooltip', { name: '延迟 2000ms 出现' })
+  const button2 = page.getByRole('button', { name: '延迟 2s 关闭' })
+  const tip2 = page.getByRole('tooltip', { name: '延迟 2000ms 关闭' })
+  const button3 = page.getByRole('button', { name: '2s 后自动隐藏' })
+  const tip3 = page.getByRole('tooltip', { name: '2000ms后自动隐藏' })
+
   // 延迟出现
-  await page.waitForTimeout(100)
   await button1.hover()
   await page.waitForTimeout(100)
   await expect(tip1).toBeHidden()
+  await page.mouse.move(370, 320) // button1 上方
+  await page.waitForTimeout(2010)
+  await expect(tip1).toBeVisible()
+
+  // 延迟关闭
+  await page.mouse.move(500, 320) // button2 上方
+  await page.waitForTimeout(10)
+  await expect(tip2).toBeVisible()
+  await page.mouse.move(0, 0)
+  await page.waitForTimeout(2010)
+  await expect(tip2).toBeHidden()
+
+  // 自动隐藏
+  await page.mouse.move(620, 320) // button3 上方
+  await page.waitForTimeout(10)
+  await expect(tip3).toBeVisible()
+  await page.waitForTimeout(2010)
+  await expect(tip2).toBeHidden()
 })

package/demos/pc/app/tooltip/offset.spec.js

@@ -5,5 +5,28 @@ test('测试偏移量', async ({ page }) => {
   await page.goto('tooltip#offset')
 
   const tip = page.getByRole('tooltip', { name: '出现位置的偏移量' })
+  const arrow = tip.locator('.popper__arrow')
+
   await expect(tip).toBeVisible()
+
+  // 计算3个位置
+  const middle = await arrow.boundingBox()
+
+  await page.dragAndDrop('.tiny-slider__handle', '.pc-demo-container', {
+    sourcePosition: { x: 3, y: 3 },
+    targetPosition: { x: 0, y: 0 }
+  })
+  await page.waitForTimeout(10)
+  const left = await arrow.boundingBox()
+
+  await page.dragAndDrop('.tiny-slider__handle', '.pc-demo-container', {
+    sourcePosition: { x: 3, y: 3 },
+    targetPosition: { x: 600, y: 0 }
+  })
+  await page.waitForTimeout(10)
+  const right = await arrow.boundingBox()
+
+  // 测试3个位置
+  expect(left.x < middle.x)
+  expect(middle.x < right.x)
 })

package/demos/pc/app/tooltip/popper-options.spec.js

@@ -5,8 +5,11 @@ test('测试自定义popper', async ({ page }) => {
   await page.goto('tooltip#popper-options')
 
   const button = page.getByRole('button', { name: '鼠标悬浮到这里' })
-  const tooltip = page.getByRole('tooltip', { name: '提示内容' })
+  const tooltip = page.getByRole('tooltip', { name: '提示内容', includeHidden: true })
 
   await button.hover()
   await expect(tooltip).toBeVisible()
+
+  await page.mouse.move(0, 0)
+  await expect(tooltip).toHaveCount(0)
 })

package/demos/pc/app/tooltip/theme.spec.js

@@ -3,6 +3,7 @@ import { test, expect } from '@playwright/test'
 test('测试tooltip主题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tooltip#theme')
+  await page.waitForTimeout(20)
 
   await page.getByRole('button', { name: 'Dark' }).hover()
   await expect(page.getByRole('tooltip', { name: 'dark 提示文字' })).toHaveClass(/is-dark/)
@@ -24,6 +25,4 @@ test('测试tooltip主题', async ({ page }) => {
 
   await page.getByRole('button', { name: 'success' }).hover()
   await expect(page.getByRole('tooltip', { name: 'success 提示文字' })).toHaveClass(/is-success/)
-
-  await page.waitForTimeout(300)
 })

package/demos/pc/app/tooltip/transition.spec.js

@@ -10,6 +10,7 @@ test('测试自定义动画显示正常', async ({ page }) => {
   // 悬浮
   await button.hover()
   await expect(tooltip).toBeVisible()
+  await expect(tooltip).toHaveClass(/custom-transition-enter-to/)
 
   // 离开
   await page.mouse.move(0, 0)