From 731a6397f7fc495c856d72035c1d2e5744b60b61 Mon Sep 17 00:00:00 2001
From: Artem Sorokin <38620398+seemewalkin@users.noreply.github.com>
Date: Fri, 21 Nov 2025 17:50:05 +0100
Subject: [PATCH] test: Address flakes in tags tests, add test for tag count
 persistence when reopening dropdown after save (#22160)

---
 .../testing/playwright/pages/CanvasPage.ts    | 19 +++++++--
 .../tests/ui/17-workflow-tags.spec.ts         | 39 +++++++++++++++----
 2 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/packages/testing/playwright/pages/CanvasPage.ts b/packages/testing/playwright/pages/CanvasPage.ts
index f1b2c3d3e2f..7b41673dbe8 100644
--- a/packages/testing/playwright/pages/CanvasPage.ts
+++ b/packages/testing/playwright/pages/CanvasPage.ts
@@ -290,9 +290,6 @@ export class CanvasPage extends BasePage {
 		await this.page.locator('body').click({ position: { x: 0, y: 0 } });
 	}
 
-	getWorkflowTags() {
-		return this.page.getByTestId('workflow-tags').locator('.el-tag');
-	}
 	async activateWorkflow() {
 		const switchElement = this.page.getByTestId('workflow-activate-switch');
 		const statusElement = this.page.getByTestId('workflow-activator-status');
@@ -375,10 +372,26 @@ export class CanvasPage extends BasePage {
 			.locator('.el-tag:not(.count-container)');
 	}
 
+	getSavedWorkflowTagPills(): Locator {
+		return this.page.getByTestId('workflow-tags').locator('.n8n-tag:not(.count-container)');
+	}
+
 	getTagsDropdown(): Locator {
 		return this.page.getByTestId('tags-dropdown');
 	}
 
+	getWorkflowTagsDropdown(): Locator {
+		return this.page.getByTestId('workflow-tags-dropdown');
+	}
+
+	getWorkflowTags(): Locator {
+		return this.page.getByTestId('workflow-tags');
+	}
+
+	getTagCloseButton(): Locator {
+		return this.getWorkflowTagsDropdown().locator('.el-tag__close');
+	}
+
 	async typeInTagInput(text: string): Promise<void> {
 		const input = this.page.getByTestId('workflow-tags-container').locator('input').first();
 		await input.fill(text);
diff --git a/packages/testing/playwright/tests/ui/17-workflow-tags.spec.ts b/packages/testing/playwright/tests/ui/17-workflow-tags.spec.ts
index 63cff26c57a..bab05f6a501 100644
--- a/packages/testing/playwright/tests/ui/17-workflow-tags.spec.ts
+++ b/packages/testing/playwright/tests/ui/17-workflow-tags.spec.ts
@@ -89,8 +89,6 @@ test.describe('Workflow tags - Tag operations', () => {
 		await n8n.canvas.tagsManagerModal.clickDoneButton();
 		await n8n.canvas.clickCreateTagButton();
 
-		await expect(n8n.canvas.getTagItemsInDropdown()).toHaveCount(0);
-
 		for (const tag of tags) {
 			await expect(n8n.canvas.getTagItemInDropdownByName(tag.name)).not.toBeAttached();
 		}
@@ -117,13 +115,13 @@ test.describe('Workflow tags - Tag operations', () => {
 
 		await n8n.canvas.clickNthTagPill(0);
 
-		// Click X on tag pill inside the workflow-tags-dropdown component
-		await n8n.page.getByTestId('workflow-tags-dropdown').locator('.el-tag__close').first().click();
+		await n8n.canvas.getTagCloseButton().first().click();
 
 		await n8n.canvas.clickOutsideModal();
-		await n8n.canvas.clickWorkflowTagsArea();
 
-		await expect(n8n.canvas.getTagPills()).toHaveCount(4);
+		await expect(n8n.canvas.getWorkflowTagsDropdown()).not.toBeAttached();
+		await expect(n8n.canvas.getWorkflowSaveButton()).toContainText('Saved');
+		await expect(n8n.canvas.getSavedWorkflowTagPills()).toHaveCount(4);
 	});
 
 	test('should detach tag by clicking selected item in dropdown', async ({ n8n, api }) => {
@@ -147,9 +145,36 @@ test.describe('Workflow tags - Tag operations', () => {
 		await n8n.canvas.getSelectedTagItems().first().click();
 
 		await n8n.canvas.clickOutsideModal();
+
+		await expect(n8n.canvas.getWorkflowTagsDropdown()).not.toBeAttached();
+		await expect(n8n.canvas.getWorkflowSaveButton()).toContainText('Saved');
+		await expect(n8n.canvas.getSavedWorkflowTagPills()).toHaveCount(4);
+	});
+
+	test('should show correct tag count when reopening after save', async ({ n8n, api }) => {
+		const tags = await Promise.all([
+			api.tags.create(`reopen-${nanoid(6)}`),
+			api.tags.create(`reopen-${nanoid(6)}`),
+			api.tags.create(`reopen-${nanoid(6)}`),
+		]);
+
+		await n8n.start.fromBlankCanvas();
+
+		await n8n.canvas.clickCreateTagButton();
+		for (const tag of tags) {
+			await n8n.canvas.getTagItemInDropdownByName(tag.name).click();
+		}
+		await expect(n8n.canvas.getTagPills()).toHaveCount(3);
+
+		await n8n.canvas.clickOutsideModal();
+
+		await expect(n8n.canvas.getWorkflowTagsDropdown()).not.toBeAttached();
+		await expect(n8n.canvas.getWorkflowSaveButton()).toContainText('Saved');
+
 		await n8n.canvas.clickWorkflowTagsArea();
 
-		await expect(n8n.canvas.getTagPills()).toHaveCount(4);
+		await expect(n8n.canvas.getWorkflowTagsDropdown()).toBeVisible();
+		await expect(n8n.canvas.getTagPills()).toHaveCount(3);
 	});
 
 	test('should not show non-existing tag as selectable option', async ({ n8n, api }) => {