fix: modify e2e test cases for the divider component

Author: James-9696

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

@@ -4,7 +4,7 @@ test('分割线文案位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('divider#content-position')
   const left = page.locator('.tiny-divider__text')
-  await expect(left.first()).toHaveCSS('left', '133px')
-  await expect(left.nth(1)).toHaveCSS('left', '304.5px')
+  await expect(left.first()).toHaveText('左侧且偏移20%')
+  await expect(left.nth(1)).toHaveText('中间')
   await expect(left.nth(2)).toHaveCSS('right', '80px')
 })

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

@@ -5,8 +5,11 @@ test('自定义样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('divider#custom-style')
   const dividerText = page.locator('.tiny-divider__text')
-  await expect(dividerText.first()).toHaveText('字体颜色')
-  await expect(dividerText.nth(1)).toHaveText('文案背景')
-  await expect(dividerText.nth(2)).toHaveText('字体大小')
-  await expect(dividerText.nth(3)).toHaveText('高度及边距')
+  const dividerMargin = page.locator('.tiny-divider')
+  const dividerLine = page.locator('.tiny-divider-line').first()
+  await expect(dividerLine.first()).toHaveCSS('border-color', 'rgb(20, 118, 255)')
+  await expect(dividerText.first()).toHaveCSS('color', 'rgb(20, 118, 255)')
+  await expect(dividerText.nth(1)).toHaveCSS('background-color', 'rgb(20, 118, 255)')
+  await expect(dividerText.nth(2)).toHaveCSS('font-size', '16px')
+  await expect(dividerMargin.nth(4)).toHaveCSS('height', '40px')
 })

examples/sites/demos/pc/app/divider/divider-type.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('分割线类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('divider#divider-type')
-  const dividerText = page.locator('.tiny-divider__text')
-  await expect(dividerText.first()).toHaveText('solid线')
-  await expect(dividerText.nth(1)).toHaveText('dashed线')
-  await expect(dividerText.nth(2)).toHaveText('dotted线')
+  const dividerText = page.locator('.tiny-divider--default')
+  await expect(dividerText.first()).toHaveCSS('border-top-style', 'solid')
+  await expect(dividerText.nth(1)).toHaveCSS('border-top-style', 'dashed')
+  await expect(dividerText.nth(2)).toHaveCSS('border-top-style', 'dotted')
 })

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

@@ -3,10 +3,10 @@ import { test, expect } from '@playwright/test'
 test('分割线状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('divider#status')
-  const dividerText = page.locator('.tiny-divider__text')
-  await expect(dividerText.first()).toHaveText('default')
-  await expect(dividerText.nth(1)).toHaveText('success')
-  await expect(dividerText.nth(2)).toHaveText('error')
-  await expect(dividerText.nth(3)).toHaveText('warning')
-  await expect(dividerText.nth(4)).toHaveText('info')
+  const dividerText = page.locator('.tiny-divider-line')
+  await expect(dividerText.first()).toHaveClass(/tiny-divider--default/)
+  await expect(dividerText.nth(1)).toHaveClass(/tiny-divider--success/)
+  await expect(dividerText.nth(2)).toHaveClass(/tiny-divider--error/)
+  await expect(dividerText.nth(3)).toHaveClass(/tiny-divider--warning/)
+  await expect(dividerText.nth(4)).toHaveClass(/tiny-divider--info/)
 })