Cypress: filterFunnel - Trace testing done.

cypress/e2e/filterFunnel.cy.js

@@ -134,52 +134,99 @@ describe('Save Log and Filter', ()=>{
   //   });
   // });
 
-  it('Sequence, Start & End', () => {
+  // it('Sequence, Start & End', () => {
-    // select radio
+  //   // select radio
-    cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
+  //   cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
-    cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
+  //   cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
-      .prev(2)
+  //     .prev(2)
-      .find('input')
+  //     .find('input')
-      .should('have.attr', 'type', 'radio') // select the previous element
+  //     .should('have.attr', 'type', 'radio') // select the previous element
-      .check({ force: true })
+  //     .check({ force: true })
-      .should('be.checked'); // confirm it's type radio (optional)
+  //     .should('be.checked'); // confirm it's type radio (optional)
-    cy.get('input[id="Start & End2"]').check({ force: true });
+  //   cy.get('input[id="Start & End2"]').check({ force: true });
 
-    // No selected.
+  //   // No selected.
-    cy.contains('button', 'Apply').click();
+  //   cy.contains('button', 'Apply').click();
-    cy.get('.v-toast__text').should('contain', 'Both Start and End must be selected');
+  //   cy.get('.v-toast__text').should('contain', 'Both Start and End must be selected');
+  //   cy.wait(3000);
+
+  //   // 選取 "start" 的 <table>
+  //   cy.contains('p', 'Start activity')
+  //     .parents('div') // 回到 p 的父層 div
+  //     .eq(1) // 同階層的第二個 div
+  //     .find('table') // 向下找 table
+  //     .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
+  //   // 選取 "end" 的 <table>
+  //   cy.contains('p', 'End activity')
+  //     .parents('div')
+  //     .eq(1)
+  //     .find('table')
+  //     .as('endTable'); // 使用 @endTable 來操作
+
+  //   // Clear selected item.
+  //   cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+  //   cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+  //   cy.contains('button', 'Clear').click();
+  //   cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
+  //   cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
+  //   cy.wait(3000);
+
+  //   // selected item
+  //   cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+  //   cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+  //   cy.contains('button', 'Apply').click();
+  //   cy.get('#tabFunnel').click();
+  //   cy.contains('p', 'Sequence');
+  //   cy.contains('span', 'Start')
+  //     .parent()
+  //     .contains('span', 'End'); // 斷言 text 是否包含 Start 和 End.
+  //   cy.contains('button', 'Apply All').click();
+
+  //   // make sure create map again.
+  //   cy.get('header').click();
+  //   cy.get('#iconState').click();
+  //   cy.get('li').first().then($li => { // then() 獲取 <li> 元素的內容
+  //     const percentage = $li.find('span').eq(1).text(); // li 底下找到第二個 span
+  //     expect(percentage).not.to.equal('100%'); // text !== 100% 來判斷數據是否有變化
+  //   });
+  // });
+
+  it('Trace', () => {
+    // select radio
+    cy.get('input#Trace2').check({ force: true }); // 選取 Radio 'Trace'
     cy.wait(3000);
 
-    // 選取 "start" 的 <table>
+    // click on Trace Number to show a table
-    cy.contains('p', 'Start activity')
+    cy.contains('td', '#1').click();
-      .parents('div') // 回到 p 的父層 div
+    cy.wait(1000);
-      .eq(1) // 同階層的第二個 div
+    cy.get('#cyTrace').scrollIntoView().should('be.visible'); // 視窗滾到右邊
-      .find('table') // 向下找 table
+    cy.wait(1000);
-      .as('startTable'); // 將選取的元素命名，使用 @startTable 來操作
+    cy.get('.p-chart').scrollIntoView(); // 視窗拉回來
-    // 選取 "end" 的 <table>
-    cy.contains('p', 'End activity')
-      .parents('div')
-      .eq(1)
-      .find('table')
-      .as('endTable'); // 使用 @endTable 來操作
 
-    // Clear selected item.
+    // Clear selected item
-    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+    cy.get('.p-slider-handle:nth-child(2)')
-    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+      .click()
+      .trigger('mousedown', { which: 1 })
+      .trigger('mousemove', { clientX: 250 })
+      .xpath('//span[contains(@class, "p-slider-handle")][2]')
+      .click()
+      .trigger('mouseup');
     cy.contains('button', 'Clear').click();
-    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
+    cy.get('.v-toast__text').should('contain', 'Reset Success');
-    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
     cy.wait(3000);
 
     // selected item
-    cy.get('@startTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+    cy.get('.p-slider-handle:nth-child(2)')
-    cy.get('@endTable').find('tr:nth-child(1) input[type="radio"]').check({ force: true });
+      .click()
+      .trigger('mousedown', { which: 1 })
+      .trigger('mousemove', { clientX: 250 })
+      .xpath('//span[contains(@class, "p-slider-handle")][2]')
+      .click()
+      .trigger('mouseup');
+    cy.contains('button', 'Apply').click();
     cy.contains('button', 'Apply').click();
     cy.get('#tabFunnel').click();
-    cy.contains('p', 'Sequence');
+    cy.contains('p', 'Trace');
-    cy.contains('span', 'Start')
-      .parent()
-      .contains('span', 'End'); // 斷言 text 是否包含 Start 和 End.
     cy.contains('button', 'Apply All').click();
 
     // make sure create map again.

cypress/support/e2e.js

@@ -22,3 +22,4 @@ Cypress.on('uncaught:exception', (err, runnable) => {
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
+require('cypress-xpath') // 順利執行.trigger('mouseup')

package-lock.json

@@ -42,6 +42,7 @@
         "@vue/test-utils": "^2.2.6",
         "autoprefixer": "^10.4.13",
         "cypress": "^12.13.0",
+        "cypress-xpath": "^2.0.1",
         "eslint": "^8.22.0",
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-vue": "^9.3.0",
@@ -2158,6 +2159,13 @@
         "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
       }
     },
+    "node_modules/cypress-xpath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/cypress-xpath/-/cypress-xpath-2.0.1.tgz",
+      "integrity": "sha512-qMagjvinBppNJdMAkucWESP9aP4rDTs7c96m0vwMuZTVx3NqP2E3z/hkoRf8Ea9soL8yTvUuuyF1cg/Sb1Yhbg==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dev": true
+    },
     "node_modules/cytoscape": {
       "version": "3.23.0",
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz",
@@ -8066,6 +8074,12 @@
         "yauzl": "^2.10.0"
       }
     },
+    "cypress-xpath": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/cypress-xpath/-/cypress-xpath-2.0.1.tgz",
+      "integrity": "sha512-qMagjvinBppNJdMAkucWESP9aP4rDTs7c96m0vwMuZTVx3NqP2E3z/hkoRf8Ea9soL8yTvUuuyF1cg/Sb1Yhbg==",
+      "dev": true
+    },
     "cytoscape": {
       "version": "3.23.0",
       "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz",

package.json

@@ -48,6 +48,7 @@
     "@vue/test-utils": "^2.2.6",
     "autoprefixer": "^10.4.13",
     "cypress": "^12.13.0",
+    "cypress-xpath": "^2.0.1",
     "eslint": "^8.22.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^9.3.0",