From 70a29c43ec42831e5d2cd9394aa1e32d5e0929fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= <belen.albeza@kaleidos.net>
Date: Thu, 19 Jun 2025 08:57:38 +0200
Subject: [PATCH] :wrench: Fix race condition in colorpicket gradient tests
 (#6722)

---
 .../playwright/ui/specs/colorpicker.spec.js   | 44 ++++++++++++-------
 .../sidebar/options/rows/color_row.cljs       |  1 +
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/frontend/playwright/ui/specs/colorpicker.spec.js b/frontend/playwright/ui/specs/colorpicker.spec.js
index e847e659bf..012bb52379 100644
--- a/frontend/playwright/ui/specs/colorpicker.spec.js
+++ b/frontend/playwright/ui/specs/colorpicker.spec.js
@@ -61,24 +61,28 @@ test("Create a LINEAR gradient", async ({ page }) => {
 
   const removeBtn = workspacePage.colorpicker
     .getByRole("button", { name: "Remove color" })
-    .nth(2);
+    .last();
   await removeBtn.click();
   await removeBtn.click();
 
   const inputColor1 = workspacePage.colorpicker
-    .getByPlaceholder("Mixed")
-    .nth(1);
-  await inputColor1.fill("fabada");
+    .getByRole("textbox", { name: "Color" })
+    .first();
+  await inputColor1.fill("#fabada");
 
-  const inputOpacity1 = workspacePage.colorpicker.getByPlaceholder("--").nth(1);
+  const inputOpacity1 = workspacePage.colorpicker
+    .getByTestId("opacity-input")
+    .first();
   await inputOpacity1.fill("100");
 
   const inputColor2 = workspacePage.colorpicker
-    .getByPlaceholder("Mixed")
-    .nth(2);
-  await inputColor2.fill("red");
+    .getByRole("textbox", { name: "Color" })
+    .last();
+  await inputColor2.fill("#ff0000");
 
-  const inputOpacity2 = workspacePage.colorpicker.getByPlaceholder("--").nth(2);
+  const inputOpacity2 = workspacePage.colorpicker
+    .getByTestId("opacity-input")
+    .last();
   await inputOpacity2.fill("40");
 
   const inputOpacityGlobal = workspacePage.colorpicker.getByTestId(
@@ -139,20 +143,28 @@ test("Create a RADIAL gradient", async ({ page }) => {
 
   const removeBtn = workspacePage.colorpicker
     .getByRole("button", { name: "Remove color" })
-    .nth(2);
+    .last();
   await removeBtn.click();
   await removeBtn.click();
 
-  const inputColor1 = workspacePage.page.getByPlaceholder("Mixed").nth(1);
-  await inputColor1.fill("fabada");
+  const inputColor1 = workspacePage.page
+    .getByRole("textbox", { name: "Color" })
+    .first();
+  await inputColor1.fill("#fabada");
 
-  const inputOpacity1 = workspacePage.colorpicker.getByPlaceholder("--").nth(1);
+  const inputOpacity1 = workspacePage.colorpicker
+    .getByTestId("opacity-input")
+    .first();
   await inputOpacity1.fill("100");
 
-  const inputColor2 = workspacePage.page.getByPlaceholder("Mixed").nth(2);
-  await inputColor2.fill("red");
+  const inputColor2 = workspacePage.page
+    .getByRole("textbox", { name: "Color" })
+    .last();
+  await inputColor2.fill("#ff0000");
 
-  const inputOpacity2 = workspacePage.colorpicker.getByPlaceholder("--").nth(2);
+  const inputOpacity2 = workspacePage.colorpicker
+    .getByTestId("opacity-input")
+    .last();
   await inputOpacity2.fill("100");
 
   const inputOpacityGlobal = workspacePage.colorpicker.getByTestId(
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index 6944ae7c75..3f0891c8a3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -268,6 +268,7 @@
                              :on-focus on-focus
                              :on-blur on-blur
                              :on-change handle-opacity-change
+                             :data-testid "opacity-input"
                              :default 100
                              :min 0
                              :max 100}]])]