From d512f5c8de6ba8e1a930c0a49cfbfe8bc6c7a51e Mon Sep 17 00:00:00 2001
From: Nikhil Kuriakose <nikhilkuria@gmail.com>
Date: Fri, 31 Jul 2026 14:59:21 +0530
Subject: [PATCH] fix(editor): Wait for animated zoom-in transition to settle
 (#35244)

---
 .../playwright/composables/CanvasComposer.ts  | 53 ++++++++++---------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/packages/testing/playwright/composables/CanvasComposer.ts b/packages/testing/playwright/composables/CanvasComposer.ts
index 4dbe950e92e..79a047bf629 100644
--- a/packages/testing/playwright/composables/CanvasComposer.ts
+++ b/packages/testing/playwright/composables/CanvasComposer.ts
@@ -76,35 +76,40 @@ export class CanvasComposer {
 	async zoomInAndCheckNodes(): Promise<void> {
 		await this.n8n.canvas.getCanvasNodes().first().waitFor();
 
-		const initialNodeSize = await this.n8n.page.evaluate(() => {
-			const firstNode = document.querySelector('[data-test-id="canvas-node"]');
-			if (!firstNode) {
-				throw new Error('Canvas node not found during initial measurement');
-			}
-			return firstNode.getBoundingClientRect().width;
-		});
+		const measureFirstNodeWidth = async () =>
+			await this.n8n.page.evaluate(() => {
+				const firstNode = document.querySelector('[data-test-id="canvas-node"]');
+				if (!firstNode) {
+					throw new Error('Canvas node not found during measurement');
+				}
+				return firstNode.getBoundingClientRect().width;
+			});
+
+		// Wait for the animated fit-to-view to settle before capturing the baseline.
+		let previousWidth = Number.NaN;
+		await expect
+			.poll(async () => {
+				const width = await measureFirstNodeWidth();
+				const settled = width === previousWidth;
+				previousWidth = width;
+				return settled;
+			})
+			.toBe(true);
+
+		const initialNodeSize = await measureFirstNodeWidth();
 
 		for (let i = 0; i < 4; i++) {
 			await this.n8n.canvas.clickZoomInButton();
 		}
 
-		const finalNodeSize = await this.n8n.page.evaluate(() => {
-			const firstNode = document.querySelector('[data-test-id="canvas-node"]');
-			if (!firstNode) {
-				throw new Error('Canvas node not found during final measurement');
-			}
-			return firstNode.getBoundingClientRect().width;
-		});
-
-		// Validate zoom increased node sizes by at least 50%
-		const zoomWorking = finalNodeSize > initialNodeSize * 1.5;
-
-		if (!zoomWorking) {
-			throw new Error(
-				"Zoom functionality not working: nodes didn't scale properly. " +
-					`Initial: ${initialNodeSize.toFixed(1)}px, Final: ${finalNodeSize.toFixed(1)}px`,
-			);
-		}
+		// Poll the width until the animated zoom transition settles.
+		await expect
+			.poll(measureFirstNodeWidth, {
+				message:
+					"Zoom functionality not working: nodes didn't scale properly. " +
+					`Initial: ${initialNodeSize.toFixed(1)}px`,
+			})
+			.toBeGreaterThan(initialNodeSize * 1.5);
 	}
 
 	/**