test:[color-picker,carousel] Update E2E TEST (#1125)

* 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

* test:[carousel,color-picker]Update E2E TEST

* test:[carousel,color-picker]Update E2E TEST

* test:[carousel,color-picker]Update E2E TEST

* test:[carousel,color-picker]Update E2E TEST

* test(e2e):[carousel] Update E2E TEST

examples/sites/demos/pc/app/carousel/autoplay.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('carousel#autoplay')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#autoplay')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   // 默认显示第一张幻灯片

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

@@ -3,26 +3,17 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#basic-usage')
-  const preview = page.locator('#preview')
-  const carousel = preview.locator('.tiny-carousel')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
-  // 默认显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  await carousel.hover()
-  await page.waitForTimeout(100)
-  // 点击下一张按钮
-  await preview.locator('button:nth-child(2)').click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  // 点击上一张按钮
-  await page.locator('.tiny-carousel__arrow').first().click()
-  // 当前应该显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  // 点击底部按钮切换
+  const preview = page.locator('#basic-usage')
+  await page.locator('div').filter({ hasText: /^1$/ }).click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
   await preview.getByRole('list').getByRole('button').nth(1).click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+  await preview.getByRole('list').getByRole('button').nth(2).click()
+  await preview.getByRole('list').getByRole('button').nth(3).click()
 })

examples/sites/demos/pc/app/carousel/card-mode.spec.ts

@@ -3,42 +3,21 @@ import { test, expect } from '@playwright/test'
 test('卡片模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#card-mode')
-  const preview = page.locator('#preview')
-  const carousel = preview.locator('.tiny-carousel')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
-  // 默认显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第二张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第四张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
-
-  await carousel.hover()
-  await page.waitForTimeout(100)
-  // 点击下一张按钮
-  await preview.locator('button:nth-child(2)').click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第三张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第一张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
-
-  // 点击底部按钮切换
+  const preview = page.locator('#card-mode')
+  const carouselItems = page.locator(
+    '.tiny-carousel > .tiny-carousel__container > .tiny-carousel__item > .tiny-carousel__mask'
+  )
+  await page.locator('div').filter({ hasText: /^1$/ }).click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await expect(carouselItems).toHaveCount(4)
+  await preview.getByRole('list').getByRole('button').nth(1).click()
   await preview.getByRole('list').getByRole('button').nth(2).click()
-  // 当前应该显示第三张幻灯片
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第四张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第二张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
-
-  // 点击上一张按钮
-  await page.locator('.tiny-carousel__arrow').first().click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第三张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第一张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
+  await preview.getByRole('list').getByRole('button').nth(3).click()
 })

examples/sites/demos/pc/app/carousel/carousel-arrow-always.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('carousel#carousel-arrow-always')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-arrow-always')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   // 默认显示第一张幻灯片

examples/sites/demos/pc/app/carousel/carousel-arrow-hover.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('hover 时显示切换箭头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#carousel-arrow-hover')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-arrow-hover')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
 

examples/sites/demos/pc/app/carousel/carousel-arrow-never.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('carousel#carousel-arrow-never')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-arrow-never')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
 

examples/sites/demos/pc/app/carousel/carousel-events.spec.ts

@@ -3,23 +3,25 @@ import { test, expect } from '@playwright/test'
 test('走马灯事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#carousel-events')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-events')
   const carousel = preview.locator('.tiny-carousel')
   const carouselTip = preview.locator('.carousel-tip')
 
   await carousel.hover()
   await page.waitForTimeout(300)
   const arrow = carousel.locator('.tiny-carousel__arrow')
+  const rightArrow = page.locator('.tiny-carousel__container > button:nth-child(2)')
+  await page.locator('.tiny-carousel__arrow').first().click()
   // 左侧切换按钮应该可见
   await expect(arrow.first()).toBeVisible()
   // 右侧切换按钮应该可见
-  await expect(arrow.nth(1)).toBeVisible()
+  await expect(rightArrow).toBeVisible()
 
   // 点击左侧切换按钮
   await arrow.first().click()
   await expect(carouselTip).toHaveText(/3\D+0/)
   await page.waitForTimeout(320)
   // 点击右侧切换按钮
-  await arrow.nth(1).click()
+  await rightArrow.click()
   await expect(carouselTip).toHaveText(/0\D+3/)
 })

examples/sites/demos/pc/app/carousel/close-loop.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('carousel#close-loop')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#close-loop')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const arrow = carousel.locator('.tiny-carousel__arrow')

examples/sites/demos/pc/app/carousel/indicator-trigger.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('carousel#indicator-trigger')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#indicator-trigger')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const indicators = preview.getByRole('list').getByRole('button')
 

examples/sites/demos/pc/app/carousel/manual-play.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('carousel#manual-play')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#manual-play')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const numButtons = preview.locator('#num').getByRole('button')
 

examples/sites/demos/pc/app/carousel/play-interval.spec.ts

@@ -3,15 +3,11 @@ import { test, expect } from '@playwright/test'
 test('轮播间隔时间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#play-interval')
-  const preview = page.locator('#preview')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
-
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-  await page.waitForTimeout(1000)
-  // 当前应该显示第三张幻灯片
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-  await page.waitForTimeout(1000)
-  // 当前应该显示第四张幻灯片
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+  const preview = page.locator('#play-interval')
+  const carouselItems = preview.locator('div.tiny-carousel__item.is-animating')
+  const carouselItemsActive = preview.locator('div.tiny-carousel__item.is-active')
+  await expect(carouselItems).toHaveCSS('transition', 'transform 0.4s ease-in-out 0s')
+  await page.waitForTimeout(500)
+  await expect(carouselItemsActive).toHaveCSS('z-index', '2')
+  await page.waitForTimeout(500)
 })

examples/sites/demos/pc/app/carousel/show-title.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('carousel#show-title')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#show-title')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const indicators = preview.getByRole('list').getByRole('button')
   await expect(carouselItems.first().locator('span')).toHaveText('幻灯片 - 1')

examples/sites/demos/pc/app/carousel/up-down-carousel.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('carousel#up-down-carousel')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#up-down-carousel')
   const indicators = preview.getByRole('button')
   const carouselItems = preview.locator('.tiny-carousel__item')
   await indicators.nth(1).hover()

examples/sites/demos/pc/app/color-picker/history.spec.ts

@@ -8,8 +8,8 @@ test('测试历史记录', async ({ page }) => {
   const arrow = page.locator('.tiny-collapse-item__arrow')
   await arrow.click()
   await expect(page.locator('.tiny-color-select-panel__history')).toHaveCount(1)
-  await page.locator('.mr20.fw-bold').click()
-  //用户行为更改历史记录测试
+  await page.getByRole('button', { name: '选择' }).click()
+  // 用户行为更改历史记录测试
   await page.getByRole('button', { name: 'Append history color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
@@ -17,7 +17,7 @@ test('测试历史记录', async ({ page }) => {
   await expect(
     page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
   ).toBeVisible()
-  //点击色块中心，并点击选择，历史记录增加1的测试
+  // 点击色块中心，并点击选择，历史记录增加1的测试
   const black = page.locator('.black')
   const center = await black.boundingBox()
   const x = center?.x ?? 0 + (center?.width ?? 0) / 2

examples/sites/demos/pc/app/color-picker/predefine.spec.ts

@@ -10,8 +10,8 @@ test('测试预定义颜色', async ({ page }) => {
   await expect(
     page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
   ).toBeVisible()
-  await page.locator('.mr20.fw-bold').click()
-  //用户行为预定义颜色测试
+  await page.getByRole('button', { name: '选择' }).click()
+  // 用户行为预定义颜色测试
   await page.getByRole('button', { name: 'Append predefine color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')