fix(editor): Fix for broken selectors for workflows tests (no-changelog) (#4734)

Fixing broken selectors for workflows tests

cypress/e2e/5-workflow-actions.cy.ts

@@ -26,15 +26,14 @@ describe('Workflow Actions', () => {
 		WorkflowPage.actions.visit();
 	});
 
-	it('should be able to save on button slick', () => {
+	it('should be able to save on button click', () => {
 		WorkflowPage.actions.saveWorkflowOnButtonClick();
-		// In Element UI, disabled button turn into spans 🤷‍♂️
-		WorkflowPage.getters.saveButton().should('match', 'span');
+		WorkflowPage.getters.isWorkflowSaved();
 	});
 
 	it('should save workflow on keyboard shortcut', () => {
 		WorkflowPage.actions.saveWorkflowUsingKeyboardShortcut();
-		WorkflowPage.getters.saveButton().should('match', 'span');
+		WorkflowPage.getters.isWorkflowSaved();
 	});
 
 	it('should not be able to activate unsaved workflow', () => {
@@ -52,19 +51,20 @@ describe('Workflow Actions', () => {
 		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
 		WorkflowPage.actions.saveWorkflowOnButtonClick();
 		WorkflowPage.actions.activateWorkflow();
-		WorkflowPage.getters.activatorSwitch().should('have.class', 'is-checked');
+		WorkflowPage.getters.isWorkflowActivated();
 	});
 
 	it('should save new workflow after renaming', () => {
 		WorkflowPage.actions.renameWorkflow(NEW_WORKFLOW_NAME);
-		WorkflowPage.getters.saveButton().should('match', 'span');
+		WorkflowPage.getters.isWorkflowSaved();
 	});
 
 	it('should rename workflow', () => {
 		WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
 		WorkflowPage.actions.saveWorkflowOnButtonClick();
 		WorkflowPage.actions.renameWorkflow(NEW_WORKFLOW_NAME);
-		WorkflowPage.getters.saveButton().should('match', 'span');
-		WorkflowPage.getters.workflowNameInput().invoke('attr', 'title').should('eq', NEW_WORKFLOW_NAME);
+		WorkflowPage.getters.isWorkflowSaved();
+		WorkflowPage.getters.workflowNameInputContainer().invoke('attr', 'title').should('eq', NEW_WORKFLOW_NAME);
 	});
+
 });

cypress/pages/workflow.ts

@@ -3,9 +3,13 @@ import { BasePage } from './base';
 export class WorkflowPage extends BasePage {
 	url = '/workflow/new';
 	getters = {
-		workflowNameInput: () => cy.getByTestId('workflow-name-input'),
+		workflowNameInputContainer: () => cy
+		.getByTestId('workflow-name-input', { timeout: 5000 }),
+		workflowNameInput: () => this.getters.workflowNameInputContainer().then(($el) => cy.wrap($el.find('input'))),
 		workflowImportInput: () => cy.getByTestId('workflow-import-input'),
 		workflowTags: () => cy.getByTestId('workflow-tags'),
+		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'),
@@ -24,9 +28,15 @@ export class WorkflowPage extends BasePage {
 		activatorSwitch: () => cy.getByTestId('workflow-activate-switch'),
 		workflowMenu: () => cy.getByTestId('workflow-menu'),
 		firstStepButton: () => cy.getByTestId('canvas-add-button'),
+		isWorkflowSaved: () => this.getters.saveButton().should('match', 'span'), // In Element UI, disabled button turn into spans 🤷‍♂️
+		isWorkflowActivated: () => this.getters.activatorSwitch().should('have.class', 'is-checked'),
 	};
-
 	actions = {
+		visit: () => {
+			cy.visit(this.url);
+			cy.getByTestId('node-view-loader', { timeout: 5000 }).should('not.exist');
+			cy.get('.el-loading-mask', { timeout: 5000 }).should('not.exist');
+		},
 		addInitialNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.canvasPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
@@ -46,11 +56,6 @@ export class WorkflowPage extends BasePage {
 		executeNodeFromNdv: () => {
 			cy.contains('Execute node').click();
 		},
-		visit: () => {
-			cy.visit(this.url);
-			cy.getByTestId('node-view-loader', { timeout: 5000 }).should('not.exist');
-			cy.get('.el-loading-mask', { timeout: 5000 }).should('not.exist');
-		},
 		openWorkflowMenu: () => {
 			this.getters.workflowMenu().click();
 		},
@@ -66,10 +71,18 @@ export class WorkflowPage extends BasePage {
 			cy.get('body').type('{esc}');
 		},
 		renameWorkflow: (newName: string) => {
-			this.getters.workflowNameInput().click();
+			this.getters.workflowNameInputContainer().click();
 			cy.get('body').type('{selectall}');
 			cy.get('body').type(newName);
 			cy.get('body').type('{enter}');
 		},
+		addTags: (tags: string[]) => {
+			this.getters.newTagLink().click();
+			tags.forEach(tag => {
+				cy.get('body').type(tag);
+				cy.get('body').type('{enter}');
+			});
+			cy.get('body').type('{enter}');
+		},
 	};
 }

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -13,7 +13,7 @@
 			</span>
 
 			<template #dropdown>
-				<el-dropdown-menu :data-test-id="testId">
+				<el-dropdown-menu data-test-id="action-toggle-dropdown">
 					<el-dropdown-item
 						v-for="action in actions"
 						:key="action.value"
@@ -85,10 +85,6 @@ export default Vue.extend({
 			default: 'default',
 			validator: (value: string): boolean => ['default', 'dark'].includes(value),
 		},
-		testId: {
-			type: String,
-			required: false,
-		},
 	},
 	methods: {
 		onCommand(value: string) {

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -24,9 +24,8 @@
 			</template>
 		</BreakpointsObserver>
 
-		<span v-if="settingsStore.areTagsEnabled" class="tags">
-			<div
-				v-if="isTagsEditEnabled">
+		<span v-if="settingsStore.areTagsEnabled" class="tags" data-test-id="workflow-tags-container">
+			<div v-if="isTagsEditEnabled">
 				<TagsDropdown
 					:createEnabled="true"
 					:currentTagIds="appliedTagIds"
@@ -45,6 +44,7 @@
 			>
 				<span
 					class="add-tag clickable"
+					data-test-id="new-tag-link"
 					@click="onTagsEditEnable"
 				>
 					+ {{ $locale.baseText('workflowDetails.addTag') }}