添加使用 Cypress 作为 e2e 测试框架

还未添加文档

.github/workflows/ci.yml

@@ -28,5 +28,8 @@ jobs:
       - name: lint
         run: pnpm lint
 
-      - name: build
-        run: pnpm build
+      - name: build && test
+        run: |
+          npm install serve cypress -g
+          pnpm add cypress -D && cypress install
+          pnpm test:ci

.gitignore

@@ -22,3 +22,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# Cypress specific
+cypress/screenshots

app/components-private/Footer.vue

@@ -6,15 +6,15 @@
     </button>
 
     <!-- 切换深色模式 -->
-    <button title="切换深色模式" @click="theme.toggle">
+    <button title="切换深色模式" :data-theme="theme.value" @click="theme.toggle">
       <i-mdi-theme-light-dark v-if="theme.value === 'system'" />
       <i-ph-moon v-else-if="theme.value === 'dark'" />
       <i-ic-outline-wb-sunny v-else />
     </button>
 
     <!-- 跳转到 Github -->
-    <button>
-      <a class="c-inherit!" href="https://github.com/MoomFE-Starter-Template/Base" target="_blank" rel="noopener noreferrer">
+    <button title="跳转到 Github">
+      <a href="https://github.com/MoomFE-Starter-Template/Base" target="_blank" rel="noopener noreferrer">
         <i-mdi-github />
       </a>
     </button>

app/pages/hello/[name].vue

@@ -12,7 +12,7 @@
   </p>
 
   <div class="mt-6">
-    <Button @click="$router.back()">返回</Button>
+    <Button id="back" @click="$router.back()">返回</Button>
   </div>
 </template>
 

app/pages/index.vue

@@ -6,14 +6,15 @@
   <div class="mt-6">
     <input
       v-model="name"
+      id="name-input"
       class="w-62.5 max-w-full border border-gray-400 rounded-md outline-none text-center bg-transparent px-3 py-1.5"
       placeholder="你的名字是？"
       @keydown.enter="go"
     >
   </div>
 
   <div class="mt-3">
-    <Button :disabled="!name" @click="go">确定</Button>
+    <Button id="go" :disabled="!name" @click="go">确定</Button>
   </div>
 </template>
 

cypress/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    chromeWebSecurity: false,
+    specPattern: 'cypress/e2e/**/*.spec.*',
+    supportFile: false,
+  },
+});

cypress/e2e/index.spec.ts

@@ -0,0 +1,105 @@
+context('首页', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.contains('示例页').should('exist');
+  });
+
+  it('跳转测试', () => {
+    cy.url()
+      .should('eq', 'http://localhost:3000/');
+
+    cy.contains('基础项目模板').should('exist');
+
+    cy.get('#name-input')
+      .type('mixte{enter}')
+      .url()
+      .should('eq', 'http://localhost:3000/hello/mixte');
+
+    cy.get('#back')
+      .click()
+      .url()
+      .should('eq', 'http://localhost:3000/');
+
+    cy.get('#go')
+      .should('be.disabled');
+
+    cy.get('#name-input')
+      .type('Zw');
+
+    cy.get('#go')
+      .should('not.be.disabled')
+      .click()
+      .url()
+      .should('eq', 'http://localhost:3000/hello/Zw666');
+  });
+
+  it('底部按钮 - [首页]', () => {
+    cy.url()
+      .should('eq', 'http://localhost:3000/');
+
+    cy.get('button[title="首页"]')
+      .click()
+      .url()
+      .should('eq', 'http://localhost:3000/');
+
+    cy.get('#name-input')
+      .type('mixte{enter}');
+
+    cy.url()
+      .should('eq', 'http://localhost:3000/hello/mixte');
+
+    cy.get('button[title="首页"]')
+      .click()
+      .url()
+      .should('eq', 'http://localhost:3000/');
+  });
+
+  it('底部按钮 - [切换深色模式]', () => {
+    const btnSelector = 'button[title="切换深色模式"]';
+
+    Cypress.$.each(['one', 'two'], (index) => {
+      // light
+
+      cy.get(`${btnSelector}[data-theme="light"]`)
+        .should('exist');
+
+      cy.get('html')
+        .should('have.class', 'light')
+        .should('not.have.class', 'dark');
+
+      cy.get(btnSelector).click();
+
+      // dark
+
+      cy.get(`${btnSelector}[data-theme="dark"]`)
+        .should('exist');
+
+      cy.get('html')
+        .should('have.class', 'dark')
+        .should('not.have.class', 'light');
+
+      cy.get(btnSelector).click();
+
+      // system ( light )
+
+      cy.get(`${btnSelector}[data-theme="system"]`)
+        .should('exist');
+
+      cy.get('html')
+        .should('have.class', 'light')
+        .should('not.have.class', 'dark');
+
+      // reset
+      if (!index) {
+        cy.get(btnSelector).click();
+      }
+    });
+  });
+
+  it('底部按钮 - [跳转到 Github]', () => {
+    cy.get('button[title="跳转到 Github"]')
+      .children('a')
+      .should('have.attr', 'target', '_blank')
+      .should('have.attr', 'href', 'https://github.com/MoomFE-Starter-Template/Base');
+  });
+});

cypress/scripts/run-test.ts

@@ -0,0 +1,30 @@
+import { spawn } from 'node:child_process';
+import process from 'node:process';
+
+const argv = process.argv.slice(2);
+const command = argv.includes('--ci') ? 'run' : 'open';
+
+// 启动预览
+const preview = spawn('npm', ['run', 'preview'], {
+  shell: true,
+  stdio: 'inherit',
+});
+
+// 等待预览启动
+const wait = spawn('wait-on', ['http://localhost:3000'], {
+  shell: true,
+});
+
+// 等待预览启动完成后
+wait.on('exit', () => {
+  // 启动 Cypress 测试
+  const cypress = spawn('cypress', [command, '--config-file', 'cypress/cypress.config.ts'], {
+    shell: true,
+    stdio: 'inherit',
+  });
+
+  // 当 Cypress 进程退出时，关闭预览进程
+  cypress.on('exit', () => {
+    preview.kill();
+  });
+});

package.json

@@ -13,6 +13,8 @@
     "preview:ssr": "pnpm build:ssr && nuxt preview --host",
     "lint": "pnpm i && eslint .",
     "lint:fix": "pnpm i && eslint . --fix",
+    "test": "tsx ./cypress/scripts/run-test.ts",
+    "test:ci": "tsx ./cypress/scripts/run-test.ts --ci",
     "up": "npx taze latest -w -i",
     "postinstall": "nuxt prepare"
   },
@@ -43,11 +45,13 @@
     "pathe": "^1.1.2",
     "pnpm": "^9.7.1",
     "sass": "^1.77.8",
+    "tsx": "^4.17.0",
     "type-fest": "^4.24.0",
     "typescript": "^5.5.4",
     "unocss": "^0.62.1",
     "unocss-preset-extra": "^0.5.3",
     "unplugin-icons": "^0.19.2",
-    "unplugin-vue-components": "^0.27.4"
+    "unplugin-vue-components": "^0.27.4",
+    "wait-on": "^7.2.0"
   }
 }