KaotoIO · lordrip · Jan 19, 2026 · Dec 16, 2025
diff --git a/packages/ui-tests/cypress/e2e/datamapper/nodeActions.cy.ts b/packages/ui-tests/cypress/e2e/datamapper/nodeActions.cy.ts
@@ -9,7 +9,10 @@ describe('Test for DataMapper : datamapper node actions', { browser: '!firefox'
   it('Datamapper - drag and drop datamapper step ', () => {
     cy.uploadFixture('flows/camelRoute/datamapper.yaml');
     cy.openDesignPage();
-    cy.DnD('route.from.steps.2.step:kaoto-datamapper', 'route.from.steps.1.marshal');
+    cy.DnDOnEdge(
+      'route.from.steps.2.step:kaoto-datamapper',
+      'camel-route|route.from.steps.0.setHeader >>> route.from.steps.1.marshal',
+    );
 
     const yamlRoute = [
       'id: camel-route',

diff --git a/packages/ui-tests/cypress/e2e/designer/DnD/dragAndDrop.cy.ts b/packages/ui-tests/cypress/e2e/designer/DnD/dragAndDrop.cy.ts
@@ -6,26 +6,22 @@ describe('Canvas nodes Drag and Drop', () => {
   });
 
   // FF not supported - https://github.com/dmtrKovalenko/cypress-real-events?tab=readme-ov-file#requirements
-  it('D&D - basic drag and drop', { browser: '!firefox' }, () => {
+  it('D&D - basic drag and drop on edge', { browser: '!firefox' }, () => {
     cy.uploadFixture('flows/camelRoute/basic.yaml');
     cy.openDesignPage();
-    cy.DnD('route.from.steps.0.setHeader', 'route.from.steps.1.marshal');
-
-    const yamlRoute = [
-      'id: camel-route',
-      'from:',
-      'uri: timer:test',
-      'steps:',
-      '- marshal:',
-      'id: marshal-3801',
-      '- setHeader:',
-      'constant: test',
-      'name: test',
-      '- to:',
-      'uri: log:test',
-    ];
+    cy.DnDOnEdge('route.from.steps.0.setHeader', 'camel-route|route.from.steps.1.marshal >>> route.from.steps.2.to');
+
     cy.openSourceCode();
-    cy.checkMultiLineContent(yamlRoute);
+    cy.compareFileWithMonacoEditor('flows/camelRoute/basic-updated.yaml');
+  });
+
+  it('D&D - basic drag and drop on Node', { browser: '!firefox' }, () => {
+    cy.uploadFixture('flows/camelRoute/basic.yaml');
+    cy.openDesignPage();
+    cy.DnDOnNode('route.from.steps.0.setHeader', 'camel-route|route.from.steps.3.placeholder');
+
+    cy.openSourceCode();
+    cy.compareFileWithMonacoEditor('flows/camelRoute/basic-updated2.yaml');
   });
 
   it('D&D - drag and drop with node fields configured', { browser: '!firefox' }, () => {
@@ -39,73 +35,42 @@ describe('Canvas nodes Drag and Drop', () => {
     cy.interactWithExpressionInputObject('constant.expression', 'testConstantExpression');
     cy.interactWithExpressionInputObject('constant.resultType', 'testConstantResultType');
 
-    cy.DnD('route.from.steps.0.setHeader', 'route.from.steps.1.marshal');
-
-    const yamlRoute = [
-      'id: camel-route',
-      'from:',
-      'uri: timer:test',
-      'steps:',
-      '- marshal:',
-      'id: marshal-3801',
-      '- setHeader:',
-      'constant:',
-      'id: testConstantId',
-      'expression: testConstantExpression',
-      'resultType: testConstantResultType',
-      'name: testName',
-      '- to:',
-      'uri: log:test',
-    ];
+    cy.DnDOnEdge('route.from.steps.0.setHeader', 'camel-route|route.from.steps.1.marshal >>> route.from.steps.2.to');
+
     cy.openSourceCode();
-    cy.checkMultiLineContent(yamlRoute);
+    cy.compareFileWithMonacoEditor('flows/camelRoute/basic-configured-updated.yaml');
   });
 
-  it('D&D - drag and drop between two routes', { browser: '!firefox' }, () => {
+  it('D&D - drag and drop on Edge between two routes', { browser: '!firefox' }, () => {
     cy.uploadFixture('flows/camelRoute/multiflowDnD.yaml');
     cy.openDesignPage();
 
-    cy.DnD('route.from.steps.0.setHeader', 'route.from.steps.0.marshal');
-
-    const yamlRoute = [
-      'id: route-4321',
-      'from:',
-      'id: from-3576',
-      'uri: timer:template',
-      'parameters:',
-      'period: "1000"',
-      'steps:',
-      '- marshal:',
-      'id: marshal-4048',
-      '- setHeader:',
-      'id: setHeader-3105',
-      'expression:',
-      'simple: {}',
-      '- log:',
-      'id: log-2966',
-      'message: ${body}',
-    ];
+    cy.DnDOnEdge('route.from.steps.0.setHeader', 'route-4321|route.from.steps.0.marshal >>> route.from.steps.1.log');
+
     cy.openSourceCode();
-    cy.checkMultiLineContent(yamlRoute);
+    cy.compareFileWithMonacoEditor('flows/camelRoute/multiflowDnD-updated.yaml');
   });
 
   it('D&D - drag and drop with choice', { browser: '!firefox' }, () => {
-    cy.uploadFixture('flows/camelRoute/complexMultiFlow.yaml');
+    cy.uploadFixture('flows/camelRoute/complex.yaml');
     cy.openDesignPage();
 
-    cy.DnD('route.from.steps.0.choice.when.0.steps.0.setHeader', 'route.from.steps.0.choice.when.1.steps.0.log');
-    const yamlRoute = [
-      '- description: when-log',
-      'steps:',
-      '- log:',
-      'message: ${body}',
-      '- setHeader:',
-      'name: setHeader',
-      'simple:',
-      'expression: foo',
-    ];
+    cy.toggleExpandGroup('when-setHeader');
+    cy.toggleExpandGroup('when-log');
+
+    cy.DnDOnNode('route.from.steps.0.choice.when.0', 'route.from.steps.0.choice.when.1');
+
+    cy.openSourceCode();
+    cy.compareFileWithMonacoEditor('flows/camelRoute/complex-moved.yaml');
+  });
+
+  it('D&D - drag and drop on placeholder nodes between two routes', { browser: '!firefox' }, () => {
+    cy.uploadFixture('flows/camelRoute/multiflowDnD.yaml');
+    cy.openDesignPage();
+
+    cy.DnDOnNode('route.from.steps.0.setHeader', 'route-4321|route.from.steps.2.placeholder');
+
     cy.openSourceCode();
-    cy.editorScrollToTop();
-    cy.checkMultiLineContent(yamlRoute);
+    cy.compareFileWithMonacoEditor('flows/camelRoute/multiflowDnD-updated2.yaml');
   });
 });
diff --git a/packages/ui-tests/cypress/e2e/designer/basicNodeActions/stepAddition.cy.ts b/packages/ui-tests/cypress/e2e/designer/basicNodeActions/stepAddition.cy.ts
@@ -42,15 +42,15 @@ describe('Tests for Design page', () => {
     cy.openDesignPage();
 
     cy.openStepConfigurationTab('log');
-    cy.quickAppend();
+    cy.quickAppendStep('route.from.steps.3.placeholder');
     cy.chooseFromCatalog('processor', 'choice');
 
     cy.openGroupConfigurationTab('choice');
-    cy.quickAppend();
+    cy.quickAppendStep('route.from.steps.4.placeholder');
     cy.chooseFromCatalog('component', 'as2');
 
     cy.openStepConfigurationTab('as2');
-    cy.quickAppend();
+    cy.quickAppendStep('route.from.steps.5.placeholder');
     cy.chooseFromCatalog('component', 'amqp');
 
     cy.openSourceCode();

diff --git a/packages/ui-tests/cypress/fixtures/flows/camelRoute/basic-configured-updated.yaml b/packages/ui-tests/cypress/fixtures/flows/camelRoute/basic-configured-updated.yaml
@@ -0,0 +1,15 @@
+- route:
+    id: camel-route
+    from:
+      uri: timer:test
+      steps:
+        - marshal:
+            id: marshal-3801
+        - setHeader:
+            constant:
+              id: testConstantId
+              expression: testConstantExpression
+              resultType: testConstantResultType
+            name: testName
+        - to:
+            uri: log:test
diff --git a/packages/ui-tests/cypress/fixtures/flows/camelRoute/basic-updated.yaml b/packages/ui-tests/cypress/fixtures/flows/camelRoute/basic-updated.yaml
@@ -0,0 +1,12 @@
+- route:
+    id: camel-route
+    from:
+      uri: timer:test
+      steps:
+        - marshal:
+            id: marshal-3801
+        - setHeader:
+            constant: test
+            name: test
+        - to:
+            uri: log:test
diff --git a/packages/ui-tests/cypress/fixtures/flows/camelRoute/basic-updated2.yaml b/packages/ui-tests/cypress/fixtures/flows/camelRoute/basic-updated2.yaml
@@ -0,0 +1,12 @@
+- route:
+    id: camel-route
+    from:
+      uri: timer:test
+      steps:
+        - marshal:
+            id: marshal-3801
+        - to:
+            uri: log:test
+        - setHeader:
+            constant: test
+            name: test
diff --git a/packages/ui-tests/cypress/fixtures/flows/camelRoute/multiflowDnD-updated.yaml b/packages/ui-tests/cypress/fixtures/flows/camelRoute/multiflowDnD-updated.yaml
@@ -0,0 +1,28 @@
+- route:
+    id: route-1234
+    from:
+      id: from-3362
+      uri: timer:template
+      parameters:
+        period: "1000"
+      steps:
+        - log:
+            id: log-6809
+            message: ${body}
+- route:
+    id: route-4321
+    from:
+      id: from-3576
+      uri: timer:template
+      parameters:
+        period: "1000"
+      steps:
+        - marshal:
+            id: marshal-4048
+        - setHeader:
+            id: setHeader-3105
+            expression:
+              simple: {}
+        - log:
+            id: log-2966
+            message: ${body}
diff --git a/packages/ui-tests/cypress/fixtures/flows/camelRoute/multiflowDnD-updated2.yaml b/packages/ui-tests/cypress/fixtures/flows/camelRoute/multiflowDnD-updated2.yaml
@@ -0,0 +1,28 @@
+- route:
+    id: route-1234
+    from:
+      id: from-3362
+      uri: timer:template
+      parameters:
+        period: "1000"
+      steps:
+        - log:
+            id: log-6809
+            message: ${body}
+- route:
+    id: route-4321
+    from:
+      id: from-3576
+      uri: timer:template
+      parameters:
+        period: "1000"
+      steps:
+        - marshal:
+            id: marshal-4048
+        - log:
+            id: log-2966
+            message: ${body}
+        - setHeader:
+            id: setHeader-3105
+            expression:
+              simple: {}
diff --git a/packages/ui-tests/cypress/support/cypress.d.ts b/packages/ui-tests/cypress/support/cypress.d.ts
@@ -66,7 +66,7 @@ declare global {
       closeStepConfigurationTab(): Chainable<JQuery<Element>>;
       closeCatalogModal(): Chainable<JQuery<Element>>;
       removeNodeByName(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
-      quickAppend(nodeIndex?: number): Chainable<JQuery<Element>>;
+      quickAppendStep(path: string): Chainable<JQuery<Element>>;
       selectDuplicateNode(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
       selectMoveBeforeNode(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
       selectMoveAfterNode(inputName: string, nodeIndex?: number): Chainable<JQuery<Element>>;
@@ -95,7 +95,8 @@ declare global {
       checkDarkMode(): Chainable<JQuery<Element>>;
       switchCodeToXml(): Chainable<JQuery<Element>>;
       switchCodeToYaml(): Chainable<JQuery<Element>>;
-      DnD(sourceNode: string, targetNode: string): Chainable<JQuery<Element>>;
+      DnDOnNode(sourceNode: string, targetNode: string): Chainable<JQuery<Element>>;
+      DnDOnEdge(sourceNode: string, targetEdge: string): Chainable<JQuery<Element>>;
       // nodeConfiguration
       interactWithConfigInputObject(inputName: string, value?: string): Chainable<JQuery<Element>>;
       interactWithExpressionInputObject(inputName: string, value?: string, index?: number): Chainable<JQuery<Element>>;

diff --git a/packages/ui-tests/cypress/support/next-commands/design.ts b/packages/ui-tests/cypress/support/next-commands/design.ts
@@ -39,9 +39,8 @@ Cypress.Commands.add('removeNodeByName', (nodeName: string, nodeIndex?: number)
   cy.wait(1000);
 });
 
-Cypress.Commands.add('quickAppend', (nodeIndex?: number) => {
-  nodeIndex = nodeIndex ?? 0;
-  cy.get('[data-testid="quick-append-step"]').eq(nodeIndex).click({ force: true });
+Cypress.Commands.add('quickAppendStep', (path: string) => {
+  cy.get(`[data-testid="placeholder-node__${path}"]`).click({ force: true });
 });
 
 Cypress.Commands.add('selectDuplicateNode', (nodeName: string, nodeIndex?: number) => {
@@ -213,10 +212,18 @@ Cypress.Commands.add('checkLightMode', () => {
   cy.get('html').should('not.have.class', 'pf-v6-theme-dark');
 });
 
-Cypress.Commands.add('DnD', (sourceNodeName: string, targetNodeName: string) => {
+Cypress.Commands.add('DnDOnNode', (sourceNodeName: string, targetNodeName: string) => {
   const sourceNode = cy.get(`[data-testid="${sourceNodeName}"]`);
   const targetNode = cy.get(`[data-testid="${targetNodeName}"]`);
 
   sourceNode.realMouseDown({ button: 'left', position: 'center' }).realMouseMove(0, 0, { position: 'center' });
   targetNode.realMouseMove(0, 0, { position: 'center' }).realMouseUp();
 });
+
+Cypress.Commands.add('DnDOnEdge', (sourceNodeName: string, targetEdgeName: string) => {
+  const sourceNode = cy.get(`[data-testid="${sourceNodeName}"]`);
+  const targetEdge = cy.get(`[data-id="${targetEdgeName}"]`);
+
+  sourceNode.realMouseDown({ button: 'left', position: 'center' }).realMouseMove(0, 0, { position: 'center' });
+  targetEdge.realMouseMove(0, 0, { position: 'center' }).realMouseUp();
+});