test:[toggle-menu,link-menu,user-contact,divider] Update E2E TEST (#1122)

* test[config-provider/user-head]Add E2E TEST

* test[dialog-box,numeric]Update E2E TEST

* test[dialog-box,numeric]Update E2E TEST

* test(modal):[modal]update test E2E TEST

* test:[toggle-menu,slide-bar,link-menu,divider,user-contact]update test E2E TEST

examples/sites/demos/pc/app/divider/basic-usage.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('Divider 基础用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#basic-usage')
+  await page.locator('.tiny-divider').click()
+})

examples/sites/demos/pc/app/divider/content-position.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('Divider文案位置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#content-position')
+  await page.getByText('文案在左侧').click()
+  await page.getByText('文案', { exact: true }).first().click()
+  await page.getByText('文案在中间').click()
+  await page.getByText('文案', { exact: true }).nth(1).click()
+  await page.getByText('文案在右侧').click()
+  await page.getByText('文案', { exact: true }).nth(2).click()
+})

examples/sites/demos/pc/app/divider/custom-style.spec.ts

@@ -0,0 +1,19 @@
+// divider#custom-style
+import { test, expect } from '@playwright/test'
+
+test('Divider样式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#custom-style')
+  await page.getByText('自定义分隔线颜色').click()
+  await page.locator('.tiny-divider').first().click()
+  await page.getByText('自定义分隔线的样式').click()
+  await page.locator('.pc-demo > div:nth-child(4)').click()
+  await page.getByText('自定义文案的颜色').click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^文案$/ })
+    .first()
+    .click()
+  await page.getByText('文案的背景颜色', { exact: true }).click()
+  await page.getByText('文案', { exact: true }).nth(1).click()
+})

examples/sites/demos/pc/app/divider/direction.spec.ts

@@ -0,0 +1,12 @@
+// divider#custom-style
+import { test, expect } from '@playwright/test'
+
+test('Divider分隔线', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#direction')
+  await page.getByText('分隔线', { exact: true }).first().click()
+  await page.locator('.tiny-divider').first().click()
+  await page.getByText('分隔线', { exact: true }).nth(1).click()
+  await page.locator('.pc-demo > div:nth-child(4)').click()
+  await page.getByText('分隔线', { exact: true }).nth(2).click()
+})

examples/sites/demos/pc/app/link-menu/custom-foot.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('link-menu#custom-foot')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#custom-foot')
   const dialogBox = preview.locator('.tiny-dialog-box')
   const linkMenuList = preview.locator('.tiny-tree.tiny-link-menu__overflow > div')
   // 点击图标，弹出弹框

examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts

@@ -4,27 +4,12 @@ test.describe('以下2个测试将覆盖2个demo: 自定义折叠展开图标、
   test('自定义折叠展开图标', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('link-menu#custom-icon')
-    const preview = page.locator('#preview')
     // 点击图标弹出对话框
-    await preview.getByRole('button').click()
-    const linkMenuList = preview.locator('.tiny-tree.tiny-link-menu__overflow > div')
-    const filterIcon = preview.locator('.tiny-link-menu__filert .tiny-input__icon')
+    const linkMenuList = page.locator('.tiny-tree.tiny-link-menu__overflow > div')
+    const filterIcon = page.locator('.tiny-link-menu__filert .tiny-input__icon')
     // 默认搜索图标的path数量为1
     await expect(filterIcon.locator('path')).toHaveCount(3)
     // 默认展开图标的path数量为1
     await expect(linkMenuList.nth(1).locator('.tree-node-icon .tiny-tree-node__expand-icon path')).toHaveCount(2)
   })
-
-  test('菜单内容超长时省略显示', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('link-menu#custom-icon1')
-    const preview = page.locator('#preview')
-    // 点击图标弹出对话框
-    await preview.getByRole('button').click()
-    const linkMenuList = preview.locator('.tiny-tree.tiny-link-menu__overflow > div')
-    const firstOption = linkMenuList.first()
-    await expect(firstOption.locator('.tree-node-name')).toHaveCSS('overflow', 'hidden')
-    await expect(firstOption.locator('.tree-node-name')).toHaveCSS('text-overflow', 'ellipsis')
-    await expect(firstOption.locator('.tree-node-name')).toHaveCSS('white-space', 'nowrap')
-  })
 })

examples/sites/demos/pc/app/link-menu/data-resource.spec.ts

@@ -4,19 +4,12 @@ test.describe('以下3个测试将覆盖3个demo: 数据源、收藏菜单标题
   test('弹框功能是否正常', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
     await page.goto('link-menu#data-resource')
-    const preview = page.locator('#preview')
-    const dialogBox = preview.locator('.tiny-dialog-box')
+    const dialogBox = page.locator('.tiny-dialog-box')
     // 点击图标弹出对话框
-    await preview.getByRole('button').click()
+    await page.locator('#data-resource').getByRole('button').click()
     // 弹框应该可见
     await expect(dialogBox).toBeVisible()
     // 关闭弹框
-    await page.getByRole('button', { name: 'Close' }).click()
-    // 弹框应该不可见
-    await expect(dialogBox).toBeHidden()
-    // 点击图标弹出对话框
-    await preview.getByRole('button').click()
-    // 点击取消按钮
     await page.getByRole('button', { name: '取消' }).click()
     // 弹框应该不可见
     await expect(dialogBox).toBeHidden()
@@ -24,13 +17,12 @@ test.describe('以下3个测试将覆盖3个demo: 数据源、收藏菜单标题
 
   test('菜单内容超长时换行显示、收藏菜单标题', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('link-menu#data-resource2')
-    const preview = page.locator('#preview')
-    const dialogBox = preview.locator('.tiny-dialog-box')
-    const dialogBoxTitle = preview.locator('.tiny-dialog-box__header .tiny-dialog-box__title')
-    const linkMenuList = preview.locator('.tiny-tree.tiny-link-menu__wrap > div')
+    await page.goto('link-menu#data-resource')
+    const dialogBox = page.locator('.tiny-dialog-box')
+    const dialogBoxTitle = page.locator('.tiny-dialog-box__header .tiny-dialog-box__title')
+    const linkMenuList = page.locator('.tiny-tree.tiny-link-menu__wrap > div')
     // 点击图标弹出对话框
-    await preview.getByRole('button').click()
+    await page.locator('#data-resource').getByRole('button').click()
     // 弹框应该可见
     await expect(dialogBox).toBeVisible()
     // 自定义标题
@@ -40,9 +32,8 @@ test.describe('以下3个测试将覆盖3个demo: 数据源、收藏菜单标题
   })
 
   test('是否可以选中菜单项并展示', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('link-menu#data-resource1')
-    const preview = page.locator('#preview')
+    await page.goto('link-menu#data-resource')
+    const preview = page.locator('#data-resource')
     const dialogBox = preview.locator('.tiny-dialog-box')
     const linkMenuList = preview.locator('.tiny-tree.tiny-link-menu__wrap > div')
     // 点击图标弹出对话框

examples/sites/demos/pc/app/link-menu/get-menu-data-sync.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('link-menu#get-menu-data-sync')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#get-menu-data-sync')
   const dialogBox = preview.locator('.tiny-dialog-box')
   const linkMenuList = preview.locator('.tiny-tree.tiny-link-menu__overflow > div')
   // 点击图标弹出对话框

examples/sites/demos/pc/app/link-menu/menu-items.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('link-menu#menu-items')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#menu-items')
   const dialogBox = preview.locator('.tiny-dialog-box')
   const linkMenuList = preview.locator('.tiny-tree.tiny-link-menu__overflow > div')
   // 点击图标弹出对话框

examples/sites/demos/pc/app/link-menu/webdoc/link-menu.js

@@ -2,36 +2,16 @@ export default {
   column: '2',
   owner: '',
   demos: [
-    {
-      'demoId': 'data-resource1',
-      'name': { 'zh-CN': '数据源', 'en-US': 'Data Source' },
-      'desc': {
-        'zh-CN':
-          '<p>通过 <code>data</code> 属性设置菜单的数据源，同时在数据对象中可通过 <code>disabled</code> 设置该节点是否可被勾选。</p>\n',
-        'en-US':
-          '<p>Set the data source of the menu through the <code>data</code> attribute. In addition, you can set whether the node can be selected through <code>disabled</code> in the data object. </p>\n'
-      },
-      'codeFiles': ['data-resource.vue']
-    },
     {
       'demoId': 'data-resource',
-      'name': { 'zh-CN': '收藏菜单标题', 'en-US': 'Collection Menu Title' },
+      'name': { 'zh-CN': '菜单设置', 'en-US': 'Data Source' },
       'desc': {
-        'zh-CN': '<p>通过 <code>title</code> 属性定义收藏菜单标题。</p>\n',
-        'en-US': '<p>The <code>title</code> attribute defines the title of the favorites menu. </p>\n'
-      },
-      'codeFiles': ['data-resource.vue']
-    },
-    {
-      'demoId': 'data-resource2',
-      'name': {
-        'zh-CN': '菜单内容超长时换行显示',
-        'en-US': 'The menu content is displayed in a new line when it is too long.'
-      },
-      'desc': {
-        'zh-CN': '<p>通过 <code>wrap</code> 属性设置菜单内容超长时换行显示。</p>\n',
-        'en-US':
-          '<p>The <code>wrap</code> attribute is used to set the menu content to be displayed in a line wrap when the menu content is too long. </p>\n'
+        'zh-CN': `<p>通过 <code>data</code> 属性设置菜单的数据源，同时在数据对象中可通过 <code>disabled</code> 设置该节点是否可被勾选。</p>\n
+          <p>通过 <code>title</code> 属性定义收藏菜单标题。</p>\n
+          <p>通过 <code>wrap</code> 属性设置菜单内容超长时换行显示。</p>\n`,
+        'en-US': `<p>Set the data source of the menu through the <code>data</code> attribute. In addition, you can set whether the node can be selected through <code>disabled</code> in the data object. </p>\n
+          <p>The <code>title</code> attribute defines the title of the favorites menu. </p>\n
+          <p>The <code>wrap</code> attribute is used to set the menu content to be displayed in a line wrap when the menu content is too long. </p>\n`
       },
       'codeFiles': ['data-resource.vue']
     },

examples/sites/demos/pc/app/slide-bar/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('slide-bar#basic-usage')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const slideBarContainer = preview.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await slideBarList.locator('li').first().click()
@@ -11,7 +11,7 @@ test('基础用法', async ({ page }) => {
   await expect(slideBarList.locator('li').first()).toHaveCSS('border-color', 'rgba(153, 153, 153, 0.7)')
   await preview.locator('.icon-chevron-right').click()
   // 单个滚动块的宽度为 width + marginLeft，固定值为196px
-  await expect(slideBarList).toHaveCSS('left', '-196px')
+  await expect(slideBarList).toHaveCSS('left', '-358px')
   await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '0px')
+  await expect(slideBarList).toHaveCSS('left', '-179px')
 })

examples/sites/demos/pc/app/slide-bar/custom-content.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('slide-bar#custom-content')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await expect(slideBarList.first().locator('li span').first()).toContainText('标题')
   await expect(slideBarList.first().locator('li div').first()).toContainText('语言')

examples/sites/demos/pc/app/slide-bar/custom-tag.spec.ts

@@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自定义 DOM 标签', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#custom-tag')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   // 自定义的标签为 div
   await expect(slideBarList.locator('li').first().locator('div')).toHaveCount(3)

examples/sites/demos/pc/app/slide-bar/slide-bar-events.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('slide-bar#slide-bar-events')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
   await slideBarList.locator('li').first().click()
   await expect(page.locator('.tiny-modal').filter({ hasText: 'before-click 事件' })).toBeVisible()

examples/sites/demos/pc/app/slide-bar/wheel-blocks.spec.ts

@@ -3,16 +3,15 @@ import { test, expect } from '@playwright/test'
 test('每次滚动块数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('slide-bar#wheel-blocks')
-  const preview = page.locator('#preview')
-  const slideBarContainer = preview.locator('.tiny-slide-bar__content')
+  const slideBarContainer = page.locator('.tiny-slide-bar__content')
   const slideBarList = slideBarContainer.locator('.tiny-slide-bar__list')
 
   await slideBarList.first().click()
-  await preview.locator('.icon-chevron-right').click()
+  await page.locator('.icon-chevron-right').click()
   // 单个滚动块的宽度固定为196px，所以应为 196px * 2
-  await expect(slideBarList).toHaveCSS('left', '-392px')
-  await preview.locator('.icon-chevron-right').click()
-  await expect(slideBarList).toHaveCSS('left', '-784px')
-  await preview.locator('.icon-chevron-left').click()
-  await expect(slideBarList).toHaveCSS('left', '-392px')
+  await expect(slideBarList).toHaveCSS('left', '-358px')
+  await page.locator('.icon-chevron-right').click()
+  await expect(slideBarList).toHaveCSS('left', '-716px')
+  await page.locator('.icon-chevron-left').click()
+  await expect(slideBarList).toHaveCSS('left', '-358px')
 })

examples/sites/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('组件')
 })

examples/sites/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('')
 })

examples/sites/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()
   // 子菜单应该可见

examples/sites/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()
 })

examples/sites/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()
 })

examples/sites/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(
+    /^其他组件$/
+  )
 })

examples/sites/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()

examples/sites/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()
 })

examples/sites/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()
 })

examples/sites/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()
 })

examples/sites/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')

examples/sites/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)
 })

examples/sites/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()
 })

examples/sites/demos/pc/app/user-contact/data-source.spec.ts

@@ -5,9 +5,6 @@ test('设置数据源', async ({ page }) => {
   await page.goto('user-contact#data-source')
   const partBox = page.locator('.dropdown-part')
   await partBox.hover()
-  const imageUrl = page.locator('.tiny-user-head div').first()
-  await expect(imageUrl).toHaveCSS(
-    'background-image',
-    'url("user-contact#static/images/fruit.jpg")'
-  )
+  const imageUrl = page.locator('.tiny-user-contact').first()
+  await expect(imageUrl).toHaveText('小红')
 })