test(editor): Add canvas actions e2e tests (#4950)

* ✅ Added some more workflow actions tests
* ✅ Updating duplicate workflow tests
* ✅ Fixed duplicate workflow tests
* ✅ Added first batch of canvas tests
* ✅ Added zoom and select tests
* ✅ Added tests for adding and deleting nodes
* ✅ Adding a wait before clicking connection action buttons
* ✅ Adding tests for node actions
* 👌 Addressing review feedback
* 👌 Addressing PR feedback

cypress/constants.ts

@@ -7,3 +7,5 @@ export const MANUAL_TRIGGER_NODE_NAME = 'Manual Trigger';
 export const SCHEDULE_TRIGGER_NODE_NAME = 'Schedule Trigger';
 export const CODE_NODE_NAME = 'Code';
 export const SET_NODE_NAME = 'Set';
+
+export const META_KEY = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';

cypress/e2e/10-undo-redo.cy.ts

@@ -38,6 +38,7 @@ describe('Undo/Redo', () => {
 		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
 		WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME);
 		WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true });
+		cy.get('.connection-actions .add').invoke('show');
 		cy.get('.connection-actions .add').should('be.visible');
 		cy.get('.connection-actions .add').click();
 		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);

cypress/e2e/12-canvas.cy.ts

@@ -0,0 +1,283 @@
+import { MANUAL_TRIGGER_NODE_NAME, CODE_NODE_NAME, SCHEDULE_TRIGGER_NODE_NAME, SET_NODE_NAME } from './../constants';
+import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
+
+const WorkflowPage = new WorkflowPageClass();
+
+const DEFAULT_ZOOM_FACTOR = 1;
+const ZOOM_IN_X1_FACTOR = 1.25; // Zoom in factor after one click
+const ZOOM_IN_X2_FACTOR = 1.5625; // Zoom in factor after two clicks
+const ZOOM_OUT_X1_FACTOR = 0.8;
+const ZOOM_OUT_X2_FACTOR = 0.64;
+const RENAME_NODE_NAME = 'Something else';
+
+describe('Canvas Actions', () => {
+	beforeEach(() => {
+		cy.resetAll();
+		cy.skipSetup();
+		WorkflowPage.actions.visit();
+		cy.waitForLoad();
+	});
+
+	it('should render canvas', () => {
+		WorkflowPage.getters.nodeViewRoot().should('be.visible');
+		WorkflowPage.getters.canvasPlusButton().should('be.visible');
+		WorkflowPage.getters.zoomToFitButton().should('be.visible');
+		WorkflowPage.getters.zoomInButton().should('be.visible');
+		WorkflowPage.getters.zoomOutButton().should('be.visible');
+		WorkflowPage.getters.executeWorkflowButton().should('be.visible');
+	});
+
+	it('should add first step', () => {
+		WorkflowPage.getters.canvasPlusButton().should('be.visible');
+		WorkflowPage.actions.addInitialNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.getters.canvasNodes().should('have.length', 1);
+	});
+
+	it('should add a connected node using plus endpoint', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		cy.get('.plus-endpoint').should('be.visible').click();
+		WorkflowPage.getters.nodeCreatorSearchBar().should('be.visible');
+		WorkflowPage.getters.nodeCreatorSearchBar().type(CODE_NODE_NAME);
+		WorkflowPage.getters.nodeCreatorSearchBar().type('{enter}');
+		cy.get('body').type('{esc}');
+		WorkflowPage.getters.canvasNodes().should('have.length', 2);
+		WorkflowPage.getters.nodeConnections().should('have.length', 1);
+	});
+
+	it('should add disconnected node if nothing is selected', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		// Deselect nodes
+		WorkflowPage.getters.nodeViewBackground().click({ force: true });
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters.canvasNodes().should('have.length', 2);
+		WorkflowPage.getters.nodeConnections().should('have.length', 0);
+	});
+
+	it('should add note between two connected nodes', () => {
+		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true });
+		cy.get('.connection-actions .add').as('AddNodeConnectionButton')
+		cy.get('@AddNodeConnectionButton').invoke('show');
+		cy.get('@AddNodeConnectionButton').should('be.visible').click();
+		WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME);
+		WorkflowPage.getters.canvasNodes().should('have.length', 3);
+		WorkflowPage.getters.nodeConnections().should('have.length', 2);
+		// And last node should be pushed to the right
+		WorkflowPage.getters.canvasNodes().last().should('have.attr', 'style', 'left: 640px; top: 260px;');
+	});
+
+	it('should delete node using node action button', () => {
+		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters
+			.canvasNodeByName(CODE_NODE_NAME)
+			.find('[data-test-id=delete-node-button]')
+			.click({ force: true });
+		WorkflowPage.getters.canvasNodes().should('have.length', 1);
+		WorkflowPage.getters.nodeConnections().should('have.length', 0);
+	});
+
+	it('should delete node using keyboard shortcut', () => {
+		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).click();
+		cy.get('body').type('{backspace}');
+		WorkflowPage.getters.canvasNodes().should('have.length', 1);
+		WorkflowPage.getters.nodeConnections().should('have.length', 0);
+	});
+
+	it('should delete node between two connected nodes', () => {
+		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(SET_NODE_NAME);
+		WorkflowPage.getters.canvasNodes().should('have.length', 3);
+		WorkflowPage.getters.nodeConnections().should('have.length', 2);
+		WorkflowPage.getters.canvasNodeByName(CODE_NODE_NAME).click();
+		WorkflowPage.actions.zoomToFit();
+		cy.get('body').type('{backspace}');
+		WorkflowPage.getters.canvasNodes().should('have.length', 2);
+		WorkflowPage.getters.nodeConnections().should('have.length', 1);
+	});
+
+	it('should delete multiple nodes', () => {
+		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		cy.wait(500);
+		WorkflowPage.actions.selectAll();
+		cy.get('body').type('{backspace}');
+		WorkflowPage.getters.canvasNodes().should('have.length', 0);
+	});
+
+	it('should move node', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.actions.zoomToFit();
+		cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', 50, 150);
+		WorkflowPage.getters.canvasNodes().last().should('have.attr', 'style', 'left: 740px; top: 360px;');
+	});
+
+	it('should zoom in', () => {
+		WorkflowPage.getters.zoomInButton().should('be.visible').click();
+		WorkflowPage.getters.nodeView().should(
+			'have.css',
+			'transform',
+			`matrix(${ ZOOM_IN_X1_FACTOR }, 0, 0, ${ ZOOM_IN_X1_FACTOR }, 0, 0)`
+		);
+		WorkflowPage.getters.zoomInButton().click();
+		WorkflowPage.getters.nodeView().should(
+			'have.css',
+			'transform',
+			`matrix(${ ZOOM_IN_X2_FACTOR }, 0, 0, ${ ZOOM_IN_X2_FACTOR }, 0, 0)`
+		);
+	});
+
+	it('should zoom out', () => {
+		WorkflowPage.getters.zoomOutButton().should('be.visible').click();
+		WorkflowPage.getters.nodeView().should(
+			'have.css',
+			'transform',
+			`matrix(${ ZOOM_OUT_X1_FACTOR }, 0, 0, ${ ZOOM_OUT_X1_FACTOR }, 0, 0)`
+		);
+		WorkflowPage.getters.zoomOutButton().click();
+		WorkflowPage.getters.nodeView().should(
+			'have.css',
+			'transform',
+			`matrix(${ ZOOM_OUT_X2_FACTOR }, 0, 0, ${ ZOOM_OUT_X2_FACTOR }, 0, 0)`
+		);
+	});
+
+	it('should reset zoom', () => {
+		// Reset zoom should not appear until zoom level changed
+		WorkflowPage.getters.resetZoomButton().should('not.exist');
+		WorkflowPage.getters.zoomInButton().click();
+		WorkflowPage.getters.resetZoomButton().should('be.visible').click();
+		WorkflowPage.getters.nodeView().should(
+			'have.css',
+			'transform',
+			`matrix(${ DEFAULT_ZOOM_FACTOR }, 0, 0, ${ DEFAULT_ZOOM_FACTOR }, 0, 0)`
+		);
+	});
+
+	it('should zoom to fit', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		// At this point last added node should be off-screen
+		WorkflowPage.getters.canvasNodes().last().should('not.be.visible');
+		WorkflowPage.getters.zoomToFitButton().click();
+		WorkflowPage.getters.canvasNodes().last().should('be.visible');
+	});
+
+	it('should select all nodes', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.actions.selectAll();
+		WorkflowPage.getters.selectedNodes().should('have.length', 2);
+	});
+
+	it('should select nodes using arrow keys', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		cy.wait(500);
+		cy.get('body').type('{leftArrow}');
+		WorkflowPage.getters.canvasNodes().first().should('have.class', 'jtk-drag-selected');
+		cy.get('body').type('{rightArrow}');
+		WorkflowPage.getters.canvasNodes().last().should('have.class', 'jtk-drag-selected');
+	});
+
+	it ('should select nodes using shift and arrow keys', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		cy.wait(500);
+		cy.get('body').type('{shift}', { release: false }).type('{leftArrow}');
+		WorkflowPage.getters.selectedNodes().should('have.length', 2);
+	});
+
+	it('should delete connections by pressing the delete button', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters.nodeConnections().first().trigger('mouseover', { force: true });
+		cy.get('.connection-actions .delete').click();
+		WorkflowPage.getters.nodeConnections().should('have.length', 0);
+	});
+
+	it('should delete a connection by moving it away from endpoint', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		cy.drag('.rect-input-endpoint.jtk-endpoint-connected', 0, -100);
+		WorkflowPage.getters.nodeConnections().should('have.length', 0);
+	});
+
+	it('should disable node by pressing the disable button', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last()
+			.find('[data-test-id="disable-node-button"]')
+			.click({ force: true });
+		WorkflowPage.getters.disabledNodes().should('have.length', 1);
+	});
+
+	it('should disable node using keyboard shortcut', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters.canvasNodes().last().click();
+		WorkflowPage.actions.hitDisableNodeShortcut();
+		WorkflowPage.getters.disabledNodes().should('have.length', 1);
+	});
+
+	it('should disable multiple nodes', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		cy.get('body').type('{esc}');
+		cy.get('body').type('{esc}');
+		WorkflowPage.actions.selectAll();
+		WorkflowPage.actions.hitDisableNodeShortcut();
+		WorkflowPage.getters.disabledNodes().should('have.length', 2);
+	});
+
+	it('should rename node using keyboard shortcut', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters.canvasNodes().last().click();
+		cy.get('body').trigger('keydown', { key: 'F2' });
+		cy.get('.rename-prompt').should('be.visible');
+		cy.get('body').type(RENAME_NODE_NAME);
+		cy.get('body').type('{enter}');
+		WorkflowPage.getters.canvasNodeByName(RENAME_NODE_NAME).should('exist');
+	});
+
+	it('should duplicate node', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last()
+			.find('[data-test-id="duplicate-node-button"]')
+			.click({ force: true });
+		WorkflowPage.getters.canvasNodes().should('have.length', 3);
+		WorkflowPage.getters.nodeConnections().should('have.length', 1);
+	})
+
+	it('should execute node', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last()
+			.find('[data-test-id="execute-node-button"]')
+			.click({ force: true });
+		WorkflowPage.getters.successToast().should('contain', 'Node executed successfully');
+	});
+
+	it('should copy selected nodes', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.actions.selectAll();
+		WorkflowPage.actions.hitCopy();
+		WorkflowPage.getters.successToast().should('contain', 'Copied!');
+	});
+});

cypress/e2e/7-workflow-actions.cy.ts

@@ -1,9 +1,11 @@
-import { CODE_NODE_NAME, MANUAL_TRIGGER_NODE_NAME, SCHEDULE_TRIGGER_NODE_NAME } from '../constants';
+import { CODE_NODE_NAME, MANUAL_TRIGGER_NODE_NAME, META_KEY, SCHEDULE_TRIGGER_NODE_NAME } from '../constants';
 import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
 
 const NEW_WORKFLOW_NAME = 'Something else';
 const TEST_WF_TAGS = ['Tag 1', 'Tag 2', 'Tag 3'];
 const IMPORT_WORKFLOW_URL = 'https://www.jsonkeeper.com/b/FNB0#.json';
+const DUPLICATE_WORKFLOW_NAME = 'Duplicated workflow';
+const DUPLICATE_WORKFLOW_TAG = 'Duplicate'
 
 const WorkflowPage = new WorkflowPageClass();
 
@@ -94,16 +96,14 @@ describe('Workflow Actions', () => {
 	});
 
 	it('should copy nodes', () => {
-		const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
-
 		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
 		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
 		WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
 
 		cy.get('#node-creator').should('not.exist');
-		cy.get('body').type(metaKey, { delay: 500, release: false }).type('a');
+		cy.get('body').type(META_KEY, { delay: 500, release: false }).type('a');
 		cy.get('.jtk-drag-selected').should('have.length', 2);
-		cy.get('body').type(metaKey, { delay: 500, release: false }).type('c');
+		cy.get('body').type(META_KEY, { delay: 500, release: false }).type('c');
 		WorkflowPage.getters.successToast().should('exist');
 	});
 
@@ -197,4 +197,46 @@ describe('Workflow Actions', () => {
 		WorkflowPage.getters.workflowSettingsModal().should('not.exist');
 		WorkflowPage.getters.successToast().should('exist');
 	});
+
+	it('should not be able to delete unsaved workflow', () => {
+		WorkflowPage.getters.workflowMenu().should('be.visible');
+		WorkflowPage.getters.workflowMenu().click();
+		WorkflowPage.getters.workflowMenuItemDelete().closest('li')
+			.should('have.class', 'is-disabled');
+	});
+
+	it('should delete workflow', () => {
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+		WorkflowPage.getters.workflowMenu().should('be.visible');
+		WorkflowPage.getters.workflowMenu().click();
+		WorkflowPage.getters.workflowMenuItemDelete().click();
+		cy.get('div[role=dialog][aria-modal=true]').should('be.visible');
+		cy.get('button.btn--confirm').should('be.visible').click();
+		WorkflowPage.getters.successToast().should('exist');
+		cy.url().should('include', '/workflow/new');
+	});
+
+	it('should duplicate workflow', () => {
+		// Stub window.open so new tab is not getting opened
+		cy.window().then(win => {
+			cy.stub(win, 'open').as('open')
+		})
+
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.saveWorkflowOnButtonClick();
+		WorkflowPage.getters.workflowMenu().should('be.visible');
+		WorkflowPage.getters.workflowMenu().click();
+		WorkflowPage.getters.workflowMenuItemDuplicate().click();
+		WorkflowPage.getters.duplicateWorkflowModal().should('be.visible');
+		WorkflowPage.getters.duplicateWorkflowModal().find('input').first().should('be.visible');
+		WorkflowPage.getters.duplicateWorkflowModal().find('input').first().type('{selectall}');
+		WorkflowPage.getters.duplicateWorkflowModal().find('input').first().type(DUPLICATE_WORKFLOW_NAME);
+		WorkflowPage.getters.duplicateWorkflowModal().find('.el-select__tags input').type(DUPLICATE_WORKFLOW_TAG);
+		WorkflowPage.getters.duplicateWorkflowModal().find('.el-select__tags input').type('{enter}');
+		WorkflowPage.getters.duplicateWorkflowModal().find('.el-select__tags input').type('{enter}');
+		WorkflowPage.getters.duplicateWorkflowModal().find('button').contains('Duplicate').should('be.visible');
+		WorkflowPage.getters.duplicateWorkflowModal().find('button').contains('Duplicate').click();
+		WorkflowPage.getters.errorToast().should('not.exist');
+	});
+
 });

cypress/pages/workflow.ts

@@ -1,3 +1,4 @@
+import { META_KEY } from '../constants';
 import { BasePage } from './base';
 
 export class WorkflowPage extends BasePage {
@@ -27,7 +28,8 @@ export class WorkflowPage extends BasePage {
 			cy.getByTestId(`parameter-input-${parameterName}`),
 		ndvOutputPanel: () => cy.getByTestId('output-panel'),
 		ndvRunDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
-		successToast: () => cy.get('.el-notification__title'),
+		successToast: () => cy.get('.el-notification .el-icon-success').parent(),
+		errorToast: () => cy.get('.el-notification .el-icon-error'),
 		activatorSwitch: () => cy.getByTestId('workflow-activate-switch'),
 		workflowMenu: () => cy.getByTestId('workflow-menu'),
 		firstStepButton: () => cy.getByTestId('canvas-add-button'),
@@ -42,6 +44,7 @@ export class WorkflowPage extends BasePage {
 		zoomToFitButton: () => cy.getByTestId('zoom-to-fit'),
 		nodeEndpoints: () => cy.get('.jtk-endpoint-connected'),
 		disabledNodes: () => cy.get('.node-box.disabled'),
+		selectedNodes: () => this.getters.canvasNodes().filter('.jtk-drag-selected'),
 		nodeNameContainerNDV: () => cy.getByTestId('node-title-container'),
 		nodeRenameInput: () => cy.getByTestId('node-rename-input'),
 		// Workflow menu items
@@ -69,8 +72,15 @@ export class WorkflowPage extends BasePage {
 		workflowSettingsSaveButton: () =>
 			cy.getByTestId('workflow-settings-save-button').find('button'),
 
+		duplicateWorkflowModal: () => cy.getByTestId('duplicate-modal'),
+		nodeViewBackground: () => cy.getByTestId('node-view-background'),
+		nodeView: () => cy.getByTestId('node-view'),
 		inlineExpressionEditorInput: () => cy.getByTestId('inline-expression-editor-input'),
 		inlineExpressionEditorOutput: () => cy.getByTestId('inline-expression-editor-output'),
+		zoomInButton: () => cy.getByTestId('zoom-in-button'),
+		zoomOutButton: () => cy.getByTestId('zoom-out-button'),
+		resetZoomButton: () => cy.getByTestId('reset-zoom-button'),
+		executeWorkflowButton: () => cy.getByTestId('execute-workflow-button'),
 	};
 	actions = {
 		visit: () => {
@@ -147,23 +157,25 @@ export class WorkflowPage extends BasePage {
 			cy.getByTestId('zoom-to-fit').click();
 		},
 		hitUndo: () => {
-			const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+			cy.get('body').type(META_KEY, { delay: 500, release: false }).type('z');
-			cy.get('body').type(metaKey, { delay: 500, release: false }).type('z');
 		},
 		hitRedo: () => {
-			const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
 			cy.get('body')
-				.type(metaKey, { delay: 500, release: false })
+				.type(META_KEY, { delay: 500, release: false })
 				.type('{shift}', { release: false })
 				.type('z');
 		},
 		selectAll: () => {
-			const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+			cy.get('body').type(META_KEY, { delay: 500, release: false }).type('a');
-			cy.get('body').type(metaKey, { delay: 500, release: false }).type('a');
 		},
 		hitDisableNodeShortcut: () => {
-			const metaKey = Cypress.platform === 'darwin' ? '{meta}' : '{ctrl}';
+			cy.get('body').type(META_KEY, { delay: 500, release: false }).type('d');
-			cy.get('body').type(metaKey, { delay: 500, release: false }).type('d');
+		},
+		hitCopy: () => {
+			cy.get('body').type(META_KEY, { delay: 500, release: false }).type('c');
+		},
+		hitPaste: () => {
+			cy.get('body').type(META_KEY, { delay: 500, release: false }).type('P');
 		},
 	};
 }

packages/editor-ui/src/components/CanvasControls.vue

@@ -20,6 +20,7 @@
 			size="large"
 			:title="$locale.baseText('nodeView.zoomIn')"
 			icon="search-plus"
+			data-test-id="zoom-in-button"
 		/>
 		<n8n-icon-button
 			@click="zoomOut"
@@ -27,6 +28,7 @@
 			size="large"
 			:title="$locale.baseText('nodeView.zoomOut')"
 			icon="search-minus"
+			data-test-id="zoom-out-button"
 		/>
 		<n8n-icon-button
 			v-if="nodeViewScale !== 1 && !isDemo"
@@ -35,6 +37,7 @@
 			size="large"
 			:title="$locale.baseText('nodeView.resetZoom')"
 			icon="undo"
+			data-test-id="reset-zoom-button"
 		/>
 	</div>
 </template>

packages/editor-ui/src/views/NodeView.vue

@@ -18,8 +18,8 @@
 				@mouseup="mouseUp"
 				@wheel="canvasStore.wheelScroll"
 			>
-				<div id="node-view-background" class="node-view-background" :style="backgroundStyle" />
+				<div id="node-view-background" class="node-view-background" :style="backgroundStyle" data-test-id="node-view-background" />
-				<div id="node-view" class="node-view" :style="workflowStyle" ref="nodeView">
+				<div id="node-view" class="node-view" :style="workflowStyle" ref="nodeView" data-test-id="node-view">
 					<canvas-add-button
 						:style="canvasAddButtonStyle"
 						@click="showTriggerCreator('trigger_placeholder_button')"
@@ -104,6 +104,7 @@
 						icon="play-circle"
 						type="primary"
 						:disabled="isExecutionDisabled"
+						data-test-id="execute-workflow-button"
 					/>
 				</span>