feat: Add credentials E2E test suite and page object (#4596)

* fix: Fix inferred type of X cannot be named error after pnpm update

* feat: Change page objects to expose actions and getters. Add credential creation suite

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

@@ -2,6 +2,7 @@
 	<n8n-card
 		:class="$style['card-link']"
 		@click="onClick"
+		data-test-id="credential-card"
 	>
 			<template #prepend>
 				<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />

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

@@ -20,6 +20,7 @@
 						:readonly="!credentialPermissions.updateName"
 						type="Credential"
 						@input="onNameEdit"
+						data-test-id="credential-name"
 					/>
 				</div>
 				<div :class="$style.credActions">
@@ -32,6 +33,7 @@
 						:disabled="isSaving"
 						:loading="isDeleting"
 						@click="deleteCredential"
+						data-test-id="credential-delete-button"
 					/>
 					<SaveButton
 						v-if="(hasUnsavedChanges || credentialId) && credentialPermissions.save"
@@ -41,6 +43,7 @@
 							? $locale.baseText('credentialEdit.credentialEdit.testing')
 							: $locale.baseText('credentialEdit.credentialEdit.saving')"
 						@click="saveCredential"
+						data-test-id="credential-save-button"
 					/>
 				</div>
 			</div>

packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue

@@ -1,6 +1,6 @@
 <template>
 	<div @keydown.stop :class="$style.container" v-if="credentialProperties.length">
-		<form v-for="parameter in credentialProperties" :key="parameter.name" autocomplete="off">
+		<form v-for="parameter in credentialProperties" :key="parameter.name" autocomplete="off" data-test-id="credential-connection-parameter">
 			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
 			<n8n-notice
 				v-if="parameter.type === 'notice'"

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

@@ -13,12 +13,14 @@
 				@keydown.stop
 				@focus="$emit('setFocus')"
 				@blur="$emit('onBlur')"
+				data-test-id="credential-select"
 			>
 				<n8n-option
 					v-for="credType in supportedCredentialTypes"
 					:value="credType.name"
 					:key="credType.name"
 					:label="credType.displayName"
+					data-test-id="credential-select-option"
 				>
 					<div class="list-option">
 						<div class="option-headline">

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

@@ -22,6 +22,7 @@
 					ref="select"
 					:value="selected"
 					@change="onSelect"
+					data-test-id="new-credential-type-select"
 				>
 					<template #prefix>
 						<font-awesome-icon icon="search" />
@@ -32,6 +33,7 @@
 						:key="credential.name"
 						:label="credential.displayName"
 						filterable
+						data-test-id="new-credential-type-select-option"
 					/>
 				</n8n-select>
 			</div>
@@ -44,6 +46,7 @@
 					size="large"
 					:disabled="!selected"
 					@click="openCredentialType"
+					data-test-id="new-credential-type-button"
 				/>
 			</div>
 		</template>

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

@@ -10,6 +10,7 @@
 		:close-on-press-escape="closeOnPressEscape"
 		:style="styles"
 		append-to-body
+		:data-test-id="`${this.$props.name}-modal`"
 	>
 		<template #title v-if="$scopedSlots.header">
 			<slot name="header" v-if="!loading" />

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -31,6 +31,7 @@
 			<div class="ph-no-capture" v-if="resources.length === 0">
 				<slot name="empty">
 					<n8n-action-box
+						data-test-id="empty-resources-list"
 						emoji="👋"
 						:heading="$locale.baseText(usersStore.currentUser.firstName ? `${resourceKey}.empty.heading` : `${resourceKey}.empty.heading.userNotSetup`, {
 							interpolate: { name: usersStore.currentUser.firstName }