test(carousel): add ui-test (#54)

tests/carousel/xdesign.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('carousel组件xdesign规范', () => {
+  test('基本用法--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#basic-usage')
+    const demo = page.locator('#basic-usage')
+    const carousel = demo.locator('.tiny-carousel')
+    await carousel.getByRole('list').getByRole('button').nth(1).click()
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('basic-usage.png')
+  })
+  test('显示左右箭头--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#carousel-arrow-always')
+    const demo = page.locator('#carousel-arrow-always')
+    // 按钮常态、悬浮
+    await demo.locator('.tiny-carousel__arrow').first().click()
+    const carousel = demo.locator('.tiny-carousel')
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('carousel-arrow-always.png')
+  })
+  test('箭头禁用--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#close-loop')
+    const demo = page.locator('#close-loop')
+    const carousel = demo.locator('.tiny-carousel')
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('close-loop.png')
+  })
+  test('纵向轮播--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#up-down-carousel')
+    const demo = page.locator('#up-down-carousel')
+    const carousel = demo.locator('.tiny-carousel')
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('up-down-carousel.png')
+  })
+  test('显示标题--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#show-title')
+    const demo = page.locator('#show-title')
+    const carousel = demo.locator('.tiny-carousel')
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('show-title.png')
+  })
+  test('卡片模式--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#card-mode')
+    const demo = page.locator('#card-mode')
+    const carousel = demo.locator('.tiny-carousel')
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('card-mode.png')
+  })
+  test('插槽模式--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#card-show')
+    const demo = page.locator('#card-show')
+    const carousel = demo.locator('.tiny-carousel')
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('card-show.png')
+  })
+  test('弹窗模式--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('carousel#dialog-show')
+    const demo = page.locator('#dialog-show')
+    await demo.getByRole('button', { name: '弹出轮播' }).click()
+    const carousel = demo.locator('.tiny-dialog-box')
+    await expect(carousel).toBeInViewport()
+    await expect(carousel).toHaveScreenshot('dialog-card.png')
+  })
+})