diff --git a/cypress/integration/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js
index b253d0389..76c63c4ad 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@@ -1,266 +1,188 @@
 describe('Interaction', () => {
-  describe('Interaction - security level loose', () => {
-    it('Graph: should handle a click on a node with a bound function', () => {
+  describe('Security level loose', () => {
+    beforeEach(() => {
       const url = 'http://localhost:9000/click_security_loose.html';
       cy.viewport(1440, 1024);
       cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-4').click();
+    });
 
+    it('Graph: should handle a click on a node with a bound function', () => {
+      cy.contains('FunctionTest1').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
+
     it('Graph: should handle a click on a node with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-FunctionArg-28').click();
-
+      cy.contains('FunctionArgTest2').parents('.node').click();
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
+
     it('Flowchart: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
-
+      cy.contains('2FunctionArg').parents('.node').click();
       cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
     });
-    it('Graph: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-5').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Graph: should handle a click on a node with a bound url', () => {
+      // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
+      cy.contains('URLTest1').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
+      cy.contains('2URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('Flowchart-v2: should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-Function-16').click();
-
+      cy.contains('FunctionTest2').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
+
     it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-1Function-22"]').click();
-
+      cy.contains('10Function').parents('.node').click();
       cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
     });
-    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('#flowchart-URL-17').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Flowchart-v2: should handle a click on a node with a bound url', () => {
+      cy.contains('URLTest2').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-23"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
+      // cy.contains('').click();
+      cy.contains('20URL').find('.node').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl1').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
+
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl1-text').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
 
+    it('should handle a click on a task with a bound function without args', () => {
+      cy.get('body').find('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
-    it('should handle a click on a task with a bound function with args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl3').click({ force: true });
 
+    it('should handle a click on a task with a bound function with args', () => {
+      cy.get('body').find('rect#cl3').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
 
     it('should handle a click on a task with a bound function without args', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl2-text').click({ force: true });
-
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant cl2');
     });
-    it('should handle a click on a task with a bound function with args ', () => {
-      const url = 'http://localhost:9000/click_security_loose.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl3-text').click({ force: true });
 
+    it('should handle a click on a task with a bound function with args ', () => {
+      cy.get('body').find('text#cl3-text').click({ force: true });
       cy.get('.created-by-gant-click').should('have.text', 'Clicked By Gant test1 test2 test3');
     });
   });
 
   describe('Interaction - security level tight', () => {
+    beforeEach(() => {
+      const url = 'http://localhost:9000/click_security_strict.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+    });
     it('should handle a click on a node without a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g#flowchart-Function-4').click();
-
       cy.get('.created-by-click').should('not.exist');
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
     });
+
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
     });
-    it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-5').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('should handle a click on a node with a bound url', () => {
+      cy.get('body').find('g#flowchart-URL-5').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('should handle a click on a node with a bound url where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('should handle a click on a node with a bound url where the node starts with a number', () => {
+      cy.get('body').find('g[id="flowchart-2URL-11"]').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound URL clicking on the rect', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl1').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
+
     it('should handle a click on a task with a bound URL clicking on the text', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('text#cl1-text').click({ force: true });
-
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
-    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('rect#cl2').click({ force: true });
 
-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+    it('should handle a click on a task with a bound function', () => {
+      cy.get('body').find('rect#cl2').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
-    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_strict.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });
 
-      // cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
+    it('should handle a click on a task with a bound function', () => {
+      cy.get('body').find('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });
 
   describe('Interaction - security level other, missspelling', () => {
+    beforeEach(() => {
+      const url = 'http://localhost:9000/click_security_other.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+    });
+
     it('should handle a click on a node with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g#flowchart-Function-4').click();
-
-      // cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
       cy.get('.created-by-click').should('not.exist');
     });
+
     it('should handle a click on a node with a bound function where the node starts with a number', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('g[id="flowchart-1Function-10"]').click();
-
       cy.get('.created-by-click').should('not.exist');
       cy.get('.created-by-click').should('not.exist');
     });
-    it('should handle a click on a node with a bound url', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('g#flowchart-URL-5').click();
 
-      cy.location().should((location) => {
-        expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
+    it('should handle a click on a node with a bound url', () => {
+      cy.get('body').find('g#flowchart-URL-5').click();
+      cy.location().should(({ href }) => {
+        expect(href).to.eq('http://localhost:9000/webpackUsage.html');
       });
     });
 
     it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
       cy.get('body').find('rect#cl2').click({ force: true });
-
       cy.get('.created-by-gant-click').should('not.exist');
     });
-    it('should handle a click on a task with a bound function', () => {
-      const url = 'http://localhost:9000/click_security_other.html';
-      cy.viewport(1440, 1024);
-      cy.visit(url);
-      cy.get('body').find('text#cl2-text').click({ force: true });
 
+    it('should handle a click on a task with a bound function', () => {
+      cy.get('body').find('text#cl2-text').click({ force: true });
       cy.get('.created-by-gant-click').should('not.exist');
     });
   });
diff --git a/cypress/platform/click_security_loose.html b/cypress/platform/click_security_loose.html
index 6c77e90af..ed9fcaaa8 100644
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@@ -15,9 +15,9 @@
     <div style="display: flex">
       <pre id="FirstLine" class="mermaid">
     graph TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
+      FunctionTest1-->URLTest1
+      click FunctionTest1 clickByFlow "Add a div"
+      click URLTest1 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
   graph TB
@@ -27,15 +27,15 @@
       </pre>
       <pre id="FirstLine" class="mermaid">
     flowchart TB
-      Function-->URL
-      click Function clickByFlow "Add a div"
-      click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+      FunctionTest2-->URLTest2
+      click FunctionTest2 clickByFlow "Add a div"
+      click URLTest2 "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
       <pre id="FirstLine" class="mermaid">
   flowchart TB
-    1Function--->2URL
-    click 1Function clickByFlow "Add a div"
-    click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
+    10Function--->20URL
+    click 10Function clickByFlow "Add a div"
+    click 20URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
       </pre>
 
       <pre id="FirstLine" class="mermaid">
@@ -97,14 +97,14 @@
     <div style="display: flex">
       <pre id="FirstLine" class="mermaid">
       graph TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
+        FunctionArgTest2-->URL
+        click FunctionArgTest2 call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>
       <pre id="FirstLine" class="mermaid">
       flowchart TB
-        FunctionArg-->URL
-        click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
+        2FunctionArg-->URL
+        click 2FunctionArg call clickByFlowArg(ARGUMENT) "Add a div"
         click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
       </pre>