test: Set up e2e tests for HTTP Request node (#4718)

* 🧪 Add test identifiers

* ⚡ Add getters

* 🧪 Add initial test

* ⚡ Refactor to use actions

* ⚡ Refactor per Oleg's advice

* 🐛 Fix overlapping input label IDs

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">

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')"/>

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">

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"

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

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>

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>