test: Update e2e tests for canvas specific actions (no-changelog) (n8…

…n-io#12614)

cypress/composables/workflow.ts

@@ -1,6 +1,7 @@
 import { getManualChatModal } from './modals/chat-modal';
 import { clickGetBackToCanvas, getParameterInputByName } from './ndv';
 import { ROUTES } from '../constants';
+import type { OpenContextMenuOptions } from '../types';
 
 /**
  * Types
@@ -24,7 +25,36 @@ export type EndpointType =
  * Getters
  */
 
-export function getAddInputEndpointByType(nodeName: string, endpointType: EndpointType) {
+export function getCanvas() {
+	return cy.getByTestId('canvas');
+}
+
+export function getCanvasPane() {
+	return cy.ifCanvasVersion(
+		() => cy.getByTestId('node-view-background'),
+		() => getCanvas().find('.vue-flow__pane'),
+	);
+}
+
+export function getContextMenu() {
+	return cy.getByTestId('context-menu').find('.el-dropdown-menu');
+}
+
+export function getContextMenuAction(action: string) {
+	return cy.getByTestId(`context-menu-item-${action}`);
+}
+
+export function getInputPlusHandle(nodeName: string) {
+	return cy.ifCanvasVersion(
+		() => cy.get(`.add-input-endpoint[data-endpoint-name="${nodeName}"]`),
+		() =>
+			cy.get(
+				`[data-test-id="canvas-node-input-handle"][data-node-name="${nodeName}"] [data-test-id="canvas-handle-plus"]`,
+			),
+	);
+}
+
+export function getInputPlusHandleByType(nodeName: string, endpointType: EndpointType) {
 	return cy.ifCanvasVersion(
 		() =>
 			cy.get(
@@ -37,6 +67,29 @@ export function getAddInputEndpointByType(nodeName: string, endpointType: Endpoi
 	);
 }
 
+export function getOutputPlusHandle(nodeName: string) {
+	return cy.ifCanvasVersion(
+		() => cy.get(`.add-output-endpoint[data-endpoint-name="${nodeName}"]`),
+		() =>
+			cy.get(
+				`[data-test-id="canvas-node-output-handle"][data-node-name="${nodeName}"] [data-test-id="canvas-handle-plus"]`,
+			),
+	);
+}
+
+export function getOutputPlusHandleByType(nodeName: string, endpointType: EndpointType) {
+	return cy.ifCanvasVersion(
+		() =>
+			cy.get(
+				`.add-output-endpoint[data-jtk-scope-${endpointType}][data-endpoint-name="${nodeName}"]`,
+			),
+		() =>
+			cy.get(
+				`[data-test-id="canvas-node-output-handle"][data-connection-type="${endpointType}"][data-node-name="${nodeName}"] [data-test-id="canvas-handle-plus"]`,
+			),
+	);
+}
+
 export function getNodeCreatorItems() {
 	return cy.getByTestId('item-iterator-item');
 }
@@ -60,6 +113,13 @@ export function getNodeByName(name: string) {
 	);
 }
 
+export function getNodeRenderedTypeByName(name: string) {
+	return cy.ifCanvasVersion(
+		() => getNodeByName(name),
+		() => getNodeByName(name).find('[data-canvas-node-render-type]'),
+	);
+}
+
 export function getWorkflowHistoryCloseButton() {
 	return cy.getByTestId('workflow-history-close-button');
 }
@@ -85,6 +145,12 @@ export function getConnectionBySourceAndTarget(source: string, target: string) {
 	);
 }
 
+export function getConnectionLabelBySourceAndTarget(source: string, target: string) {
+	return cy
+		.getByTestId('edge-label')
+		.filter(`[data-source-node-name="${source}"][data-target-node-name="${target}"]`);
+}
+
 export function getNodeCreatorSearchBar() {
 	return cy.getByTestId('node-creator-search-bar');
 }
@@ -94,10 +160,7 @@ export function getNodeCreatorPlusButton() {
 }
 
 export function getCanvasNodes() {
-	return cy.ifCanvasVersion(
-		() => cy.getByTestId('canvas-node'),
-		() => cy.getByTestId('canvas-node').not('[data-node-type="n8n-nodes-internal.addNodes"]'),
-	);
+	return cy.getByTestId('canvas-node');
 }
 
 export function getCanvasNodeByName(nodeName: string) {
@@ -157,7 +220,7 @@ function connectNodeToParent(
 	parentNodeName: string,
 	exactMatch = false,
 ) {
-	getAddInputEndpointByType(parentNodeName, endpointType).click({ force: true });
+	getInputPlusHandleByType(parentNodeName, endpointType).click({ force: true });
 	if (exactMatch) {
 		getNodeCreatorItems()
 			.contains(new RegExp('^' + nodeName + '$', 'g'))
@@ -257,3 +320,34 @@ export function deleteNode(name: string) {
 	getCanvasNodeByName(name).first().click();
 	cy.get('body').type('{del}');
 }
+
+export function openContextMenu(
+	nodeName?: string,
+	{ method = 'right-click', anchor = 'center' }: OpenContextMenuOptions = {},
+) {
+	let target;
+	if (nodeName) {
+		target =
+			method === 'right-click' ? getNodeRenderedTypeByName(nodeName) : getNodeByName(nodeName);
+	} else {
+		target = getCanvasPane();
+	}
+
+	if (method === 'right-click') {
+		target.rightclick(nodeName ? anchor : 'topLeft', { force: true });
+	} else {
+		target.realHover();
+		target.find('[data-test-id="overflow-node-button"]').click({ force: true });
+	}
+
+	cy.ifCanvasVersion(
+		() => {},
+		() => {
+			getContextMenu().should('be.visible');
+		},
+	);
+}
+
+export function clickContextMenuAction(action: string) {
+	getContextMenuAction(action).click();
+}

cypress/e2e/12-canvas-actions.cy.ts

@@ -184,7 +184,11 @@ describe('Canvas Actions', () => {
 				.last()
 				.findChildByTestId('execute-node-button')
 				.click({ force: true });
+
+			successToast().should('have.length', 1);
+
 			WorkflowPage.actions.executeNode(CODE_NODE_NAME);
+
 			successToast().should('have.length', 2);
 			successToast().should('contain.text', 'Node executed successfully');
 		});