Cypress: filterFunnel - Trace testing done.

2023-06-08 15:17:08 +08:00
parent 5600cb074b
commit a84d123b95
4 changed files with 99 additions and 36 deletions
--- a/cypress/e2e/filterFunnel.cy.js
+++ b/cypress/e2e/filterFunnel.cy.js
@@ -134,52 +134,99 @@ describe('Save Log and Filter', ()=>{
  //   });
  // });

-  it('Sequence, Start & End', () => {
-    // select radio
-    cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
-    cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
-      .prev(2)
-      .find('input')
-      .should('have.attr', 'type', 'radio') // select the previous element
-      .check({ force: true })
-      .should('be.checked'); // confirm it's type radio (optional)
-    cy.get('input[id="Start & End2"]').check({ force: true });
+  // it('Sequence, Start & End', () => {
+  //   // select radio
+  //   cy.get('input#Sequence0').should('be.checked'); // 選取 Radio 'Sequence'
+  //   cy.contains('label', 'Start activity / End activity') // 選取 Radio 'Have activity(s)'
+  //     .prev(2)
+  //     .find('input')
+  //     .should('have.attr', 'type', 'radio') // select the previous element
+  //     .check({ force: true })
+  //     .should('be.checked'); // confirm it's type radio (optional)
+  //   cy.get('input[id="Start & End2"]').check({ force: true });

-    // No selected.
-    cy.contains('button', 'Apply').click();
-    cy.get('.v-toast__text').should('contain', 'Both Start and End must be selected');
+  //   // No selected.
+  //   cy.contains('button', 'Apply').click();
+  //   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>
-    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 來操作
+    // click on Trace Number to show a table
+    cy.contains('td', '#1').click();
+    cy.wait(1000);
+    cy.get('#cyTrace').scrollIntoView().should('be.visible'); // 視窗滾到右邊
+    cy.wait(1000);
+    cy.get('.p-chart').scrollIntoView(); // 視窗拉回來

-    // 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 });
+    // Clear selected item
+    cy.get('.p-slider-handle:nth-child(2)')
+      .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('@endTable').find('tr:nth-child(1) input[type="radio"]').should('not.be.checked');
+    cy.get('.v-toast__text').should('contain', 'Reset Success');
    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.get('.p-slider-handle:nth-child(2)')
+      .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('span', 'Start')
-      .parent()
-      .contains('span', 'End'); // 斷言 text 是否包含 Start 和 End.
+    cy.contains('p', 'Trace');
    cy.contains('button', 'Apply All').click();

    // make sure create map again.
--- a/cypress/support/e2e.js
+++ b/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')
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",