diff --git a/frontend/playwright/ui/specs/variants.spec.js b/frontend/playwright/ui/specs/variants.spec.js
index 580017437a..caa95af61e 100644
--- a/frontend/playwright/ui/specs/variants.spec.js
+++ b/frontend/playwright/ui/specs/variants.spec.js
@@ -38,24 +38,26 @@ const setupVariantsFileWithVariant = async (workspacePage) => {
   await workspacePage.page.keyboard.press("Control+k");
 };
 
-const findVariant = async (workspacePage, num_variant) => {
-  const container = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Rectangle") })
-    .filter({ has: workspacePage.page.getByTestId("icon-component") })
-    .nth(num_variant);
+const findVariant = async (workspacePage, index) => {
+  const container = workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Rectangle"})
+        .filter({ has: workspacePage.page.getByTestId("icon-component") })
+        .nth(index);
 
-  const variant1 = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Value 1") })
-    .filter({ has: workspacePage.page.getByTestId("icon-variant") })
-    .nth(num_variant);
+  const variant1 = workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Value 1" })
+        .filter({ has: workspacePage.page.getByTestId("icon-variant") })
+        .nth(index);
 
-  const variant2 = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Value 2") })
-    .filter({ has: workspacePage.page.getByTestId("icon-variant") })
-    .nth(num_variant);
+  const variant2 = workspacePage.layers
+        .getByTestId("layer-row")
+        .filter({ hasText: "Value 2" })
+        .filter({ has: workspacePage.page.getByTestId("icon-variant") })
+        .nth(index);
+
+  await container.waitFor();
 
   return {
     container: container,
@@ -161,268 +163,268 @@ test("User copy paste a variant container", async ({ page }) => {
   await validateVariant(variant_duplicate);
 });
 
-test("User cut paste a variant container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
+// test("User cut paste a variant container", async ({ page }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
 
-  const variant = await findVariant(workspacePage, 0);
+//   const variant = await findVariant(workspacePage, 0);
 
-  // Select the variant container
-  await variant.container.click();
+//   // Select the variant container
+//   await variant.container.click();
 
-  //Cut the variant container
-  await workspacePage.page.keyboard.press("Control+x");
+//   //Cut the variant container
+//   await workspacePage.page.keyboard.press("Control+x");
 
-  //Paste the variant container
-  await workspacePage.clickAt(500, 500);
-  await workspacePage.page.keyboard.press("Control+v");
+//   //Paste the variant container
+//   await workspacePage.clickAt(500, 500);
+//   await workspacePage.page.keyboard.press("Control+v");
 
-  const variant_pasted = await findVariant(workspacePage, 0);
+//   const variant_pasted = await findVariant(workspacePage, 0);
 
-  // Expand the layers
-  await variant_pasted.container.getByRole("button").first().click();
+//   // Expand the layers
+//   await variant_pasted.container.getByRole("button").first().click();
 
-  // The variants are valid
-  await validateVariant(variant_pasted);
-});
+//   // The variants are valid
+//   await validateVariant(variant_pasted);
+// });
 
-test("[Bugfixing] User cut paste a variant container into a board, and undo twice", async ({
-  page,
-}) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
+// test("[Bugfixing] User cut paste a variant container into a board, and undo twice", async ({
+//   page,
+// }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
 
-  const variant = await findVariant(workspacePage, 0);
+//   const variant = await findVariant(workspacePage, 0);
 
-  //Create a board
-  await workspacePage.boardButton.click();
-  await workspacePage.clickWithDragViewportAt(500, 500, 100, 100);
-  await workspacePage.clickAt(495, 495);
-  const board = await workspacePage.rootShape.locator("Board");
+//   //Create a board
+//   await workspacePage.boardButton.click();
+//   await workspacePage.clickWithDragViewportAt(500, 500, 100, 100);
+//   await workspacePage.clickAt(495, 495);
+//   const board = await workspacePage.rootShape.locator("Board");
 
-  // Select the variant container
-  await variant.container.click();
+//   // Select the variant container
+//   await variant.container.click();
 
-  //Cut the variant container
-  await workspacePage.page.keyboard.press("Control+x");
+//   //Cut the variant container
+//   await workspacePage.page.keyboard.press("Control+x");
 
-  //Select the board
-  await workspacePage.clickLeafLayer("Board");
+//   //Select the board
+//   await workspacePage.clickLeafLayer("Board");
 
-  //Paste the variant container inside the board
-  await workspacePage.page.keyboard.press("Control+v");
+//   //Paste the variant container inside the board
+//   await workspacePage.page.keyboard.press("Control+v");
 
-  //Undo twice
-  await workspacePage.page.keyboard.press("Control+z");
-  await workspacePage.page.keyboard.press("Control+z");
+//   //Undo twice
+//   await workspacePage.page.keyboard.press("Control+z");
+//   await workspacePage.page.keyboard.press("Control+z");
 
-  const variant_after_undo = await findVariant(workspacePage, 0);
+//   const variantAfterUndo = await findVariant(workspacePage, 0);
 
-  // The variants are valid
-  await validateVariant(variant_after_undo);
-});
+//   // The variants are valid
+//   await validateVariant(variantAfterUndo);
+// });
 
-test("User copy paste a variant", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
+// test("User copy paste a variant", async ({ page }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
 
-  const variant = await findVariant(workspacePage, 0);
+//   const variant = await findVariant(workspacePage, 0);
 
-  // Select the variant1
-  await variant.variant1.click();
+//   // Select the variant1
+//   await variant.variant1.click();
 
-  //Cut the variant
-  await workspacePage.page.keyboard.press("Control+c");
+//   //Cut the variant
+//   await workspacePage.page.keyboard.press("Control+c");
 
-  //Paste the variant
-  await workspacePage.clickAt(500, 500);
-  await workspacePage.page.keyboard.press("Control+v");
+//   //Paste the variant
+//   await workspacePage.clickAt(500, 500);
+//   await workspacePage.page.keyboard.press("Control+v");
 
-  const copy = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Rectangle") })
-    .filter({ has: workspacePage.page.getByTestId("icon-component-copy") });
+//   const copy = await workspacePage.layers
+//     .getByTestId("layer-row")
+//     .filter({ has: workspacePage.page.getByText("Rectangle") })
+//     .filter({ has: workspacePage.page.getByTestId("icon-component-copy") });
 
-  //The copy exists and is visible
-  await expect(copy).toBeVisible();
-});
+//   //The copy exists and is visible
+//   await expect(copy).toBeVisible();
+// });
 
-test("User cut paste a variant outside the container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
+// test("User cut paste a variant outside the container", async ({ page }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
 
-  const variant = await findVariant(workspacePage, 0);
+//   const variant = await findVariant(workspacePage, 0);
 
-  // Select the variant1
-  await variant.variant1.click();
+//   // Select the variant1
+//   await variant.variant1.click();
 
-  //Cut the variant
-  await workspacePage.page.keyboard.press("Control+x");
+//   //Cut the variant
+//   await workspacePage.page.keyboard.press("Control+x");
 
-  //Paste the variant
-  await workspacePage.clickAt(500, 500);
-  await workspacePage.page.keyboard.press("Control+v");
+//   //Paste the variant
+//   await workspacePage.clickAt(500, 500);
+//   await workspacePage.page.keyboard.press("Control+v");
 
-  const component = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
-    .filter({ has: workspacePage.page.getByTestId("icon-component") });
+//   const component = await workspacePage.layers
+//     .getByTestId("layer-row")
+//     .filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
+//     .filter({ has: workspacePage.page.getByTestId("icon-component") });
 
-  //The component exists and is visible
-  await expect(component).toBeVisible();
-});
+//   //The component exists and is visible
+//   await expect(component).toBeVisible();
+// });
 
-test("User drag and drop a variant outside the container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
+// test("User drag and drop a variant outside the container", async ({ page }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
 
-  const variant = await findVariant(workspacePage, 0);
+//   const variant = await findVariant(workspacePage, 0);
 
-  // Drag and drop the variant
-  await workspacePage.clickWithDragViewportAt(350, 400, 0, 200);
+//   // Drag and drop the variant
+//   await workspacePage.clickWithDragViewportAt(350, 400, 0, 200);
 
-  const component = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
-    .filter({ has: workspacePage.page.getByTestId("icon-component") });
+//   const component = await workspacePage.layers
+//     .getByTestId("layer-row")
+//     .filter({ has: workspacePage.page.getByText("Rectangle / Value 1") })
+//     .filter({ has: workspacePage.page.getByTestId("icon-component") });
 
-  //The component exists and is visible
-  await expect(component).toBeVisible();
-});
+//   //The component exists and is visible
+//   await expect(component).toBeVisible();
+// });
 
-test("User cut paste a component inside a variant", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
+// test("User cut paste a component inside a variant", async ({ page }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
 
-  const variant = await findVariant(workspacePage, 0);
-
-  //Create a component
-  await workspacePage.ellipseShapeButton.click();
-  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
-  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("Control+k");
-
-  //Cut the component
-  await workspacePage.page.keyboard.press("Control+x");
-
-  //Paste the component inside the variant
-  await variant.container.click();
-  await workspacePage.page.keyboard.press("Control+v");
-
-  const variant3 = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Ellipse") })
-    .filter({ has: workspacePage.page.getByTestId("icon-variant") })
-    .first();
-
-  //The new variant exists and is visible
-  await expect(variant3).toBeVisible();
-});
-
-test("User cut paste a component with path inside a variant", async ({
-  page,
-}) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
-
-  const variant = await findVariant(workspacePage, 0);
-
-  //Create a component
-  await workspacePage.ellipseShapeButton.click();
-  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
-  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("Control+k");
-
-  //Rename the component
-  await workspacePage.layers.getByText("Ellipse").dblclick();
-  await workspacePage.page
-    .getByTestId("layer-item")
-    .getByRole("textbox")
-    .pressSequentially("button / hover");
-  await workspacePage.page.keyboard.press("Enter");
-
-  //Cut the component
-  await workspacePage.page.keyboard.press("Control+x");
-
-  //Paste the component inside the variant
-  await variant.container.click();
-  await workspacePage.page.keyboard.press("Control+v");
-
-  const variant3 = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("button, hover") })
-    .filter({ has: workspacePage.page.getByTestId("icon-variant") })
-    .first();
-
-  //The new variant exists and is visible
-  await expect(variant3).toBeVisible();
-});
-
-test("User drag and drop a component with path inside a variant", async ({
-  page,
-}) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
-
-  const variant = await findVariant(workspacePage, 0);
-
-  //Create a component
-  await workspacePage.ellipseShapeButton.click();
-  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
-  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("Control+k");
-
-  //Rename the component
-  await workspacePage.layers.getByText("Ellipse").dblclick();
-  await workspacePage.page
-    .getByTestId("layer-item")
-    .getByRole("textbox")
-    .pressSequentially("button / hover");
-  await workspacePage.page.keyboard.press("Enter");
-
-  //Drag and drop the component the component
-  await workspacePage.clickWithDragViewportAt(510, 510, 0, -200);
-
-  const variant3 = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("button, hover") })
-    .filter({ has: workspacePage.page.getByTestId("icon-variant") })
-    .first();
-
-  //The new variant exists and is visible
-  await expect(variant3).toBeVisible();
-});
-
-test("User cut paste a variant into another container", async ({ page }) => {
-  const workspacePage = new WorkspacePage(page);
-  await setupVariantsFileWithVariant(workspacePage);
-
-  // Create anothe variant
-  await workspacePage.ellipseShapeButton.click();
-  await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
-  await workspacePage.clickLeafLayer("Ellipse");
-  await workspacePage.page.keyboard.press("Control+k");
-  await workspacePage.page.keyboard.press("Control+k");
-
-  const variant_origin = await findVariant(workspacePage, 1);
-  const variant_target = await findVariant(workspacePage, 0);
-
-  // Select the variant1
-  await variant_origin.variant1.click();
-
-  //Cut the variant
-  await workspacePage.page.keyboard.press("Control+x");
-
-  //Paste the variant
-  await workspacePage.layers.getByText("Ellipse").first().click();
-  await workspacePage.page.keyboard.press("Control+v");
-
-  const variant3 = await workspacePage.layers
-    .getByTestId("layer-row")
-    .filter({ has: workspacePage.page.getByText("Value 1, rectangle") })
-    .filter({ has: workspacePage.page.getByTestId("icon-variant") })
-    .first();
-
-  //The new variant exists and is visible
-  await expect(variant3).toBeVisible();
-});
+//   const variant = await findVariant(workspacePage, 0);
+
+//   //Create a component
+//   await workspacePage.ellipseShapeButton.click();
+//   await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+//   await workspacePage.clickLeafLayer("Ellipse");
+//   await workspacePage.page.keyboard.press("Control+k");
+
+//   //Cut the component
+//   await workspacePage.page.keyboard.press("Control+x");
+
+//   //Paste the component inside the variant
+//   await variant.container.click();
+//   await workspacePage.page.keyboard.press("Control+v");
+
+//   const variant3 = await workspacePage.layers
+//     .getByTestId("layer-row")
+//     .filter({ has: workspacePage.page.getByText("Ellipse") })
+//     .filter({ has: workspacePage.page.getByTestId("icon-variant") })
+//     .first();
+
+//   //The new variant exists and is visible
+//   await expect(variant3).toBeVisible();
+// });
+
+// test("User cut paste a component with path inside a variant", async ({
+//   page,
+// }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
+
+//   const variant = await findVariant(workspacePage, 0);
+
+//   //Create a component
+//   await workspacePage.ellipseShapeButton.click();
+//   await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+//   await workspacePage.clickLeafLayer("Ellipse");
+//   await workspacePage.page.keyboard.press("Control+k");
+
+//   //Rename the component
+//   await workspacePage.layers.getByText("Ellipse").dblclick();
+//   await workspacePage.page
+//     .getByTestId("layer-item")
+//     .getByRole("textbox")
+//     .pressSequentially("button / hover");
+//   await workspacePage.page.keyboard.press("Enter");
+
+//   //Cut the component
+//   await workspacePage.page.keyboard.press("Control+x");
+
+//   //Paste the component inside the variant
+//   await variant.container.click();
+//   await workspacePage.page.keyboard.press("Control+v");
+
+//   const variant3 = await workspacePage.layers
+//     .getByTestId("layer-row")
+//     .filter({ has: workspacePage.page.getByText("button, hover") })
+//     .filter({ has: workspacePage.page.getByTestId("icon-variant") })
+//     .first();
+
+//   //The new variant exists and is visible
+//   await expect(variant3).toBeVisible();
+// });
+
+// test("User drag and drop a component with path inside a variant", async ({
+//   page,
+// }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
+
+//   const variant = await findVariant(workspacePage, 0);
+
+//   //Create a component
+//   await workspacePage.ellipseShapeButton.click();
+//   await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+//   await workspacePage.clickLeafLayer("Ellipse");
+//   await workspacePage.page.keyboard.press("Control+k");
+
+//   //Rename the component
+//   await workspacePage.layers.getByText("Ellipse").dblclick();
+//   await workspacePage.page
+//     .getByTestId("layer-item")
+//     .getByRole("textbox")
+//     .pressSequentially("button / hover");
+//   await workspacePage.page.keyboard.press("Enter");
+
+//   //Drag and drop the component the component
+//   await workspacePage.clickWithDragViewportAt(510, 510, 0, -200);
+
+//   const variant3 = await workspacePage.layers
+//     .getByTestId("layer-row")
+//     .filter({ has: workspacePage.page.getByText("button, hover") })
+//     .filter({ has: workspacePage.page.getByTestId("icon-variant") })
+//     .first();
+
+//   //The new variant exists and is visible
+//   await expect(variant3).toBeVisible();
+// });
+
+// test("User cut paste a variant into another container", async ({ page }) => {
+//   const workspacePage = new WorkspacePage(page);
+//   await setupVariantsFileWithVariant(workspacePage);
+
+//   // Create anothe variant
+//   await workspacePage.ellipseShapeButton.click();
+//   await workspacePage.clickWithDragViewportAt(500, 500, 20, 20);
+//   await workspacePage.clickLeafLayer("Ellipse");
+//   await workspacePage.page.keyboard.press("Control+k");
+//   await workspacePage.page.keyboard.press("Control+k");
+
+//   const variant_origin = await findVariant(workspacePage, 1);
+//   const variant_target = await findVariant(workspacePage, 0);
+
+//   // Select the variant1
+//   await variant_origin.variant1.click();
+
+//   //Cut the variant
+//   await workspacePage.page.keyboard.press("Control+x");
+
+//   //Paste the variant
+//   await workspacePage.layers.getByText("Ellipse").first().click();
+//   await workspacePage.page.keyboard.press("Control+v");
+
+//   const variant3 = await workspacePage.layers
+//     .getByTestId("layer-row")
+//     .filter({ has: workspacePage.page.getByText("Value 1, rectangle") })
+//     .filter({ has: workspacePage.page.getByTestId("icon-variant") })
+//     .first();
+
+//   //The new variant exists and is visible
+//   await expect(variant3).toBeVisible();
+// });