From 44468866fe93bb3157c3b728de63fe90d1c578ed Mon Sep 17 00:00:00 2001 From: James <72028410+James-9696@users.noreply.github.com> Date: Wed, 13 Dec 2023 17:39:29 +0800 Subject: [PATCH] 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 --- .../demos/pc/app/divider/basic-usage.spec.ts | 7 +++ .../pc/app/divider/content-position.spec.ts | 12 +++++ .../demos/pc/app/divider/custom-style.spec.ts | 19 +++++++ .../demos/pc/app/divider/direction.spec.ts | 12 +++++ .../pc/app/link-menu/custom-foot.spec.ts | 2 +- .../pc/app/link-menu/custom-icon.spec.ts | 19 +------ .../pc/app/link-menu/data-resource.spec.ts | 27 ++++------ .../app/link-menu/get-menu-data-sync.spec.ts | 2 +- .../demos/pc/app/link-menu/menu-items.spec.ts | 2 +- .../pc/app/link-menu/webdoc/link-menu.js | 34 +++---------- .../pc/app/slide-bar/basic-usage.spec.ts | 6 +-- .../pc/app/slide-bar/custom-content.spec.ts | 3 +- .../demos/pc/app/slide-bar/custom-tag.spec.ts | 3 +- .../pc/app/slide-bar/slide-bar-events.spec.ts | 3 +- .../pc/app/slide-bar/wheel-blocks.spec.ts | 15 +++--- .../toggle-menu/automatic-filtering.spec.ts | 17 ++----- .../pc/app/toggle-menu/basic-usage.spec.ts | 49 ++++--------------- .../pc/app/toggle-menu/custom-icon.spec.ts | 5 +- .../toggle-menu/default-expand-all.spec.ts | 12 ++--- .../pc/app/toggle-menu/drag-events.spec.ts | 30 ++++-------- .../pc/app/toggle-menu/draggable.spec.ts | 30 +++++++----- .../pc/app/toggle-menu/node-click.spec.ts | 5 +- .../pc/app/toggle-menu/node-collapse.spec.ts | 5 +- .../pc/app/toggle-menu/node-drop.spec.ts | 7 ++- .../pc/app/toggle-menu/node-expand.spec.ts | 5 +- .../pc/app/toggle-menu/show-filter.spec.ts | 3 +- .../pc/app/toggle-menu/slot-node.spec.ts | 5 +- .../pc/app/toggle-menu/toggle-props.spec.ts | 11 +---- .../pc/app/user-contact/data-source.spec.ts | 7 +-- 29 files changed, 146 insertions(+), 211 deletions(-) create mode 100644 examples/sites/demos/pc/app/divider/basic-usage.spec.ts create mode 100644 examples/sites/demos/pc/app/divider/content-position.spec.ts create mode 100644 examples/sites/demos/pc/app/divider/custom-style.spec.ts create mode 100644 examples/sites/demos/pc/app/divider/direction.spec.ts diff --git a/examples/sites/demos/pc/app/divider/basic-usage.spec.ts b/examples/sites/demos/pc/app/divider/basic-usage.spec.ts new file mode 100644 index 000000000..84df68842 --- /dev/null +++ b/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() +}) diff --git a/examples/sites/demos/pc/app/divider/content-position.spec.ts b/examples/sites/demos/pc/app/divider/content-position.spec.ts new file mode 100644 index 000000000..4a174bf99 --- /dev/null +++ b/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() +}) diff --git a/examples/sites/demos/pc/app/divider/custom-style.spec.ts b/examples/sites/demos/pc/app/divider/custom-style.spec.ts new file mode 100644 index 000000000..439cda6eb --- /dev/null +++ b/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() +}) diff --git a/examples/sites/demos/pc/app/divider/direction.spec.ts b/examples/sites/demos/pc/app/divider/direction.spec.ts new file mode 100644 index 000000000..637528e38 --- /dev/null +++ b/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() +}) diff --git a/examples/sites/demos/pc/app/link-menu/custom-foot.spec.ts b/examples/sites/demos/pc/app/link-menu/custom-foot.spec.ts index 26aab79ac..01def12d5 100644 --- a/examples/sites/demos/pc/app/link-menu/custom-foot.spec.ts +++ b/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') // 点击图标，弹出弹框 diff --git a/examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts b/examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts index 7f1e94951..fbc66d0e9 100644 --- a/examples/sites/demos/pc/app/link-menu/custom-icon.spec.ts +++ b/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') - }) }) diff --git a/examples/sites/demos/pc/app/link-menu/data-resource.spec.ts b/examples/sites/demos/pc/app/link-menu/data-resource.spec.ts index 2098cb0bf..2eb0903c2 100644 --- a/examples/sites/demos/pc/app/link-menu/data-resource.spec.ts +++ b/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') // 点击图标弹出对话框 diff --git a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.spec.ts b/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.spec.ts index d88f448a5..d0d9d75f5 100644 --- a/examples/sites/demos/pc/app/link-menu/get-menu-data-sync.spec.ts +++ b/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') // 点击图标弹出对话框 diff --git a/examples/sites/demos/pc/app/link-menu/menu-items.spec.ts b/examples/sites/demos/pc/app/link-menu/menu-items.spec.ts index 49d0cbf2f..9a34f4bb5 100644 --- a/examples/sites/demos/pc/app/link-menu/menu-items.spec.ts +++ b/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') // 点击图标弹出对话框 diff --git a/examples/sites/demos/pc/app/link-menu/webdoc/link-menu.js b/examples/sites/demos/pc/app/link-menu/webdoc/link-menu.js index eabe57b9f..02c2532ab 100644 --- a/examples/sites/demos/pc/app/link-menu/webdoc/link-menu.js +++ b/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': - '

通过 data 属性设置菜单的数据源，同时在数据对象中可通过 disabled 设置该节点是否可被勾选。

\n', - 'en-US': - '

Set the data source of the menu through the data attribute. In addition, you can set whether the node can be selected through disabled in the data object.

\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': '

通过 title 属性定义收藏菜单标题。

\n', - 'en-US': '

The title attribute defines the title of the favorites menu.

\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': '

通过 wrap 属性设置菜单内容超长时换行显示。

\n', - 'en-US': - '

The wrap attribute is used to set the menu content to be displayed in a line wrap when the menu content is too long.

\n' + 'zh-CN': `

通过 data 属性设置菜单的数据源，同时在数据对象中可通过 disabled 设置该节点是否可被勾选。

\n +

通过 title 属性定义收藏菜单标题。

\n +

通过 wrap 属性设置菜单内容超长时换行显示。

\n`, + 'en-US': `

Set the data source of the menu through the data attribute. In addition, you can set whether the node can be selected through disabled in the data object.

\n +

The title attribute defines the title of the favorites menu.

\n +

The wrap attribute is used to set the menu content to be displayed in a line wrap when the menu content is too long.

\n` }, 'codeFiles': ['data-resource.vue'] }, diff --git a/examples/sites/demos/pc/app/slide-bar/basic-usage.spec.ts b/examples/sites/demos/pc/app/slide-bar/basic-usage.spec.ts index d95685834..631e3855e 100644 --- a/examples/sites/demos/pc/app/slide-bar/basic-usage.spec.ts +++ b/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') }) diff --git a/examples/sites/demos/pc/app/slide-bar/custom-content.spec.ts b/examples/sites/demos/pc/app/slide-bar/custom-content.spec.ts index eeac10659..cf66d9198 100644 --- a/examples/sites/demos/pc/app/slide-bar/custom-content.spec.ts +++ b/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('语言') diff --git a/examples/sites/demos/pc/app/slide-bar/custom-tag.spec.ts b/examples/sites/demos/pc/app/slide-bar/custom-tag.spec.ts index a13708d70..21ffd914b 100644 --- a/examples/sites/demos/pc/app/slide-bar/custom-tag.spec.ts +++ b/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) diff --git a/examples/sites/demos/pc/app/slide-bar/slide-bar-events.spec.ts b/examples/sites/demos/pc/app/slide-bar/slide-bar-events.spec.ts index e409f6509..a02e1780d 100644 --- a/examples/sites/demos/pc/app/slide-bar/slide-bar-events.spec.ts +++ b/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() diff --git a/examples/sites/demos/pc/app/slide-bar/wheel-blocks.spec.ts b/examples/sites/demos/pc/app/slide-bar/wheel-blocks.spec.ts index 7e56dd4a1..8851ea108 100644 --- a/examples/sites/demos/pc/app/slide-bar/wheel-blocks.spec.ts +++ b/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') }) diff --git a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.spec.ts b/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.spec.ts index b2cd15f2b..52915892e 100644 --- a/examples/sites/demos/pc/app/toggle-menu/automatic-filtering.spec.ts +++ b/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('组件') }) diff --git a/examples/sites/demos/pc/app/toggle-menu/basic-usage.spec.ts b/examples/sites/demos/pc/app/toggle-menu/basic-usage.spec.ts index cdfda9769..ce82e341a 100644 --- a/examples/sites/demos/pc/app/toggle-menu/basic-usage.spec.ts +++ b/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('') }) diff --git a/examples/sites/demos/pc/app/toggle-menu/custom-icon.spec.ts b/examples/sites/demos/pc/app/toggle-menu/custom-icon.spec.ts index 02f049d9a..d83aeb52f 100644 --- a/examples/sites/demos/pc/app/toggle-menu/custom-icon.spec.ts +++ b/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() // 子菜单应该可见 diff --git a/examples/sites/demos/pc/app/toggle-menu/default-expand-all.spec.ts b/examples/sites/demos/pc/app/toggle-menu/default-expand-all.spec.ts index fd2d2f5d5..70f49ead6 100644 --- a/examples/sites/demos/pc/app/toggle-menu/default-expand-all.spec.ts +++ b/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() }) diff --git a/examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts b/examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts index d971b5115..5380a8aad 100644 --- a/examples/sites/demos/pc/app/toggle-menu/drag-events.spec.ts +++ b/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() }) diff --git a/examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts b/examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts index 25e89f577..47334e44a 100644 --- a/examples/sites/demos/pc/app/toggle-menu/draggable.spec.ts +++ b/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( + /^其他组件$/ + ) }) diff --git a/examples/sites/demos/pc/app/toggle-menu/node-click.spec.ts b/examples/sites/demos/pc/app/toggle-menu/node-click.spec.ts index d072ff355..13390086d 100644 --- a/examples/sites/demos/pc/app/toggle-menu/node-click.spec.ts +++ b/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() diff --git a/examples/sites/demos/pc/app/toggle-menu/node-collapse.spec.ts b/examples/sites/demos/pc/app/toggle-menu/node-collapse.spec.ts index ddc2150fe..a75c53613 100644 --- a/examples/sites/demos/pc/app/toggle-menu/node-collapse.spec.ts +++ b/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() }) diff --git a/examples/sites/demos/pc/app/toggle-menu/node-drop.spec.ts b/examples/sites/demos/pc/app/toggle-menu/node-drop.spec.ts index 9e606d5d6..0cf7470ad 100644 --- a/examples/sites/demos/pc/app/toggle-menu/node-drop.spec.ts +++ b/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() }) diff --git a/examples/sites/demos/pc/app/toggle-menu/node-expand.spec.ts b/examples/sites/demos/pc/app/toggle-menu/node-expand.spec.ts index d5dba357d..6c80e729f 100644 --- a/examples/sites/demos/pc/app/toggle-menu/node-expand.spec.ts +++ b/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() }) diff --git a/examples/sites/demos/pc/app/toggle-menu/show-filter.spec.ts b/examples/sites/demos/pc/app/toggle-menu/show-filter.spec.ts index 22096021d..611c851b4 100644 --- a/examples/sites/demos/pc/app/toggle-menu/show-filter.spec.ts +++ b/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') diff --git a/examples/sites/demos/pc/app/toggle-menu/slot-node.spec.ts b/examples/sites/demos/pc/app/toggle-menu/slot-node.spec.ts index 887725ba3..8a88b3ad0 100644 --- a/examples/sites/demos/pc/app/toggle-menu/slot-node.spec.ts +++ b/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) }) diff --git a/examples/sites/demos/pc/app/toggle-menu/toggle-props.spec.ts b/examples/sites/demos/pc/app/toggle-menu/toggle-props.spec.ts index 9269a6a76..a1a8c5312 100644 --- a/examples/sites/demos/pc/app/toggle-menu/toggle-props.spec.ts +++ b/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() }) diff --git a/examples/sites/demos/pc/app/user-contact/data-source.spec.ts b/examples/sites/demos/pc/app/user-contact/data-source.spec.ts index 25b759cb4..82a0f0f32 100644 --- a/examples/sites/demos/pc/app/user-contact/data-source.spec.ts +++ b/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('小红') })