fix(divider): [divider] modify e2e test cases for the divider component (#2766)

* fix: modify e2e test cases for the divider component

* fix: modify e2e test cases for the divider component

Author: James-9696

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()).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

@@ -1,19 +1,15 @@
 // 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')
+  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/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--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

@@ -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-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/)
+})