diff --git a/cypress/e2e/compare.cy.js b/cypress/e2e/compare.cy.js
new file mode 100644
index 0000000..7bd25d9
--- /dev/null
+++ b/cypress/e2e/compare.cy.js
@@ -0,0 +1,48 @@
+describe('Performance', ()=>{
+  beforeEach(() => {
+    cy.visit('https://REDACTED-HOST/files');
+    cy.login();
+    cy.visit('https://REDACTED-HOST/files');
+    cy.url().should('include', 'files');
+    cy.contains('li', 'COMPARE').click();
+  });
+
+  it('Enter Compare', () => {
+    const dataTransfer = new DataTransfer();
+
+    cy.url().should('include', 'files');
+    cy.contains('button', 'Compare').should('be.disabled'); // 斷言按鈕為禁用狀態
+    // 安裝套件: cypress-drag-drop
+    cy.get('#compareFile0').drag('#primaryDragCard');
+    cy.get('#compareFile1').drag('#secondaryDragCard');
+    // Enter Compare
+    cy.contains('button', 'Compare').click();
+    cy.contains('h2', 'COMPARE');
+    cy.url().should('include', 'compare');
+    cy.wait(2000);
+    // // 斷言排序
+    // // 斷言狀態欄
+    // // 斷言頁面中有 7 個 canvas 元素
+    cy.get('canvas').should('have.length', 7);
+  });
+
+  it('Anchor', () => {
+    // enter Map
+    cy.url().should('include', 'files');
+    cy.get('#compareFile0').drag('#primaryDragCard');
+    cy.get('#compareFile1').drag('#secondaryDragCard');
+    cy.contains('button', 'Compare').click();
+    cy.contains('h2', 'COMPARE');
+    cy.url().should('include', 'compare');
+    cy.wait(2000);
+    // Anchor 網頁不會捲動到錨點位置是因為 Cypress 是模擬使用者行為而非準確瀏覽器行為
+    cy.get('aside li a[href="#cycleTime"]').click();
+    cy.url().should('include', '#cycleTime');
+    cy.get('aside li a[href="#processingTime"]').click();
+    cy.url().should('include', '#processingTime');
+    cy.get('aside li a[href="#waitingTime"]').click();
+    cy.url().should('include', '#waitingTime');
+    cy.get('aside li a[href="#cases"]').click();
+    cy.url().should('include', '#cases');
+  });
+})
diff --git a/cypress/e2e/performance.cy.js b/cypress/fixtures/doneTesting/performance.cy.js
similarity index 100%
rename from cypress/e2e/performance.cy.js
rename to cypress/fixtures/doneTesting/performance.cy.js
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index f855acd..bf819af 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -8,7 +8,10 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 // -- This is a parent command --
+import '@4tw/cypress-drag-drop'
+
 const loginApiUrl = Cypress.env('loginApiUrl');
+
 Cypress.Commands.add('login', () => {
   cy.request({
     method: 'POST',
diff --git a/package-lock.json b/package-lock.json
index 7e36b8e..b8af1ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,12 +37,13 @@
         "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
+        "@4tw/cypress-drag-drop": "^2.2.5",
         "@rushstack/eslint-patch": "^1.1.4",
         "@vitejs/plugin-vue": "^4.0.0",
         "@vue/eslint-config-prettier": "^7.0.0",
         "@vue/test-utils": "^2.2.6",
         "autoprefixer": "^10.4.13",
-        "cypress": "^13.6.5",
+        "cypress": "^12.0.2",
         "cypress-xpath": "^2.0.1",
         "eslint": "^8.22.0",
         "eslint-plugin-cypress": "^2.12.1",
@@ -58,6 +59,15 @@
         "vitest": "^0.25.6"
       }
     },
+    "node_modules/@4tw/cypress-drag-drop": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.2.5.tgz",
+      "integrity": "sha512-3ghTmzhOmUqeN6U3QmUnKRUxI7OMLbJA4hHUY/eS/FhWJgxbiGgcaELbolWnBAOpajPXcsNQGYEj9brd59WH6A==",
+      "dev": true,
+      "peerDependencies": {
+        "cypress": "2 - 13"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.20.15",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
@@ -91,9 +101,9 @@
       }
     },
     "node_modules/@cypress/request": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
-      "integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
+      "version": "2.88.12",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz",
+      "integrity": "sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==",
       "dev": true,
       "dependencies": {
         "aws-sign2": "~0.7.0",
@@ -109,7 +119,7 @@
         "json-stringify-safe": "~5.0.1",
         "mime-types": "~2.1.19",
         "performance-now": "^2.1.0",
-        "qs": "6.10.4",
+        "qs": "~6.10.3",
         "safe-buffer": "^5.1.2",
         "tough-cookie": "^4.1.3",
         "tunnel-agent": "^0.6.0",
@@ -2129,20 +2139,21 @@
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "node_modules/cypress": {
-      "version": "13.6.5",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.6.5.tgz",
-      "integrity": "sha512-2NxSDcO2zHw5kTcosc6dzv2zppEqiXrFFhZw5cx/EWrSNZABTzpr/EyvYzGgrWm46o5173JUfuJfDQcaiZZPVQ==",
+      "version": "12.17.4",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.4.tgz",
+      "integrity": "sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
-        "@cypress/request": "^3.0.0",
+        "@cypress/request": "2.88.12",
         "@cypress/xvfb": "^1.2.4",
+        "@types/node": "^16.18.39",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
-        "buffer": "^5.7.1",
+        "buffer": "^5.6.0",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
@@ -2160,7 +2171,7 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.1",
+        "is-ci": "^3.0.0",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
@@ -2182,7 +2193,7 @@
         "cypress": "bin/cypress"
       },
       "engines": {
-        "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
+        "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
       }
     },
     "node_modules/cypress-xpath": {
@@ -6711,6 +6722,13 @@
     }
   },
   "dependencies": {
+    "@4tw/cypress-drag-drop": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.2.5.tgz",
+      "integrity": "sha512-3ghTmzhOmUqeN6U3QmUnKRUxI7OMLbJA4hHUY/eS/FhWJgxbiGgcaELbolWnBAOpajPXcsNQGYEj9brd59WH6A==",
+      "dev": true,
+      "requires": {}
+    },
     "@babel/parser": {
       "version": "7.20.15",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
@@ -6732,9 +6750,9 @@
       "optional": true
     },
     "@cypress/request": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz",
-      "integrity": "sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==",
+      "version": "2.88.12",
+      "resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz",
+      "integrity": "sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==",
       "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
@@ -6750,7 +6768,7 @@
         "json-stringify-safe": "~5.0.1",
         "mime-types": "~2.1.19",
         "performance-now": "^2.1.0",
-        "qs": "6.10.4",
+        "qs": "~6.10.3",
         "safe-buffer": "^5.1.2",
         "tough-cookie": "^4.1.3",
         "tunnel-agent": "^0.6.0",
@@ -8236,19 +8254,20 @@
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "cypress": {
-      "version": "13.6.5",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-13.6.5.tgz",
-      "integrity": "sha512-2NxSDcO2zHw5kTcosc6dzv2zppEqiXrFFhZw5cx/EWrSNZABTzpr/EyvYzGgrWm46o5173JUfuJfDQcaiZZPVQ==",
+      "version": "12.17.4",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-12.17.4.tgz",
+      "integrity": "sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==",
       "dev": true,
       "requires": {
-        "@cypress/request": "^3.0.0",
+        "@cypress/request": "2.88.12",
         "@cypress/xvfb": "^1.2.4",
+        "@types/node": "^16.18.39",
         "@types/sinonjs__fake-timers": "8.1.1",
         "@types/sizzle": "^2.3.2",
         "arch": "^2.2.0",
         "blob-util": "^2.0.2",
         "bluebird": "^3.7.2",
-        "buffer": "^5.7.1",
+        "buffer": "^5.6.0",
         "cachedir": "^2.3.0",
         "chalk": "^4.1.0",
         "check-more-types": "^2.24.0",
@@ -8266,7 +8285,7 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
-        "is-ci": "^3.0.1",
+        "is-ci": "^3.0.0",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
diff --git a/package.json b/package.json
index 971fe66..7ef1dc2 100644
--- a/package.json
+++ b/package.json
@@ -44,12 +44,13 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@4tw/cypress-drag-drop": "^2.2.5",
     "@rushstack/eslint-patch": "^1.1.4",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.6",
     "autoprefixer": "^10.4.13",
-    "cypress": "^13.6.5",
+    "cypress": "^12.0.2",
     "cypress-xpath": "^2.0.1",
     "eslint": "^8.22.0",
     "eslint-plugin-cypress": "^2.12.1",
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index ae730c4..5a4ee2d 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -7,7 +7,7 @@
         <h2 class="h-12 font-bold py-4 mb-4 border-b border-neutral-500">Performance Comparison</h2>
         <div class="flex justify-start items-center gap-4 w-full h-[184px] scrollbar pb-4">
           <!-- primaryDrag -->
-          <div class="relative w-[216px] min-w-[216px] h-full">
+          <div class="relative w-[216px] min-w-[216px] h-full" id="primaryDragCard">
             <div v-if="primaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
               <div class="h-full flex flex-col justify-center items-center gap-4">
                 <p class="text-4xl font-black">1</p>
@@ -38,8 +38,8 @@
             <!-- delete icon -->
             <span v-show="primaryDragData.length > 0" class="material-symbols-outlined material-fill text-neutral-500 bg-neutral-10 block rounded-full absolute -top-[5%] -right-[5%] z-50 cursor-pointer hover:text-danger" @click="primaryDragDelete">do_not_disturb_on</span>
           </div>
-          <!-- secondaryData -->
-          <div class="relative w-[216px] min-w-[216px] h-full">
+          <!-- secondaryDrag -->
+          <div class="relative w-[216px] min-w-[216px] h-full" id="secondaryDragCard">
             <div v-show="secondaryDragData.length === 0" class="w-full h-full p-4 border rounded border-neutral-300 duration-300 text-neutral-500 absolute">
               <div class="h-full flex flex-col justify-center items-center gap-4">
                 <p class="text-4xl font-black">2</p>
@@ -117,8 +117,8 @@
         </div>
         <!-- All Files type of grid -->
         <draggable tag="ul" :list="compareData" :group="{ name: 'files' }" itemKey="name" class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_440px)] scrollbar">
-          <template #item="{ element }">
-            <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"  :title="element.name" >
+          <template #item="{ element, index }">
+            <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer" :title="element.name" :id="'compareFile' + index">
               <div>
                 <span class="material-symbols-outlined mb-2 !text-[32px] block">
                   {{ element.icon }}
@@ -556,6 +556,10 @@
         if(!clickedLi || !clickedLi.id.startsWith('li')) this.isActive = null;
       })
       this.isLoading = false;
+      // document.onmousemove = (e) => {
+      //   console.log('x:', e.pageX);
+      //   console.log('y:', e.pageY);
+      // }
     },
   }
 </script>