diff --git a/tests/date-picker/xdesign.spec.ts b/tests/date-picker/xdesign.spec.ts new file mode 100644 index 0000000..b5a3618 --- /dev/null +++ b/tests/date-picker/xdesign.spec.ts @@ -0,0 +1,125 @@ +import { expect, test } from '@playwright/test' + +test.describe('date-picker 组件xdesign规范', () => { + test('默认--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('date-picker#basic-usage') + const demo = page.locator('#basic-usage .pc-demo') + const demoPage = page.locator('#doc-layout div').filter({ hasText: '示例API基本用法支持选择日期、日期时间、周、月份、年份。' }).nth(2) + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('basic-usage.png') + + const close = page.getByText('支持选择日期、日期时间、周、月份、年份。') + const input1 = demo.getByPlaceholder('请选择日期').nth(1) + const input2 = demo.getByPlaceholder('请选择日期').nth(3) + const input3 = demo.getByRole('textbox', { name: '请选择周' }) + const input4 = demo.getByRole('textbox', { name: '请选择月份' }) + const input5 = demo.getByRole('textbox', { name: '请选择季度' }) + const input6 = demo.getByRole('textbox', { name: '请选择年份' }) + + await input1.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('basic-click1.png') + await close.click() + + await input2.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('basic-click2.png') + await close.click() + + await input3.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('basic-click3.png') + await close.click() + + await input4.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('basic-click4.png') + await close.click() + + await input5.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('basic-click5.png') + await close.click() + + await input6.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('basic-click6.png') + await close.click() + + }) + + test('范围选择--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('date-picker#date-range') + const demo = page.locator('#date-range .pc-demo') + const closeBtn = page.getByLabel('示例', { exact: true }).getByText('范围选择') + const demoPage = page.locator('#doc-layout div').filter({ hasText: '示例API范围选择设置 type 属性为' }).nth(2) + + const input1 = demo.getByPlaceholder('结束日期').first() + await input1.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('date-range1.png') + await closeBtn.click() + + const input2 = demo.getByPlaceholder('结束日期').nth(1) + await input2.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('date-range2.png') + await closeBtn.click() + + const input3 = demo.getByPlaceholder('结束月份') + await input3.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('date-range3.png') + await closeBtn.click() + + const input4 = demo.getByPlaceholder('结束年份') + await input4.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('date-range4.png') + + }) + + test('禁用状态--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('date-picker#disabled') + // 禁用状态 截图 + const demo = page.locator('#disabled .pc-demo') + const input = demo.getByRole('textbox', { name: '请选择日期' }).first() + const rangeInput = demo.getByPlaceholder('结束日期') + const demoPage = page.locator('#doc-layout div').filter({ hasText: '示例API禁用状态通过设置 disabled 为 true' }).nth(3) + + await input.hover() + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('disabled-hover.png') + + await rangeInput.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('disabled-range.png') + }) + + test('清除输入--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('date-picker#clear') + const demo = page.locator('#clear .pc-demo') + + const input = demo.getByRole('textbox').nth(1) + await input.hover() + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('clear-hover.png') + }) + + + test('周次序号--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('date-picker#custom-weeks') + const demo = page.locator('#custom-weeks .pc-demo') + + const input = demo.getByRole('textbox').nth(2) + const demoPage = page.locator('#doc-layout div').filter({ hasText: '示例API周次序号通过设置 show-week-' }).nth(3) + await input.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('weeks.png') + }) +}) diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/basic-click1-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click1-chromium-win32.png new file mode 100644 index 0000000..7db283d Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click1-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/basic-click2-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click2-chromium-win32.png new file mode 100644 index 0000000..dbbb1c3 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click2-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/basic-click3-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click3-chromium-win32.png new file mode 100644 index 0000000..3b28fdb Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click3-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/basic-click4-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click4-chromium-win32.png new file mode 100644 index 0000000..b12c283 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click4-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/basic-click5-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click5-chromium-win32.png new file mode 100644 index 0000000..18cfa76 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click5-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/basic-click6-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click6-chromium-win32.png new file mode 100644 index 0000000..3e58a09 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/basic-click6-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png new file mode 100644 index 0000000..f8dec28 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/clear-hover-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/clear-hover-chromium-win32.png new file mode 100644 index 0000000..6bf7bf3 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/clear-hover-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/date-range1-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/date-range1-chromium-win32.png new file mode 100644 index 0000000..c8db57f Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/date-range1-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/date-range2-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/date-range2-chromium-win32.png new file mode 100644 index 0000000..77b55d1 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/date-range2-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/date-range3-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/date-range3-chromium-win32.png new file mode 100644 index 0000000..3f79246 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/date-range3-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/date-range4-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/date-range4-chromium-win32.png new file mode 100644 index 0000000..3ee30e6 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/date-range4-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/disabled-hover-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/disabled-hover-chromium-win32.png new file mode 100644 index 0000000..93fb412 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/disabled-hover-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/disabled-range-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/disabled-range-chromium-win32.png new file mode 100644 index 0000000..a0d5eb6 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/disabled-range-chromium-win32.png differ diff --git a/tests/date-picker/xdesign.spec.ts-snapshots/weeks-chromium-win32.png b/tests/date-picker/xdesign.spec.ts-snapshots/weeks-chromium-win32.png new file mode 100644 index 0000000..78fb019 Binary files /dev/null and b/tests/date-picker/xdesign.spec.ts-snapshots/weeks-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts b/tests/time-picker/xdesign.spec.ts new file mode 100644 index 0000000..07cbd57 --- /dev/null +++ b/tests/time-picker/xdesign.spec.ts @@ -0,0 +1,67 @@ +import { expect, test } from '@playwright/test' + +test.describe('time-picker 组件xdesign规范', () => { + test('默认--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('time-picker#basic-usage') + const demo = page.locator('#basic-usage .pc-demo') + const demoPage = page.getByText('title: TimePicker 时间选择器 TimePicker 时间选择器 用于选择时间（时分秒）。 示例API基本用法默认是通过滚动的方式选择时间，') + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('basic-usage.png') + + // hover时截图 + const input = demo.getByRole('textbox', { name: ':40:00' }).first() + await input.hover() + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('basic-hover.png') + + // 弹窗后截图 + await input.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('basic-click.png') + + // 时间hover时截图 + const time = page.locator('li').filter({ hasText: '39' }).nth(2) + await time.hover() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('time-hover.png') + }) + + test('固定时间范围--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('time-picker#picker-options') + const demo = page.locator('#picker-options .pc-demo') + + const input = demo.getByRole('textbox', { name: ':40:00' }) + const demoPage = page.locator('#doc-layout div').filter({ hasText: '示例API固定时间范围picker-options' }).nth(2) + await input.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('picker-options.png') + }) + + test('选择时间范围--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('time-picker#is-range') + const demo = page.locator('#is-range .pc-demo') + + const input = page.getByRole('textbox').nth(1) + const demoPage = page.locator('#doc-layout div').filter({ hasText: '示例API选择时间范围is-range' }).nth(2) + await input.hover() + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('is-range-hover.png') + await input.click() + await expect(demoPage).toBeInViewport() + await expect(demoPage).toHaveScreenshot('is-range-click.png') + }) + + test('禁用状态--UI截图', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('time-picker#disabled') + const demo = page.locator('#disabled .pc-demo') + // 禁用状态 截图 + const input = demo.getByRole('textbox', { name: ':40:00' }).first() + await input.hover() + await expect(demo).toBeInViewport() + await expect(demo).toHaveScreenshot('disabled-hover.png') + }) +}) diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/basic-click-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/basic-click-chromium-win32.png new file mode 100644 index 0000000..68a077a Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/basic-click-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/basic-hover-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/basic-hover-chromium-win32.png new file mode 100644 index 0000000..3cc7de5 Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/basic-hover-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png new file mode 100644 index 0000000..d40145c Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/disabled-hover-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/disabled-hover-chromium-win32.png new file mode 100644 index 0000000..653d076 Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/disabled-hover-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/is-range-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/is-range-chromium-win32.png new file mode 100644 index 0000000..d712bca Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/is-range-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/is-range-click-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/is-range-click-chromium-win32.png new file mode 100644 index 0000000..48b8f1c Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/is-range-click-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/is-range-hover-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/is-range-hover-chromium-win32.png new file mode 100644 index 0000000..16a2001 Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/is-range-hover-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/picker-options-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/picker-options-chromium-win32.png new file mode 100644 index 0000000..ed28653 Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/picker-options-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/size-default-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/size-default-chromium-win32.png new file mode 100644 index 0000000..62fdcee Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/size-default-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/size-medium-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/size-medium-chromium-win32.png new file mode 100644 index 0000000..62fdcee Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/size-medium-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/size-mini-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/size-mini-chromium-win32.png new file mode 100644 index 0000000..b7ee737 Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/size-mini-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/size-small-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/size-small-chromium-win32.png new file mode 100644 index 0000000..b7ee737 Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/size-small-chromium-win32.png differ diff --git a/tests/time-picker/xdesign.spec.ts-snapshots/time-hover-chromium-win32.png b/tests/time-picker/xdesign.spec.ts-snapshots/time-hover-chromium-win32.png new file mode 100644 index 0000000..4c4fdf1 Binary files /dev/null and b/tests/time-picker/xdesign.spec.ts-snapshots/time-hover-chromium-win32.png differ