n8n-io · ivov · Nov 25, 2022 · Nov 24, 2022 · Nov 24, 2022 · Nov 24, 2022
diff --git a/cypress/e2e/4-http-request-node.cy.ts b/cypress/e2e/4-http-request-node.cy.ts
@@ -0,0 +1,23 @@
+import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
+import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
+
+const WorkflowsPage = new WorkflowsPageClass();
+const WorkflowPage = new WorkflowPageClass();
+
+describe('HTTP Request node', () => {
+	beforeEach(() => {
+		cy.skipSetup();
+	});
+
+	it('should make a request with a URL and receive a response', () => {
+		WorkflowsPage.actions.createWorkflowFromCard();
+		WorkflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
+		WorkflowPage.actions.addNodeToCanvas('HTTP Request');
+		WorkflowPage.actions.openNodeNdv('HTTP Request');
+		WorkflowPage.actions.typeIntoParameterInput('url', 'https://google.com');
+
+		WorkflowPage.actions.executeNodeFromNdv();
+
+		WorkflowPage.getters.ndvOutputPanel().contains('<!doctype html>');
+	});
+});
diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts
@@ -1,11 +1,50 @@
-import { BasePage } from "./base";
+import { BasePage } from './base';
 
 export class WorkflowPage extends BasePage {
 	url = '/workflow/new';
 	getters = {
-		workflowNameInput: () => cy.getByTestId('workflow-name-input', { timeout: 5000 }).then($el => cy.wrap($el.find('input'))),
+		workflowNameInput: () =>
+			cy
+				.getByTestId('workflow-name-input', { timeout: 5000 })
+				.then(($el) => cy.wrap($el.find('input'))),
 		workflowImportInput: () => cy.getByTestId('workflow-import-input'),
 		workflowTags: () => cy.getByTestId('workflow-tags'),
 		saveButton: () => cy.getByTestId('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"]');
+		},
+
+		ndvParameterInput: (parameterName: string) =>
+			cy.getByTestId(`parameter-input-${parameterName}`),
+		ndvOutputPanel: () => cy.getByTestId('output-panel'),
+	};
+
+	actions = {
+		addInitialNodeToCanvas: (nodeDisplayName: string) => {
+			this.getters.canvasPlusButton().click();
+			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
+			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+		},
+		addNodeToCanvas: (nodeDisplayName: string) => {
+			this.getters.nodeCreatorPlusButton().click();
+			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
+			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+		},
+		openNodeNdv: (nodeTypeName: string) => {
+			this.getters.canvasNodeBox(nodeTypeName).dblclick();
+		},
+		typeIntoParameterInput: (parameterName: string, content: string) => {
+			this.getters.ndvParameterInput(parameterName).type(content);
+		},
+		executeNodeFromNdv: () => {
+			cy.contains('Execute node').click();
+		},
 	};
 }
diff --git a/cypress/pages/workflows.ts b/cypress/pages/workflows.ts
@@ -24,4 +24,10 @@ export class WorkflowsPage extends BasePage {
 		// myWorkflows: () => cy.getByTestId('my-workflows'),
 		// allWorkflows: () => cy.getByTestId('all-workflows'),
 	};
+
+	actions = {
+		createWorkflowFromCard: () => {
+			this.getters.newWorkflowButtonCard().click();
+		},
+	}
 }
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="node-wrapper" :style="nodePosition" :id="nodeId">
+	<div class="node-wrapper" :style="nodePosition" :id="nodeId" data-test-id="canvas-node-box">
 		<div class="select-background" v-show="isSelected"></div>
 		<div :class="{'node-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}" :data-name="data.name" :ref="data.name">
 			<div :class="nodeClass" :style="nodeStyle" @click.left="onClick" v-touch:start="touchStart" v-touch:end="touchEnd">
@@ -80,7 +80,7 @@
 		</div>
 		<div class="node-description">
 			<div class="node-name ph-no-capture" :title="nodeTitle">
-				<p>
+				<p data-test-id="canvas-node-box-title">
 					{{ nodeTitle }}
 				</p>
 				<p v-if="data.disabled">

diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div v-if="!createNodeActive" :class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']" @mouseenter="onCreateMenuHoverIn">
-			<div :class="$style.nodeCreatorButton">
+			<div :class="$style.nodeCreatorButton" data-test-id="node-creator-plus-button">
 				<n8n-icon-button size="xlarge" icon="plus" type="tertiary" :class="$style.nodeCreatorPlus" @click="openNodeCreator" :title="$locale.baseText('nodeView.addNode')"/>
 				<div :class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']" @click="addStickyNote">
 					<n8n-icon-button size="medium" type="tertiary" :icon="['far', 'note-sticky']" :title="$locale.baseText('nodeView.addSticky')"/>

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
@@ -10,6 +10,7 @@
 				:value="value"
 				@input="onInput"
 				:class="$style.input"
+				data-test-id="node-creator-search-bar"
 			/>
 		</div>
 		<div :class="$style.suffix" v-if="value.length > 0" @click="clear">

diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -70,6 +70,7 @@
 				</template>
 				<template #output>
 					<OutputPanel
+						data-test-id="output-panel"
 						:canLinkRuns="canLinkRuns"
 						:runIndex="outputRun"
 						:linkedRuns="linked"

diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -5,6 +5,7 @@
 		:required="parameter.required"
 		:showTooltip="focused"
 		:showOptions="menuExpanded"
+		:data-test-id="parameter.name"
 	>
 		<template #options>
 			<parameter-options

diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -20,7 +20,9 @@
 				@blur="onBlur"
 				@drop="onDrop"
 				@textInput="onTextInput"
-				@valueChanged="onValueChanged" />
+				@valueChanged="onValueChanged"
+				:data-test-id="`parameter-input-${parameter.name}`"
+			/>
 		<input-hint v-if="expressionOutput" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput" />
 		<input-hint v-else-if="parameterHint" :class="$style.hint" :renderHTML="true" :hint="parameterHint" />
 	</div>

diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.container" :style="containerCssVars" ref="container">
 		<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="isScrimActive" :popper-class="$style.tooltip" :open-delay="700">
-			<button :class="$style.button" @click="$emit('click')">
+			<button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
 				<font-awesome-icon icon="plus" size="lg" />
 			</button>
 			<template #content>