fix: modify e2e test cases for the divider component

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

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('divider#basic-usage')
+  const dividerCss = page.locator('.tiny-divider .tiny-divider--default, .tiny-divider.tiny-divider--default')
+  await expect(dividerCss).toHaveCSS('border-color', 'rgb(219, 219, 219)')
+})

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

@@ -1,12 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('Divider 文案位置', async ({ page }) => {
+test('分割线文案位置', 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()
+  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.nth(2)).toHaveCSS('right', '80px')
 })

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

@@ -1,19 +1,12 @@
 // divider#custom-style
 import { test, expect } from '@playwright/test'
 
-test('Divider 样式', async ({ page }) => {
+test('自定义样式', 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()
+  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('高度及边距')
 })

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

@@ -1,12 +1,10 @@
 // divider#custom-style
 import { test, expect } from '@playwright/test'
 
-test('Divider 分隔线', async ({ page }) => {
+test('垂直分割线', 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()
+  const dividerCss = page.locator('.tiny-divider--vertical')
+  await expect(dividerCss.first()).toHaveCSS('vertical-align', 'middle')
+  await expect(dividerCss.first()).toHaveCSS('border-left', '1px solid rgb(219, 219, 219)')
 })

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

@@ -0,0 +1,10 @@
+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线')
+})

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

@@ -0,0 +1,12 @@
+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')
+})