test: E2E NDV (#4712)

* test: start testing node details view

* test: deleting workflow after test

* test: rename deleteWorkflow command

* test: webhook node

* test: roll back deleting workflow in workflow test

* test: check output display modes after webhook node invoked

* test: simplifying test

* test: simplifying test

* test: adding more tests related to NDV

* test: adding more tests related to NDV

* test: update after merge

* Merge remote-tracking branch 'origin/master' into n8n-5494-e2e-ndv

# Conflicts:
#	cypress/pages/workflow.ts

* test: improving test blocks

* test: NDV change node input

* test: NDV change node input

* test: NDV fix missing command

* test(editor): Add NDV page object

cypress/pages/index.ts

@@ -6,3 +6,4 @@ export * from './workflows';
 export * from './workflow';
 export * from './modals';
 export * from './settings-users';
+export * from './ndv';

cypress/pages/ndv.ts

@@ -0,0 +1,16 @@
+import { BasePage } from "./base";
+
+export class NDV extends BasePage {
+	getters = {
+		container: () => cy.getByTestId('ndv'),
+		backToCanvas: () => cy.getByTestId('back-to-canvas'),
+		copyInput: () => cy.getByTestId('copy-input'),
+		nodeExecuteButton: () => cy.getByTestId('node-execute-button'),
+		inputSelect: () => cy.getByTestId('ndv-input-select'),
+		inputOption: () => cy.getByTestId('ndv-input-option'),
+		inputPanel: () => cy.getByTestId('ndv-input-panel'),
+		dataContainer: () => cy.getByTestId('ndv-data-container'),
+		runDataDisplayMode: () => cy.getByTestId('ndv-run-data-display-mode'),
+		digital: () => cy.getByTestId('ndv-run-data-display-mode'),
+	}
+}

cypress/pages/workflow.ts

@@ -11,17 +11,11 @@ export class WorkflowPage extends BasePage {
 		workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'),
 		newTagLink: () => cy.getByTestId('new-tag-link'),
 		saveButton: () => cy.getByTestId('workflow-save-button'),
-
 		nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'),
 		nodeCreatorPlusButton: () => cy.getByTestId('node-creator-plus-button'),
 		canvasPlusButton: () => cy.getByTestId('canvas-plus-button'),
-		canvasNodeBox: (nodeDisplayName: string) => {
-			return cy
-				.getByTestId('canvas-node-box-title')
-				.contains(nodeDisplayName)
-				.parents('[data-test-id="canvas-node-box"]');
-		},
-
+		canvasNodes: () => cy.getByTestId('canvas-node'),
+		canvasNodeByName: (nodeName: string) => this.getters.canvasNodes().filter(`:contains("${nodeName}")`),
 		ndvParameterInput: (parameterName: string) =>
 			cy.getByTestId(`parameter-input-${parameterName}`),
 		ndvOutputPanel: () => cy.getByTestId('output-panel'),
@@ -51,7 +45,7 @@ export class WorkflowPage extends BasePage {
 			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
 		},
 		openNodeNdv: (nodeTypeName: string) => {
-			this.getters.canvasNodeBox(nodeTypeName).dblclick();
+			this.getters.canvasNodeByName(nodeTypeName).dblclick();
 		},
 		typeIntoParameterInput: (parameterName: string, content: string) => {
 			this.getters.ndvParameterInput(parameterName).type(content);
@@ -94,5 +88,8 @@ export class WorkflowPage extends BasePage {
 			});
 			cy.get('body').type('{enter}');
 		},
+		zoomToFit: () => {
+			cy.getByTestId('zoom-to-fit').click();
+		},
 	};
 }

cypress/pages/workflows.ts

@@ -29,5 +29,12 @@ export class WorkflowsPage extends BasePage {
 		createWorkflowFromCard: () => {
 			this.getters.newWorkflowButtonCard().click();
 		},
+		deleteWorkFlow: (name: string) => {
+			cy.visit(this.url);
+			this.getters.workflowCardActions(name).click();
+			this.getters.workflowDeleteButton().click();
+
+			cy.get('button').contains('delete').click();
+		}
 	}
 }