Topic/#3614 highlight border offset (#3826)

fixes #3614
MarketSquare · Oct 7, 2024 · 94c9785 · 94c9785
1 parent 15fa929
commit 94c9785
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/Browser/requirements.txt b/Browser/requirements.txt
@@ -1,6 +1,6 @@
 grpcio == 1.66.2
 grpcio-tools == 1.66.2
-protobuf == 5.28.2
+protobuf == 5.27.2
 robotframework >= 5.0.1, < 8.0.0
 robotframework-pythonlibcore >= 4.4.1, < 5.0.0
 robotframework-assertion-engine >= 3.0.3, < 4.0.0

diff --git a/atest/test/05_JS_Tests/on_page_js.robot b/atest/test/05_JS_Tests/on_page_js.robot
@@ -156,13 +156,28 @@ Highlight Element With Strict
 
 Highlight Element With Style
     [Tags]    slow
+    Set Retry Assertions For    200ms    scope=Test
+    ${bbox} =    Get Bounding Box    input#login_button
     Highlight Elements    input#login_button    duration=500ms
+    ${bbox_highlight} =    Run Keyword And Continue On Failure
+    ...    Get Bounding Box
+    ...    .robotframework-browser-highlight
+    ...    ALL
+    ...    validate
+    ...    value.x + 2 == $bbox.x and value.y + 2 == $bbox.y and value.width - 4 == $bbox.width and value.height - 4 == $bbox.height
     Get Style    .robotframework-browser-highlight    border-bottom-width    ==    2px
     Get Style    .robotframework-browser-highlight    border-bottom-style    ==    dotted
     Get Style    .robotframework-browser-highlight    border-bottom-color    ==    rgb(0, 0, 255)
     Sleep    600ms
     Highlight Elements    input#login_button    duration=500ms    width=4px    style=solid    color=\#FF00FF
+    Add Style Tag    * {box-sizing: border-box;}
     ${style} =    Get Style    .robotframework-browser-highlight
+    ${bbox_highlight} =    Run Keyword And Continue On Failure
+    ...    Get Bounding Box
+    ...    .robotframework-browser-highlight
+    ...    ALL
+    ...    validate
+    ...    value.x + 4 == $bbox.x and value.y + 4 == $bbox.y and value.width - 8 == $bbox.width and value.height - 8 == $bbox.height
     Should Be True    "${style}[border-bottom-width]" == "4px"
     Should Be True    "${style}[border-bottom-style]" == "solid"
     Should Be True    "${style}[border-bottom-color]" == "rgb(255, 0, 255)"

diff --git a/node/playwright-wrapper/evaluation.ts b/node/playwright-wrapper/evaluation.ts
@@ -471,11 +471,12 @@ async function highlightAll(
                 d.style.position = 'fixed';
                 const rect = e.getBoundingClientRect();
                 d.style.zIndex = '2147483647';
-                d.style.top = `${rect.top}px`;
-                d.style.left = `${rect.left}px`;
+                d.style.top = `calc(${rect.top}px - ${options?.wdt ?? '1px'})`;
+                d.style.left = `calc(${rect.left}px - ${options?.wdt ?? '1px'})`;
                 d.style.width = `${rect.width}px`;
                 d.style.height = `${rect.height}px`;
                 d.style.border = `${options?.wdt ?? '1px'} ${options?.stl ?? `dotted`} ${options?.clr ?? `blue`}`;
+                d.style.boxSizing = 'content-box';
                 document.body.appendChild(d);
                 setTimeout(() => {
                     d.remove();