test(grid): add grid UI E2E test case

Author: gimmyhehe

tests/grid/xdesign/align.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件表格对齐xdesign规范', () => {
+  test('表头对齐--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-align#align-header-align')
+    const demo = page.locator('#align-header-align .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('header-align.png')
+  })
+
+  test('表尾对齐--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-align#align-footer-align')
+    const demo = page.locator('#align-footer-align .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('footer-align.png')
+  })
+
+  test('表格对齐--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-align#align-grid-align')
+    const demo = page.locator('#align-grid-align .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('grid-align.png')
+  })
+
+})  

tests/grid/xdesign/align.spec.ts-snapshots/footer-align-chromium-win32.png

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件外观设置xdesign规范', () => {
+  test('边框--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-appearance-settings#appearance-settings-grid-border')
+    const demo = page.locator('#appearance-settings-grid-border .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('border.png')
+
+    // 带边框的hover
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.hover()
+    await expect(demo).toHaveScreenshot('border-hover.png')
+  })
+
+  test('斑马纹--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-appearance-settings#appearance-settings-stripe')
+    const demo = page.locator('#appearance-settings-stripe .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('stripe.png')
+
+    // 斑马纹的hover
+    const secondRow = demo.locator('.tiny-grid-body__row').nth(1)
+    await secondRow.hover()
+    await expect(demo).toHaveScreenshot('stripe-hover.png')
+    // 斑马纹选中
+    await secondRow.locator('.tiny-grid-checkbox__icon').click()
+    await expect(demo).toHaveScreenshot('stripe-select.png')
+  })
+
+})  

tests/grid/xdesign/align.spec.ts-snapshots/grid-align-chromium-win32.png

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件编辑xdesign规范', () => {
+  test('编辑--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-editor#editor-inner-editor')
+    const demo = page.locator('#editor-inner-editor .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('edit.png')
+
+    // 编辑态
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.locator('.tiny-grid-cell').filter({ hasText: 'GFD科技YX公司' }).click()
+    await expect(demo).toHaveScreenshot('edit-active.png')
+  })
+})  

tests/grid/xdesign/align.spec.ts-snapshots/header-align-chromium-win32.png

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件空数据xdesign规范', () => {
+  test('空数据--UI截图', async ({ page }) => {
+
+    await page.goto('grid-empty#empty-empty-data-default-tip')
+    const demo = page.locator('#empty-empty-data-default-tip .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('empty.png')
+  })
+
+  test('空数据居中--UI截图', async ({ page }) => {
+
+    await page.goto('grid-empty#empty-empty-data-iscenter')
+    const demo = page.locator('#empty-empty-data-iscenter .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('center-empty.png')
+
+  })
+})  

tests/grid/xdesign/appearance.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件展开行xdesign规范', () => {
+  test('展开行--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-expand#expand-has-row-expand')
+    const demo = page.locator('#expand-has-row-expand .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('expand.png')
+
+    // 展开态
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.locator('.tiny-grid__expanded').click()
+    await expect(demo).toHaveScreenshot('expand-active.png')
+  })
+
+  test('嵌套表格--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-expand#expand-nested-grid')
+    const demo = page.locator('#expand-nested-grid .pc-demo')
+
+    await expect(demo).toBeInViewport()
+
+    // 展开态
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.locator('.tiny-grid__expanded').click()
+    await expect(demo).toHaveScreenshot('nest-grid.png')
+  })
+}) 

tests/grid/xdesign/appearance.spec.ts-snapshots/border-chromium-win32.png

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件过滤xdesign规范', () => {
+  test('过滤--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-filter#filter-default-filter')
+    const demo = page.locator('#filter-default-filter .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('filter.png')
+
+    // 编辑态
+    const header = demo.locator('.tiny-grid-header__row').first()
+    await header.locator('.tiny-grid-cell').filter({ hasText: '城市' }).locator('.tiny-grid-filter-wrapper').click()
+    await page.locator('.tiny-grid__filter-option').filter({ hasText: '中山' }).locator('svg').click()
+    await expect(demo).toHaveScreenshot('filter-active.png')
+  })
+}) 

tests/grid/xdesign/appearance.spec.ts-snapshots/border-hover-chromium-win32.png

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件冻结xdesign规范', () => {
+  test('左冻结--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-fixed#fixed-left-fixed')
+    const demo = page.locator('#fixed-left-fixed .pc-demo')
+
+    await expect(demo).toBeInViewport()
+
+    // 滚动到右边
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.click()
+    await page.mouse.wheel(2000, 0)
+    await expect(demo).toHaveScreenshot('left-fixed.png')
+  })
+
+  test('右冻结--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-fixed#fixed-right-fixed')
+    const demo = page.locator('#fixed-right-fixed .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('right-fixed.png')
+  })
+
+  test('分组表头冻结--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-fixed#group-header-fixed')
+    const demo = page.locator('#group-header-fixed .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('group-fixed.png')
+  })
+}) 

tests/grid/xdesign/appearance.spec.ts-snapshots/stripe-chromium-win32.png

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件加载中xdesign规范', () => {
+  test('加载中--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-loading#loading-grid-loading-tip')
+    const demo = page.locator('#loading-grid-loading-tip .pc-demo')
+
+    await expect(demo).toHaveScreenshot('loading.png')
+  })
+}) 

tests/grid/xdesign/appearance.spec.ts-snapshots/stripe-hover-chromium-win32.png

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件分页xdesign规范', () => {
+  test('分页--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-pager#pager-inner-default-pager')
+    const demo = page.locator('#pager-inner-default-pager .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('pager.png')
+
+  })
+}) 

tests/grid/xdesign/appearance.spec.ts-snapshots/stripe-select-chromium-win32.png

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件选中行xdesign规范', () => {
+  test('基本用法--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-operation-column#operation-column-selection-operation')
+    const demo = page.locator('#operation-column-selection-operation .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('basic-usage.png')
+
+    // 表格行悬浮
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.hover()
+    await expect(demo).toHaveScreenshot('row-hover.png')
+
+    // 选中某一行
+    await firstRow.locator('.tiny-grid-checkbox__icon').click()
+    await expect(demo).toHaveScreenshot('selection.png')
+
+    // 全部选中
+    await demo.locator('.tiny-grid-header__row .tiny-grid-checkbox__icon').click()
+    await expect(demo).toHaveScreenshot('all-selection.png')
+  })
+
+
+  test('单选--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    
+    await page.goto('grid-operation-column#operation-column-clear-and-set-radio-row')
+    const demo = page.locator('#operation-column-clear-and-set-radio-row .pc-demo')
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('radio.png')
+    // 单选行悬浮
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.hover()
+    await expect(demo).toHaveScreenshot('radio-hover.png')
+
+    // 单选选中某一行
+    await firstRow.locator('.tiny-grid-radio').click()
+    await expect(demo).toHaveScreenshot('radio.png')
+  })
+})

tests/grid/xdesign/edit.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件尺寸xdesign规范', () => {
+  test('尺寸--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-size#size-grid-size')
+    const demo = page.locator('#size-grid-size .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await demo.locator('.tiny-tabs__item__title').filter({ hasText: 'mini' }).click()
+
+    const miniGrid = demo.locator('.tiny-grid__wrapper.size__mini')
+    await expect(miniGrid).toHaveScreenshot('mini.png')
+  })
+}) 

tests/grid/xdesign/edit.spec.ts-snapshots/edit-active-chromium-win32.png

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件排序xdesign规范', () => {
+  test('排序--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-sort#sort-default-sort')
+    const demo = page.locator('#sort-default-sort .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('sort.png')
+
+    // 编辑态
+    const header = demo.locator('.tiny-grid-header__row').first()
+    await header.locator('.tiny-grid-cell').filter({ hasText: '员工数排序点击表头排序，可以通过配置 trigger 设置触发源' }).locator('svg').click()
+    await expect(demo).toHaveScreenshot('sort-active.png')
+  })
+}) 

tests/grid/xdesign/edit.spec.ts-snapshots/edit-chromium-win32.png

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件工具栏xdesign规范', () => {
+  test('工具栏--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-toolbar#toolbar-insert-delete-update')
+    const demo = page.locator('#toolbar-insert-delete-update .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('toolbar.png')
+  })
+
+  test('大工具栏--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-toolbar#toolbar-copy-row-data')
+    const demo = page.locator('#toolbar-copy-row-data .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('large.png')
+  })
+
+  test('两行工具栏--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-toolbar#toolbar-custom-toolbar')
+    const demo = page.locator('#toolbar-custom-toolbar .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('two-row.png')
+  })
+}) 

tests/grid/xdesign/empty.spec.ts

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件树表xdesign规范', () => {
+  test('树表--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-tree-table#tree-table-set-tree-expansion')
+    const demo = page.locator('#tree-table-set-tree-expansion .pc-demo')
+    const grid = demo.locator('.tiny-grid.tiny-grid__wrapper')
+
+    await page.setViewportSize({
+      width: 1400,
+      height: 1200
+    })
+
+    await expect(grid).toBeInViewport()
+    await expect(grid).toHaveScreenshot('tree.png')
+
+    // 展开态
+    await demo.locator('button').filter({ hasText: '展开所有树节点' }).click()
+    await expect(grid).toHaveScreenshot('tree-expand.png')
+  })
+}) 

tests/grid/xdesign/empty.spec.ts-snapshots/center-empty-chromium-win32.png

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('grid 组件校验xdesign规范', () => {
+  test('气泡提示校验--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-validation#validation-editing-validation')
+    const demo = page.locator('#validation-editing-validation .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    const second = demo.locator('.tiny-grid-body__row').nth(1)
+    await second.locator('.tiny-grid-cell').filter({ hasText: 'WWW科技YX公司' }).click()
+    await second.locator('input').fill('')
+    await expect(demo).toHaveScreenshot('validate.png')
+  })
+
+  test('行内提示校验--UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('grid-validation#valid-config')
+    const demo = page.locator('#valid-config .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    // 编辑态
+    const firstRow = demo.locator('.tiny-grid-body__row').first()
+    await firstRow.locator('td').nth(3).click()
+    await expect(demo).toHaveScreenshot('inline-validate.png')
+  })
+})