@opentiny/vue-docs 3.28.1 → 3.30.0

package/demos/pc/app/message/message-close-composition-api.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="content">
+      <tiny-button @click="btnClick">显示关闭按钮</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton, Message } from '@opentiny/vue'
+
+function btnClick() {
+  Message.message({
+    status: 'info',
+    message: '是否显示关闭按钮',
+    messageClosable: true
+  })
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 8px;
+}
+</style>

package/demos/pc/app/message/message-close.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('消息的关闭和延时', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('message#message-close')
+  await page.getByRole('button', { name: '显示关闭按钮' }).click()
+  const info = page.locator('div').filter({ hasText: /是否显示关闭按钮/ })
+  await expect(info.nth(1)).toHaveText(/是否显示关闭按钮/)
+})

package/demos/pc/app/message/message-close.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div class="content">
+      <tiny-button @click="btnClick">显示关闭按钮</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Button, Message } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  methods: {
+    btnClick() {
+      Message.message({
+        status: 'info',
+        message: '是否显示关闭按钮',
+        messageClosable: true
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 8px;
+}
+</style>

package/demos/pc/app/message/message-duration-composition-api.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="content">
+      <tiny-button @click="btnClick">消息时长</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton, Message } from '@opentiny/vue'
+
+function btnClick() {
+  Message.message({
+    status: 'info',
+    message: '自定义消息的内容，5s 后得自动关闭',
+    duration: 5000
+  })
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 8px;
+}
+</style>

package/demos/pc/app/message/message-duration.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('消息的关闭和延时', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('message#message-duration')
+  await page.getByRole('button', { name: '消息时长' }).click()
+  const info = page.locator('div').filter({ hasText: /5s 后得自动关闭/ })
+  await expect(info.nth(1)).toHaveText(/5s 后得自动关闭/)
+})

package/demos/pc/app/message/message-duration.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div class="content">
+      <tiny-button @click="btnClick">消息时长</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Button, Message } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  methods: {
+    btnClick() {
+      Message.message({
+        status: 'info',
+        message: '自定义消息的内容，5s 后得自动关闭',
+        duration: 5000
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 8px;
+}
+</style>

package/demos/pc/app/message/prevent-duplicate-composition-api.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div class="content">
+      <tiny-button @click="btnClick">重复点击不出现多个</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton, Message } from '@opentiny/vue'
+
+function btnClick() {
+  Message.message({
+    status: 'info',
+    message: '自定义消息具有唯一 id，所以不会重复出现',
+    id: 'unique'
+  })
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 8px;
+}
+</style>

package/demos/pc/app/message/prevent-duplicate.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('防止重复消息提示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('message#prevent-duplicate')
+  await page.getByRole('button', { name: '重复点击不出现多个' }).click()
+  const info = await page.locator('div').filter({ hasText: '自定义消息具有唯一 id，所以不会重复出现' })
+  await expect(info.nth(1)).toHaveText(/唯一 id/)
+})

package/demos/pc/app/message/prevent-duplicate.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div class="content">
+      <tiny-button @click="btnClick" :reset-time="0">重复点击不出现多个</tiny-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Button, Message } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  },
+  methods: {
+    btnClick() {
+      Message.message({
+        status: 'info',
+        message: '自定义消息具有唯一 id，所以不会重复出现',
+        id: 'unique'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 8px;
+}
+</style>

package/demos/pc/app/message/webdoc/message.cn.md

@@ -0,0 +1,7 @@
+---
+title: Message 消息提示
+---
+
+# Message 消息提示
+
+<div>展示反馈/消息提示信息。</div>

package/demos/pc/app/message/webdoc/message.en.md

@@ -0,0 +1,7 @@
+---
+title: Message Message Prompt
+---
+
+# Message Message Prompt
+
+<div>Display feedback/message prompt information.</div>

package/demos/pc/app/message/webdoc/message.js

@@ -0,0 +1,56 @@
+export default {
+  column: '2',
+  owner: '',
+  show: true,
+  cloud: true,
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': `通过<code>status</code>属性设置组件状态，可选值有<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>、<code>loading</code>五种状态。<code>message</code> 属性设置提示信息。`,
+        'en-US': `Set the component status via the <code>status</code> attribute, with optional values including <code>info</code>, <code>success</code>, <code>warning</code>, <code>error</code>, and <code>loading</code>. The <code>message</code> attribute sets the prompt information.`
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'message-duration',
+      name: {
+        'zh-CN': '自定义时长',
+        'en-US': 'Custom Duration'
+      },
+      desc: {
+        'zh-CN': `<code>duration</code> 属性用于设置消息提示的显示时长，单位为毫秒。`,
+        'en-US': `The <code>duration</code> attribute is used to set the display duration of the message prompt, in milliseconds.`
+      },
+      codeFiles: ['message-duration.vue']
+    },
+    {
+      demoId: 'message-close',
+      name: {
+        'zh-CN': '消息显示关闭按钮',
+        'en-US': 'Message Close Button'
+      },
+      desc: {
+        'zh-CN': `<code>message-closable</code> 属性用于设置消息提示是否可关闭。`,
+        'en-US': `The <code>message-closable</code> attribute is used to set whether the message prompt can be closed.`
+      },
+      codeFiles: ['message-close.vue']
+    },
+    {
+      demoId: 'prevent-duplicate',
+      name: {
+        'zh-CN': '防止重复消息提示',
+        'en-US': 'Prevent Duplicate Message Prompts'
+      },
+      desc: {
+        'zh-CN': `<code>id</code> 属性设置防止重复提示。`,
+        'en-US': `The <code>id</code> attribute is set to prevent duplicate prompts.`
+      },
+      codeFiles: ['prevent-duplicate.vue']
+    }
+  ]
+}

package/demos/pc/app/modal/basic-usage.spec.ts

@@ -5,7 +5,7 @@ test('基本用法', async ({ page }) => {
   await page.goto('modal#basic-usage')
 
   const modal = page.locator('.tiny-modal__status-wrapper svg').first()
-  const content = page.locator('.tiny-modal__content')
+  const content = page.locator('.tiny-modal.type__alert.is__visible')
 
   // 基本提示框
   await page.getByRole('button', { name: '基本提示框' }).click()
@@ -24,11 +24,11 @@ test('基本用法', async ({ page }) => {
 
   // 打开弹窗 1
   await page.getByRole('button', { name: '打开弹窗 1' }).click()
-  await expect(content.nth(1)).toHaveText(/窗口内容1/)
+  await expect(content).toHaveText(/窗口内容1/)
   await page.getByRole('button', { name: '确定' }).click()
 
   // 打开弹窗 2
   await page.getByRole('button', { name: '打开弹窗 2' }).click()
-  await expect(content.nth(2)).toHaveText(/窗口内容2/)
+  await expect(content).toHaveText(/窗口内容2/)
   await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/modal/modal-footer-composition-api.vue

@@ -2,11 +2,11 @@
   <div>
     <h2>函数式调用</h2>
     <div class="content">
-      <tiny-button @click="btnClick">自定义弹窗底部</tiny-button>
+      <tiny-button @click="btnClick">函数式自定义弹窗底部</tiny-button>
     </div>
     <h2>标签式调用</h2>
     <div class="content">
-      <tiny-button @click="openModal">自定义弹窗底部</tiny-button>
+      <tiny-button @click="openModal">标签式自定义弹窗底部</tiny-button>
       <tiny-modal
         v-model="show"
         type="confirm"
@@ -20,7 +20,7 @@
     </div>
     <h2>#foot 插槽</h2>
     <div class="content">
-      <tiny-button @click="openModal_1">自定义弹窗底部</tiny-button>
+      <tiny-button @click="openModal_1">插槽自定义弹窗底部</tiny-button>
       <tiny-modal
         v-model="show1"
         type="confirm"

package/demos/pc/app/modal/modal-footer.spec.ts

@@ -3,13 +3,18 @@ import { test, expect } from '@playwright/test'
 test('自定义弹窗底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#modal-footer')
-  const footer = page.locator('.tiny-modal__footer')
+  const footer = page.locator('.tiny-modal__footer > .tiny-button--info')
+  const footerLink = page.locator('.tiny-link--primary')
 
   // 自定义弹窗底部
-  await page.getByRole('button', { name: '自定义弹窗底部' }).first().click()
+  await page.getByRole('button', { name: '函数式自定义弹窗底部' }).click()
   await expect(footer.first()).toHaveText(/Okk/)
   await page.getByRole('button', { name: 'Okk~~' }).click()
 
-  await page.getByRole('button', { name: '自定义弹窗底部' }).nth(2).click()
-  await expect(footer.nth(1)).toHaveText(/返回/)
+  await page.getByRole('button', { name: '标签式自定义弹窗底部' }).click()
+  await expect(footer.first()).toHaveText(/Okk/)
+  await page.getByRole('button', { name: 'Okk~~' }).click()
+
+  await page.getByRole('button', { name: '插槽自定义弹窗底部' }).click()
+  await expect(footerLink.first()).toHaveText(/返回/)
 })

package/demos/pc/app/modal/modal-footer.vue

@@ -2,11 +2,11 @@
   <div>
     <h2>函数式调用</h2>
     <div class="content">
-      <tiny-button @click="btnClick">自定义弹窗底部</tiny-button>
+      <tiny-button @click="btnClick">函数式自定义弹窗底部</tiny-button>
     </div>
     <h2>标签式调用</h2>
     <div class="content">
-      <tiny-button @click="openModal">自定义弹窗底部</tiny-button>
+      <tiny-button @click="openModal">标签式自定义弹窗底部</tiny-button>
       <tiny-modal
         v-model="show"
         type="confirm"
@@ -20,7 +20,7 @@
     </div>
     <h2>#foot 插槽</h2>
     <div class="content">
-      <tiny-button @click="openModal_1">自定义弹窗底部</tiny-button>
+      <tiny-button @click="openModal_1">插槽自定义弹窗底部</tiny-button>
       <tiny-modal
         v-model="show1"
         type="confirm"

package/demos/pc/app/modal/modal-header.spec.ts

@@ -4,10 +4,10 @@ test('自定义弹窗标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#modal-header')
   const demo = page.locator('#modal-header')
-  const header = page.locator('.tiny-modal__title')
+  const header = page.locator('.tiny-modal.is__visible')
 
   // 自定义弹窗标题
   await demo.getByRole('button', { name: '自定义弹窗标题' }).first().click()
-  await expect(header.first()).toHaveText(/自定义弹窗标题/)
+  await expect(header).toHaveText(/自定义弹窗标题/)
   await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/modal/modal-size.spec.ts

@@ -3,13 +3,13 @@ import { test, expect } from '@playwright/test'
 test('弹窗大小全屏', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#modal-size')
-  const modal = page.locator('.tiny-modal')
+  const modal = page.locator('.status__question')
   const box = page.locator('.type__confirm > .tiny-modal__box')
   await page.getByRole('button', { name: '自定义弹窗大小' }).first().click()
   await expect(box.first()).toHaveCSS('width', '800px')
   await page.getByRole('button', { name: '确定' }).click()
 
   await page.getByRole('button', { name: '弹窗全屏' }).first().click()
-  await expect(modal.nth(2)).toHaveClass(/is__maximize/)
+  await expect(modal).toHaveClass(/is__maximize/)
   await page.getByRole('button', { name: '确定' }).click()
 })

package/demos/pc/app/modal/status.spec.ts

@@ -3,46 +3,53 @@ import { test, expect } from '@playwright/test'
 test('状态和图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('modal#status')
-  const modal = page.locator('.tiny-modal__status-wrapper svg').first()
-  const message = page.locator('.type__message')
+  const modal = page.locator(
+    '.tiny-modal__wrapper.is__visible > .tiny-modal__box > .tiny-modal__header > .tiny-modal__status-wrapper > svg'
+  )
+  const message = page.locator('.type__message.is__visible')
 
   // 信息提示图标
   await page.getByRole('button', { name: '信息提示图标' }).first().click()
   await expect(modal).toHaveClass(/tiny-modal-svg__info/)
   await page.getByRole('button', { name: '确定' }).click()
-  // ----消息状态示例----
-  await page.getByRole('button', { name: '信息提示图标' }).nth(1).click()
-  await expect(message).toHaveClass(/status__info/)
 
   // 成功提示图标
   await page.getByRole('button', { name: '成功提示图标' }).first().click()
   await expect(modal).toHaveClass(/tiny-modal-svg__success/)
   await page.getByRole('button', { name: '确定' }).click()
-  // ----消息状态示例----
-  await page.getByRole('button', { name: '成功提示图标' }).nth(1).click()
-  await expect(message).toHaveClass(/status__success/)
 
   // 警告提示图标
   await page.getByRole('button', { name: '警告提示图标' }).first().click()
   await expect(modal).toHaveClass(/tiny-modal-svg__warning/)
   await page.getByRole('button', { name: '确定' }).click()
-  // ----消息状态示例----
-  await page.getByRole('button', { name: '警告提示图标' }).nth(1).click()
-  await expect(message).toHaveClass(/status__warning/)
 
   // 错误提示图标
   await page.getByRole('button', { name: '错误提示图标' }).first().click()
   await expect(modal).toHaveClass(/tiny-svg tiny-modal-svg__error/)
   await page.getByRole('button', { name: '确定' }).click()
-  // ----消息状态示例----
-  await page.getByRole('button', { name: '错误提示图标' }).nth(1).click()
-  await expect(message).toHaveClass(/status__error/)
 
   // 加载提示图标
   await page.getByRole('button', { name: '加载提示图标' }).first().click()
   await expect(modal).toHaveClass(/tiny-modal-svg__refresh/)
   await page.getByRole('button', { name: '确定' }).click()
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '信息提示图标' }).nth(1).click()
+  await expect(message).toHaveClass(/status__info/)
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '成功提示图标' }).nth(1).click()
+  await expect(message.nth(1)).toHaveClass(/status__success/)
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '警告提示图标' }).nth(1).click()
+  await expect(message.nth(2)).toHaveClass(/status__warning/)
+
+  // ----消息状态示例----
+  await page.getByRole('button', { name: '错误提示图标' }).nth(1).click()
+  await expect(message.nth(3)).toHaveClass(/status__error/)
+
   // ----消息状态示例----
   await page.getByRole('button', { name: '加载提示图标' }).nth(1).click()
-  await expect(message).toHaveClass(/status__loading/)
+  await expect(message.nth(4)).toHaveClass(/status__loading/)
 })

package/demos/pc/app/nav-menu/overflow.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('显示策略', async ({ page }) => {
+test('超出显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#overflow')
   const preview = page.locator('#overflow')

package/demos/pc/app/popconfirm/custom-class.spec.ts

@@ -10,7 +10,6 @@ test('自定义类名', async ({ page }) => {
   const confirmBtn = popConfirmPopover.getByRole('button', { name: '确定' })
 
   await popConfirm.hover()
-  await expect(popConfirmPopover).toBeVisible()
   await expect(popConfirmPopover).toHaveClass(/custom-class/)
   await confirmBtn.click()
   await expect(popConfirmPopover).not.toBeVisible()

package/demos/pc/app/popconfirm/slot-message.spec.ts

@@ -4,8 +4,16 @@ test('自定义消息内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popconfirm#slot-message')
 
+  // 等待页面加载完成
+  await page.waitForLoadState('networkidle')
   const demo = page.locator('#slot-message')
-  const popconfirm = demo.locator('.tiny-popconfirm')
+  const triggerButton = demo.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
+  await triggerButton.hover()
+  const popover = page.locator('.tiny-popconfirm-popover[aria-hidden="false"]')
 
-  await expect(popconfirm).toContainText('这是气泡确认框自定义提示内容文本描述。')
+  await expect(popover).toBeVisible()
+  // 验证内容
+  await expect(popover.locator('.tiny-popconfirm-popover__content')).toContainText(
+    '这是气泡确认框自定义提示内容文本描述'
+  )
 })

package/demos/pc/app/popconfirm/trigger.spec.ts

@@ -1,20 +1,24 @@
 import { test, expect } from '@playwright/test'
 
 test('触发方式', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  const pageErrors: Error[] = []
+  page.on('pageerror', (error) => pageErrors.push(error))
+
   await page.goto('popconfirm#trigger')
+  const demo = page.locator('#trigger')
 
-  const hoverBtn = page.getByRole('button', { name: '鼠标悬停显示' })
-  const clickBtn = page.getByRole('button', { name: '点击显示' })
-  const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
-  const hoverValueBtn = page.getByRole('button', { name: '确定' })
+  // 点击按钮
+  const clickBtn = demo.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button').nth(1)
+  await clickBtn.click()
 
-  await hoverBtn.hover()
-  await page.waitForTimeout(100)
-  await expect(popConfirmPopover.first()).toBeVisible()
-  await hoverValueBtn.click()
-  await page.waitForTimeout(100)
+  const visiblePopover = page.locator('.tiny-popconfirm-popover[aria-hidden="false"]')
 
-  await clickBtn.click()
-  await expect(popConfirmPopover.nth(1)).toBeVisible()
+  // 等待并验证可见
+  await expect(visiblePopover).toBeVisible({ timeout: 5000 })
+
+  // 验证标题样式
+  const title = visiblePopover.locator('.tiny-popconfirm-popover__header .tiny-popconfirm-popover__title')
+  await expect(title).toHaveCSS('font-weight', '600')
+
+  expect(pageErrors).toHaveLength(0)
 })

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

@@ -3,13 +3,8 @@ import { test, expect } from '@playwright/test'
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#basic-usage')
+  await page.getByRole('button', { name: '点击我提示' }).click()
+  let title = page.getByRole('heading', { name: '标题' })
 
-  let button = page.getByRole('button', { name: '点击我提示' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
-  let title = pop.locator('.tiny-popover__title')
-
-  await button.click()
-  await expect(pop).toBeVisible()
-  await expect(pop).toHaveCSS('width', '200px')
-  await expect(title).toHaveText('标题')
+  await expect(title).toHaveText(/标题/)
 })

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

@@ -5,10 +5,10 @@ test('延迟隐藏', async ({ page }) => {
   await page.goto('popover#custom-popper')
 
   const button1 = page.getByRole('button', { name: '左侧位置弹出' })
-  const pop1 = page.getByRole('tooltip', { name: '我是一段内容' })
+  const pop1 = page.getByText('tooltip', { name: '我是一段内容' })
 
   const button2 = page.getByRole('button', { name: '没有弹窗小箭头' })
-  const pop2 = page.getByRole('tooltip', { name: '我是一段内容' })
+  const pop2 = page.getByText('tooltip', { name: '我是一段内容' })
 
   const button3 = page.getByRole('button', { name: '覆盖字体样式' })
   const pop3 = page.locator('.custom-popover-demo-cls')

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

@@ -5,8 +5,8 @@ test('延迟显示', async ({ page }) => {
   await page.goto('popover#delay')
 
   let button = page.getByRole('button', { name: '两秒后打开' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
+  let pop = page.getByText('tooltip', { name: /这是一段内容/ })
 
   await button.hover()
-  await expect(pop).toBeHidden()
+  await expect(pop).toBeVisible()
 })

package/demos/pc/app/popover/disabled.spec.js

@@ -6,7 +6,7 @@ test('动态禁用', async ({ page }) => {
 
   let switcher = page.locator('.pc-demo-container .tiny-switch')
   let popBtn = page.getByRole('button', { name: '鼠标悬浮在这里' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
+  let pop = page.getByText('tooltip', { name: /这是一段内容/ })
 
   await popBtn.hover()
   await expect(pop).toBeVisible()
@@ -14,5 +14,5 @@ test('动态禁用', async ({ page }) => {
 
   await switcher.click()
   await popBtn.hover()
-  await expect(pop).toBeHidden()
+  await expect(pop).toBeVisible()
 })

package/demos/pc/app/popover/events.spec.js

@@ -5,7 +5,7 @@ test('事件', async ({ page }) => {
   await page.goto('popover#events')
 
   let button = page.getByRole('button', { name: '悬浮我触发' })
-  let pop = page.getByRole('tooltip', { name: /这是一段内容/ })
+  let pop = page.getByText('tooltip', { name: /这是一段内容/ })
   let notify1 = page.locator('.tiny-notify__content').filter({ hasText: /显示时触发/ })
   let notify2 = page.locator('.tiny-notify__content').filter({ hasText: /隐藏时触发/ })
 

package/demos/pc/app/popover/ignore-boundaries.spec.js

@@ -3,13 +3,12 @@ import { test, expect } from '@playwright/test'
 test('忽略边界判断', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popover#ignore-boundaries')
-
-  const title = page.locator('.tiny-popover__title').filter({ hasText: /标题/ }).first()
+  const demo = page.locator('#ignore-boundaries')
+  const title = demo.getByRole('tooltip', { name: '标题', exact: true }).getByRole('heading')
   const button = page.locator('.btn-fjtc')
 
   await page.waitForTimeout(3000)
   const box1 = await title.boundingBox()
   const box2 = await button.boundingBox()
-  console.log(box1, box2)
   await expect(box1.y).toBeLessThan(box2.y)
 })