✨ Add e2e tests to inspect tab (#7685)

frontend/playwright/data/get-teams-inspect.json

@@ -0,0 +1,27 @@
+[
+  {
+    "~:features": {
+      "~#set": [
+        "plugins/runtime",
+        "design-tokens/v1",
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": true,
+      "~:is-admin": true,
+      "~:can-edit": true
+    },
+    "~:name": "Default",
+    "~:modified-at": "~m1743598498553",
+    "~:id": "~u5116481d-f4e1-80c0-8005-f8e885bdc14d",
+    "~:created-at": "~m1743598498553",
+    "~:is-default": true
+  }
+]

frontend/playwright/ui/specs/inspect-tab.spec.js

@@ -0,0 +1,646 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../pages/WorkspacePage";
+
+const flags = ["enable-inspect-styles"];
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+});
+
+const setupFile = async (workspacePage) => {
+  await workspacePage.setupEmptyFile();
+  await workspacePage.mockConfigFlags(flags);
+  await workspacePage.mockRPC(
+    /get\-file\?/,
+    "workspace/get-file-inspect-tab.json",
+  );
+  await workspacePage.goToWorkspace({
+    fileId: "7b2da435-6186-815a-8007-0daa95d2f26d",
+    pageId: "ce79274b-11ab-8088-8007-0487ad43f789",
+  });
+};
+
+const shapeToLayerName = {
+  flex: "shape - layout - flex",
+  flexElement: "shape - layout - flex - element",
+  grid: "shape - layout - grid",
+  gridElement: "shape - layout - grid - element",
+  shadow: "shape - shadow - single",
+  shadowMultiple: "shape - shadow - multiple",
+  blur: "shape - blur",
+  borderRadius: {
+    main: "shape - borderRadius",
+    individual: "shape - borderRadius - individual",
+    multiple: "shape - borderRadius - multiple",
+    token: "shape - borderRadius - token",
+  },
+  fill: {
+    solid: "shape - fill - single - solid",
+    gradient: "shape - fill - single - gradient",
+    image: "shape - fill - single - image",
+    multiple: "shape - fill - multiple",
+    style: "shape - fill - style",
+    token: "shape - fill - token",
+  },
+  stroke: {
+    solid: "shape - stroke - single - solid",
+    gradient: "shape - stroke - single - gradient",
+    image: "shape - stroke - single - image",
+    multiple: "shape - stroke - multiple",
+    style: "shape - stroke - style",
+    token: "shape - stroke - token",
+  },
+  text: {
+    simple: "shape - text",
+    token: "shape - text - token - simple",
+    compositeToken: "shape - text - token - composite",
+  },
+};
+
+/**
+ * Copy the shorthand CSS from a full panel property
+ * @param {object} panel - The style panel locator
+ */
+const copyShorthand = async (panel) => {
+  const panelShorthandButton = panel.getByRole("button", {
+    name: "Copy CSS shorthand to clipboard",
+  });
+  await panelShorthandButton.click();
+};
+
+/**
+ * Copy the CSS property from a property row by clicking its copy button
+ * @param {object} panel - The style panel locator
+ * @param {string} property - The property name to filter by
+ */
+const copyPropertyFromPropertyRow = async (panel, property) => {
+  const propertyRow = panel
+    .getByTestId("property-row")
+    .filter({ hasText: property });
+  const copyButton = propertyRow.getByRole("button");
+  await copyButton.click();
+};
+
+/**
+ * Returns the style panel by its title
+ * @param {WorkspacePage} workspacePage - The workspace page instance
+ * @param {string} title - The title of the panel to retrieve
+ */
+const getPanelByTitle = async (workspacePage, title) => {
+  const sidebar = workspacePage.page.getByTestId("right-sidebar");
+  const article = sidebar.getByRole("article");
+  const panel = article.filter({ hasText: title });
+  return panel;
+};
+
+/**
+ * Selects a layer in the layers panel
+ * @param {WorkspacePage} workspacePage - The workspace page instance
+ * @param {string} layerName - The name of the layer to select
+ * @param {string} parentLayerName - The name of the parent layer to expand (optional)
+ */
+const selectLayer = async (workspacePage, layerName, parentLayerName) => {
+  await workspacePage.clickToggableLayer("Board");
+  if (parentLayerName) {
+    await workspacePage.clickToggableLayer(parentLayerName);
+  }
+  await workspacePage.clickLeafLayer(layerName);
+};
+
+/**
+ * Opens the Inspect tab
+ * @param {WorkspacePage} workspacePage - The workspace page instance
+ */
+
+const openInspectTab = async (workspacePage) => {
+  const inspectButton = workspacePage.page.getByRole("tab", {
+    name: "Inspect",
+  });
+  await inspectButton.click();
+};
+
+test.describe("Inspect tab - Styles", () => {
+  test("Open Inspect tab", async ({ page }) => {
+    const workspacePage = new WorkspacePage(page);
+    await setupFile(workspacePage);
+
+    await selectLayer(workspacePage, shapeToLayerName.flex);
+    await openInspectTab(workspacePage);
+
+    const switcherLabel = workspacePage.page.getByText("Layer info", {
+      exact: true,
+    });
+    await expect(switcherLabel).toBeVisible();
+    await expect(switcherLabel).toHaveText("Layer info");
+  });
+  test.describe("Inspect tab - Flex", () => {
+    test("Shape Layout Flex ", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.flex);
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Layout");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+    });
+
+    test("Shape Layout Flex Element", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(
+        workspacePage,
+        shapeToLayerName.flexElement,
+        shapeToLayerName.flex,
+      );
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Flex Element");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  test("Shape Layout Grid", async ({ page }) => {
+    const workspacePage = new WorkspacePage(page);
+    await setupFile(workspacePage);
+
+    await selectLayer(workspacePage, shapeToLayerName.grid);
+    await openInspectTab(workspacePage);
+
+    const panel = await getPanelByTitle(workspacePage, "Layout");
+    await expect(panel).toBeVisible();
+
+    const propertyRow = panel.getByTestId("property-row");
+    const propertyRowCount = await propertyRow.count();
+
+    expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+  });
+
+  test.describe("Inspect tab - Shadow", () => {
+    test("Shape Shadow - Single shadow", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.shadow);
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Shadow");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(2);
+    });
+
+    test("Shape Shadow - Multiple shadow", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.shadowMultiple);
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Shadow");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(4);
+    });
+  });
+
+  test("Shape - Blur", async ({ page }) => {
+    const workspacePage = new WorkspacePage(page);
+    await setupFile(workspacePage);
+
+    await selectLayer(workspacePage, shapeToLayerName.blur);
+    await openInspectTab(workspacePage);
+
+    const panel = await getPanelByTitle(workspacePage, "Blur");
+    await expect(panel).toBeVisible();
+
+    const propertyRow = panel.getByTestId("property-row");
+    const propertyRowCount = await propertyRow.count();
+
+    expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+  });
+
+  test.describe("Inspect tab - Border radius", () => {
+    test("Shape - Border radius - individual", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(
+        workspacePage,
+        shapeToLayerName.borderRadius.individual,
+        shapeToLayerName.borderRadius.main,
+      );
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(2);
+
+      const borderStartStartRadius = propertyRow.filter({
+        hasText: "Border start start radius",
+      });
+      await expect(borderStartStartRadius).toBeVisible();
+
+      const borderEndEndRadius = propertyRow.filter({
+        hasText: "Border end end radius",
+      });
+      await expect(borderEndEndRadius).toBeVisible();
+    });
+
+    test("Shape - Border radius - multiple", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(
+        workspacePage,
+        shapeToLayerName.borderRadius.multiple,
+        shapeToLayerName.borderRadius.main,
+      );
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(4);
+
+      const borderStartStartRadius = propertyRow.filter({
+        hasText: "Border start start radius",
+      });
+      await expect(borderStartStartRadius).toBeVisible();
+
+      const borderStartEndRadius = propertyRow.filter({
+        hasText: "Border start end radius",
+      });
+      await expect(borderStartEndRadius).toBeVisible();
+
+      const borderEndEndRadius = propertyRow.filter({
+        hasText: "Border end end radius",
+      });
+      await expect(borderEndEndRadius).toBeVisible();
+
+      const borderEndStartRadius = propertyRow.filter({
+        hasText: "Border end start radius",
+      });
+      await expect(borderEndStartRadius).toBeVisible();
+    });
+
+    test("Shape - Border radius - token", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(
+        workspacePage,
+        shapeToLayerName.borderRadius.token,
+        shapeToLayerName.borderRadius.main,
+      );
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Size & position");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(4);
+
+      const borderStartEndRadius = propertyRow.filter({
+        hasText: "Border start end radius",
+      });
+      await expect(borderStartEndRadius).toBeVisible();
+      expect(borderStartEndRadius).toContainText("radius");
+
+      const borderEndStartRadius = propertyRow.filter({
+        hasText: "Border end start radius",
+      });
+      expect(borderEndStartRadius).toContainText("radius");
+      await expect(borderEndStartRadius).toBeVisible();
+    });
+  });
+
+  test.describe("Inspect tab - Fill", () => {
+    test("Shape - Fill - Solid", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.fill.solid);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Fill");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+    });
+
+    test("Shape - Fill - Gradient", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.fill.gradient);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Fill");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+    });
+
+    test("Shape - Fill - Image", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.fill.image);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Fill");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+
+      const imagePreview = panel.getByRole("img", {
+        name: "Preview of the shape's fill",
+      });
+      await expect(imagePreview).toBeVisible();
+    });
+
+    test("Shape - Fill - Multiple", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.fill.multiple);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Fill");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(3);
+
+      const imagePreview = panel.getByRole("img", {
+        name: "Preview of the shape's fill",
+      });
+      await expect(imagePreview).toBeVisible();
+    });
+
+    test("Shape - Fill - Token", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.fill.token);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Fill");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+
+      const fillToken = propertyRow.filter({
+        hasText: "Background",
+      });
+      expect(fillToken).toContainText("primary");
+      await expect(fillToken).toBeVisible();
+    });
+  });
+
+  test.describe("Inspect tab - Stroke", () => {
+    test("Shape - Stroke - Solid", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.stroke.solid);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Stroke");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+    });
+
+    test("Shape - Stroke - Gradient", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.stroke.gradient);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Stroke");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+    });
+
+    test("Shape - Stroke - Image", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.stroke.image);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Stroke");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+
+      const imagePreview = panel.getByRole("img", {
+        name: "Preview of the shape's fill",
+      });
+      await expect(imagePreview).toBeVisible();
+    });
+
+    test("Shape - Stroke - Multiple", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.stroke.multiple);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Stroke");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(3);
+
+      const imagePreview = panel.getByRole("img", {
+        name: "Preview of the shape's fill",
+      });
+      await expect(imagePreview).toBeVisible();
+    });
+
+    test("Shape - Stroke - Token", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.stroke.token);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Stroke");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+
+      const fillToken = propertyRow.filter({
+        hasText: "Border color",
+      });
+      expect(fillToken).toContainText("primary");
+      await expect(fillToken).toBeVisible();
+    });
+  });
+
+  test.describe("Inspect tab - Typography", () => {
+    test("Text - simple", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.text.simple);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Text");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+
+      const textPreview = panel.getByRole("presentation");
+      await expect(textPreview).toBeVisible();
+    });
+
+    test("Text - token", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.text.token);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Text");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+
+      // Test with multiple tokens
+      const fontFamilyToken = propertyRow.filter({
+        hasText: "Font family",
+      });
+      await expect(fontFamilyToken).toBeVisible();
+      expect(fontFamilyToken).toContainText("font.sans");
+
+      const fontSizeToken = propertyRow.filter({
+        hasText: "Font size",
+      });
+      await expect(fontSizeToken).toBeVisible();
+      expect(fontSizeToken).toContainText("medium");
+
+      const fontWeightToken = propertyRow.filter({
+        hasText: "Font weight",
+      });
+      await expect(fontWeightToken).toBeVisible();
+      expect(fontWeightToken).toContainText("bold");
+
+      const textPreview = panel.getByRole("presentation");
+      await expect(textPreview).toBeVisible();
+    });
+    test("Text - composite token", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.text.compositeToken);
+      await openInspectTab(workspacePage);
+      const panel = await getPanelByTitle(workspacePage, "Text");
+      await expect(panel).toBeVisible();
+
+      const propertyRow = panel.getByTestId("property-row");
+      const propertyRowCount = await propertyRow.count();
+
+      expect(propertyRowCount).toBeGreaterThanOrEqual(1);
+
+      const compositeTypographyRow = propertyRow.filter({
+        hasText: "Typography",
+      });
+      await expect(compositeTypographyRow).toBeVisible();
+      expect(compositeTypographyRow).toContainText("body");
+
+      const textPreview = panel.getByRole("presentation");
+      await expect(textPreview).toBeVisible();
+    });
+  });
+
+  test.describe("Copy properties", () => {
+    test("Copy single property", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.flex);
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Layout");
+      await expect(panel).toBeVisible();
+
+      await copyPropertyFromPropertyRow(panel, "Display");
+
+      const shorthand = await page.evaluate(() =>
+        navigator.clipboard.readText(),
+      );
+      expect(shorthand).toBe("display: flex;");
+    });
+    test("Copy shorthand - multiple properties", async ({ page }) => {
+      const workspacePage = new WorkspacePage(page);
+      await setupFile(workspacePage);
+
+      await selectLayer(workspacePage, shapeToLayerName.shadow);
+      await openInspectTab(workspacePage);
+
+      const panel = await getPanelByTitle(workspacePage, "Shadow");
+      await expect(panel).toBeVisible();
+
+      await copyShorthand(panel);
+
+      const shorthand = await page.evaluate(() =>
+        navigator.clipboard.readText(),
+      );
+      expect(shorthand).toBe("box-shadow: 4px 4px 4px 0px #00000033;");
+    });
+  });
+});

frontend/src/app/main/ui/ds/layout/tab_switcher.cljs

@@ -176,7 +176,7 @@
         props
         (mf/spread-props props {:class [class (stl/css :tabs)]})]
 
-    [:> :article props
+    [:> :div props
      [:div {:class (stl/css :padding-wrapper)}
       [:> tab-nav* {:button-position action-button-position
                     :action-button action-button

frontend/src/app/main/ui/inspect/styles/panels/text.cljs

@@ -197,7 +197,8 @@
                           (reset! copied* true)
                           (wapi/write-to-clipboard formatted-text)
                           (tm/schedule 1000 #(reset! copied* false)))))]
-                 [:div {:class (stl/css :text-content-wrapper)}
+                 [:pre {:class (stl/css :text-content-wrapper)
+                        :role "presentation"}
                   [:> property-detail-copiable* {:copied copied
                                                  :on-click copy-text}
                    [:span {:class (stl/css :text-content)

frontend/src/app/main/ui/inspect/styles/rows/color_properties_row.cljs

@@ -89,7 +89,8 @@
            (wapi/write-to-clipboard copiable-value)
            (tm/schedule 1000 #(reset! copied* false))))]
     [:*
-     [:dl {:class [(stl/css :property-row) class]}
+     [:dl {:class [(stl/css :property-row) class]
+           :data-testid "property-row"}
       [:dt {:class (stl/css :property-term)} term]
       [:dd {:class (stl/css :property-detail)}
        (if token
@@ -111,12 +112,12 @@
                                         :copied copied
                                         :on-click copy-attr} formatted-color-value])]]
      (when (:image color)
-       [:div {:class (stl/css :color-image-preview)}
+       [:figure {:class (stl/css :color-image-preview)}
         [:div {:class (stl/css :color-image-preview-wrapper)}
          [:img {:class (stl/css :color-image)
                 :src color-image-url
                 :title color-image-name
-                :alt ""}]]
+                :alt (tr "inspect.attributes.image.preview")}]]
         [:> button* {:variant "secondary"
                      :to color-image-url
                      :target "_blank"

frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs

@@ -45,7 +45,8 @@
            (reset! copied* true)
            (wapi/write-to-clipboard copiable-value)
            (tm/schedule 1000 #(reset! copied* false))))]
-    [:dl {:class [(stl/css :property-row) class]}
+    [:dl {:class [(stl/css :property-row) class]
+          :data-testid "property-row"}
      [:dt {:class (stl/css :property-term)} term]
      [:dd {:class (stl/css :property-detail)}
       (if copiable?

frontend/translations/en.po

@@ -1696,6 +1696,10 @@ msgstr "RGBA"
 msgid "inspect.attributes.fill"
 msgstr "Fill"
 
+#: src/app/main/ui/inspect/attributes/fill.cljs:53
+msgid "inspect.attributes.image.preview"
+msgstr "Preview of the shape's fill image"
+
 #: src/app/main/ui/inspect/attributes/common.cljs:78, src/app/main/ui/inspect/styles/rows/color_properties_row.cljs:127
 msgid "inspect.attributes.image.download"
 msgstr "Download source image"

frontend/translations/es.po

@@ -1694,6 +1694,10 @@ msgstr "RGBA"
 msgid "inspect.attributes.fill"
 msgstr "Relleno"
 
+#: src/app/main/ui/inspect/attributes/fill.cljs:53
+msgid "inspect.attributes.image.preview"
+msgstr "Previsualización de la imagen de relleno"
+
 #: src/app/main/ui/inspect/attributes/common.cljs:78, src/app/main/ui/inspect/styles/rows/color_properties_row.cljs:127
 msgid "inspect.attributes.image.download"
 msgstr "Descargar imagen original"