diff --git a/src/config.ts b/src/config.ts index 59e30aa..2472d88 100644 --- a/src/config.ts +++ b/src/config.ts @@ -9,7 +9,9 @@ const Config = ({ testDir, baseURL, storageState, devServerCommon }) => // 每个 expect() 用例最长时间。 timeout: 15 * 1000, toHaveScreenshot: { - maxDiffPixelRatio: 0.02 + maxDiffPixelRatio: 0.02, + threshold: 0, + maxDiffPixels: 0 } }, /* Fail the build on CI if you accidentally left test.only in the source code. */ diff --git a/tests/pager/xdesign.spec.ts b/tests/pager/xdesign.spec.ts new file mode 100644 index 0000000..34aac4e --- /dev/null +++ b/tests/pager/xdesign.spec.ts @@ -0,0 +1,90 @@ +import { expect, test } from '@playwright/test' + +test.describe('pager组件xdesign规范', () => { + test('默认与悬浮态--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('pager#page-size') + const demo = page.locator('#page-size .pc-demo') + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('basic-usage.png') + + // 页码大小悬浮状态 + const sizes = demo.locator('.tiny-pager__sizes') + await expect(demo).toBeInViewport() + await sizes.hover() + await expect(demo).toHaveScreenshot('sizes-hover.png') + // 上一页悬浮状态 + const prev = demo.locator('.tiny-pager__btn-prev') + await expect(demo).toBeInViewport() + await prev.hover() + await expect(demo).toHaveScreenshot('prev-hover.png') + // 页码悬浮状态 + const item = demo.locator('.tiny-pager__pages li').filter({ hasText: '20' }) + await expect(demo).toBeInViewport() + await prev.hover() + await expect(demo).toHaveScreenshot('page-item-hover.png') + // 下一页悬浮状态 + const next = demo.locator('.tiny-pager__btn-next') + await expect(demo).toBeInViewport() + await next.hover() + await expect(demo).toHaveScreenshot('next-hover.png') + // 跳转悬浮状态 + const goto = demo.locator('.tiny-pager__goto') + await expect(demo).toBeInViewport() + await goto.hover() + await expect(demo).toHaveScreenshot('goto-hover.png') + + }) + + test('下拉框--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('pager#page-size') + const demo = page.locator('#page-size .pc-demo') + + const sizes = demo.locator('.tiny-pager__sizes') + const popover = page.locator('.tiny-popper.tiny-pager__selector') + await sizes.click() + await expect(popover).toBeInViewport() + await expect(popover).toHaveScreenshot('popper.png') + await popover.locator('.list-item').nth(2).hover() + await expect(popover).toHaveScreenshot('popper-item-hover.png') + }) + + test('禁用--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('pager#disabled-and-size') + + const demo = page.locator('#disabled-and-size') + const mini = demo.locator('.tiny-pager.tiny-pager--mini') + const pager = demo.locator('.tiny-pager__number').first() + const switchBtn = demo.locator('.tiny-switch') + await expect(mini).toHaveScreenshot('mini.png') + + await switchBtn.click() + await expect(mini).toHaveScreenshot('mini-disabled.png') + await expect(pager).toHaveScreenshot('pager-disabled.png') + + }) + + test('分页模式--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('pager#pager-mode') + + const demo = page.locator('#pager-mode') + const pager = demo.locator('.tiny-pager') + const btn = demo.locator('.tiny-radio-button') + + await btn.first().click() + await expect(pager).toHaveScreenshot('pager-number.png') + await btn.nth(1).click() + await expect(pager).toHaveScreenshot('pager-simple.png') + await btn.nth(2).click() + await expect(pager).toHaveScreenshot('pager-complete.png') + await btn.nth(3).click() + await expect(pager).toHaveScreenshot('pager-fixed.png') + await btn.nth(4).click() + await expect(pager).toHaveScreenshot('pager-simplest.png') + + }) + +}) diff --git a/tests/pager/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png new file mode 100644 index 0000000..14bd05f Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/goto-hover-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/goto-hover-chromium-win32.png new file mode 100644 index 0000000..2aee9e7 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/goto-hover-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/mini-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/mini-chromium-win32.png new file mode 100644 index 0000000..236c288 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/mini-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/mini-disabled-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/mini-disabled-chromium-win32.png new file mode 100644 index 0000000..7140702 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/mini-disabled-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/next-hover-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/next-hover-chromium-win32.png new file mode 100644 index 0000000..85c8703 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/next-hover-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/page-item-hover-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/page-item-hover-chromium-win32.png new file mode 100644 index 0000000..85c8703 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/page-item-hover-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/pager-complete-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/pager-complete-chromium-win32.png new file mode 100644 index 0000000..fd67e60 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/pager-complete-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/pager-disabled-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/pager-disabled-chromium-win32.png new file mode 100644 index 0000000..9d7926c Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/pager-disabled-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/pager-fixed-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/pager-fixed-chromium-win32.png new file mode 100644 index 0000000..0ff5f45 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/pager-fixed-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/pager-number-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/pager-number-chromium-win32.png new file mode 100644 index 0000000..79a6fc3 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/pager-number-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/pager-simple-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/pager-simple-chromium-win32.png new file mode 100644 index 0000000..fe96fa0 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/pager-simple-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/pager-simplest-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/pager-simplest-chromium-win32.png new file mode 100644 index 0000000..5f65dc7 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/pager-simplest-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/popper-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/popper-chromium-win32.png new file mode 100644 index 0000000..1a49c5e Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/popper-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/popper-item-hover-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/popper-item-hover-chromium-win32.png new file mode 100644 index 0000000..1a49c5e Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/popper-item-hover-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/prev-hover-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/prev-hover-chromium-win32.png new file mode 100644 index 0000000..85c8703 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/prev-hover-chromium-win32.png differ diff --git a/tests/pager/xdesign.spec.ts-snapshots/sizes-hover-chromium-win32.png b/tests/pager/xdesign.spec.ts-snapshots/sizes-hover-chromium-win32.png new file mode 100644 index 0000000..85c8703 Binary files /dev/null and b/tests/pager/xdesign.spec.ts-snapshots/sizes-hover-chromium-win32.png differ