chore: e2e test & CI integration (#2740)

.github/workflows/cypress.yml

@@ -0,0 +1,36 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - feat_v3.x
+  pull_request:
+    branches:
+      - feat_v3.x
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        run: corepack enable pnpm
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Run E2E Tests for H5
+        env:
+          CI: true
+        run: pnpm cypress install --force && pnpm e2e:run:h5
+
+      # Taro的自动化测试，demo包管理解决后解除注释
+      # - name: Run E2E Tests for Taro
+      #   env:
+      #     CI: true
+      #   pnpm cypress install --force && run: pnpm e2e:run:taro

cypress.config.ts

@@ -2,9 +2,8 @@ import { defineConfig } from 'cypress'
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:10086/#/',
-    specPattern: 'cypress/e2e/**/*.js',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
   },
-  viewportWidth: 414,
-  viewportHeight: 896,
+  viewportWidth: 375,
+  viewportHeight: 667,
 })

cypress/e2e/common/pageWhiteTest.cy.js

@@ -0,0 +1,32 @@
+import { visitH5Demo, visitTaroDemo } from '../utils/visit-demo.cy.js'
+import data from '../../../src/config.json'
+
+const { nav } = data
+export const checkH5Blank = () => {
+  const componentArr = nav
+    .map((i) => i.packages)
+    .flat(Infinity)
+    .filter((i) => i.show)
+    .map((i) => i.name)
+
+  it('check h5 demos blank', () => {
+    componentArr.forEach((com) => {
+      visitH5Demo(com)
+    })
+  })
+}
+export const checkTaroBlank = () => {
+  it('check taro demos blank', () => {
+    nav.forEach((item) => {
+      const path = item.enName
+      item.packages
+        .filter((i) => i.show && i.taro && i.version === '3.0.0')
+        .forEach((i) => {
+          visitTaroDemo(path, i.name)
+        })
+    })
+  })
+}
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false
+})

cypress/e2e/h5/base.cy.js

@@ -0,0 +1,25 @@
+import { visitH5Demo } from '../utils/visit-demo'
+
+describe('base components test', () => {
+  it('Button', () => {
+    visitH5Demo('Button')
+  })
+  it('Cell', () => {
+    visitH5Demo('Cell')
+  })
+  it('ConfigProvider', () => {
+    visitH5Demo('ConfigProvider')
+  })
+  it('Icon', () => {
+    visitH5Demo('Icon')
+  })
+  it('Image', () => {
+    visitH5Demo('Image')
+  })
+  it('Overlay', () => {
+    visitH5Demo('Overlay')
+  })
+})
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false
+})

cypress/e2e/h5/bussiness.cy.js

@@ -0,0 +1,22 @@
+import { visitH5Demo } from '../utils/visit-demo'
+
+describe('bussiness components test', () => {
+  it('Barrage', () => {
+    visitH5Demo('Barrage')
+  })
+  it('Card', () => {
+    visitH5Demo('Card')
+  })
+  it('TimeSelect', () => {
+    visitH5Demo('TimeSelect')
+  })
+  it('TrendArrow', () => {
+    visitH5Demo('TrendArrow')
+  })
+  it('WaterMark', () => {
+    visitH5Demo('WaterMark')
+  })
+  it('AvatarCropper', () => {
+    visitH5Demo('AvatarCropper')
+  })
+})

cypress/e2e/h5/dentry.cy.js

@@ -0,0 +1,67 @@
+import { visitH5Demo } from '../utils/visit-demo'
+
+describe('dentry components test', () => {
+  it('Address', () => {
+    visitH5Demo('Address')
+  })
+  it('Calendar', () => {
+    visitH5Demo('Calendar')
+  })
+  it('CalendarCard', () => {
+    visitH5Demo('CalendarCard')
+  })
+  it('Cascader', () => {
+    visitH5Demo('Cascader')
+  })
+  it('Checkbox', () => {
+    visitH5Demo('Checkbox')
+  })
+  it('DatePicker', () => {
+    visitH5Demo('DatePicker')
+  })
+  it('Form', () => {
+    visitH5Demo('Form')
+  })
+  it('Input', () => {
+    visitH5Demo('Input')
+  })
+  it('InputNumber', () => {
+    visitH5Demo('InputNumber')
+  })
+  it('Menu', () => {
+    visitH5Demo('Menu')
+  })
+  it('NumberKeyboard', () => {
+    visitH5Demo('NumberKeyboard')
+  })
+  it('Picker', () => {
+    visitH5Demo('Picker')
+  })
+  it('Radio', () => {
+    visitH5Demo('Radio')
+  })
+  it('Range', () => {
+    visitH5Demo('Range')
+  })
+  it('Rate', () => {
+    visitH5Demo('Rate')
+  })
+  it('SearchBar', () => {
+    visitH5Demo('SearchBar')
+  })
+  it('ShortPassword', () => {
+    visitH5Demo('ShortPassword')
+  })
+  it('Signature', () => {
+    visitH5Demo('Signature')
+  })
+  it('Switch', () => {
+    visitH5Demo('Switch')
+  })
+  it('TextArea', () => {
+    visitH5Demo('TextArea')
+  })
+  it('Uploader', () => {
+    visitH5Demo('Uploader')
+  })
+})

cypress/e2e/h5/exhibition.cy.js

@@ -0,0 +1,61 @@
+import { visitH5Demo } from '../utils/visit-demo'
+
+describe('exhibition components test', () => {
+  it('Animate', () => {
+    visitH5Demo('Animate')
+  })
+  it('AnimatingNumbers', () => {
+    visitH5Demo('AnimatingNumbers')
+  })
+  it('Audio', () => {
+    visitH5Demo('Audio')
+  })
+  it('Avatar', () => {
+    visitH5Demo('Avatar')
+  })
+  it('CircleProgress', () => {
+    visitH5Demo('CircleProgress')
+  })
+  it('Collapse', () => {
+    visitH5Demo('Collapse')
+  })
+  it('CountDown', () => {
+    visitH5Demo('CountDown')
+  })
+  it('Ellipsis', () => {
+    visitH5Demo('Ellipsis')
+  })
+  it('ImagePreview', () => {
+    visitH5Demo('ImagePreview')
+  })
+  it('Indicator', () => {
+    visitH5Demo('Indicator')
+  })
+  it('Pagination', () => {
+    visitH5Demo('Pagination')
+  })
+  it('Price', () => {
+    visitH5Demo('Price')
+  })
+  it('Progress', () => {
+    visitH5Demo('Progress')
+  })
+  it('Swiper', () => {
+    visitH5Demo('Swiper')
+  })
+  it('Table', () => {
+    visitH5Demo('Table')
+  })
+  it('Tag', () => {
+    visitH5Demo('Tag')
+  })
+  it('Tour', () => {
+    visitH5Demo('Tour')
+  })
+  it('Video', () => {
+    visitH5Demo('Video')
+  })
+  it('VirtualList', () => {
+    visitH5Demo('VirtualList')
+  })
+})