Add Get BoundingBox keyword

Author: xylix

Browser/keywords/getters.py

@@ -14,7 +14,7 @@
 from ..base import LibraryComponent
 from ..generated.playwright_pb2 import Request
 from ..utils import logger
-from ..utils.data_types import AssertionOperator, SelectAttribute
+from ..utils.data_types import AssertionOperator, BoundingBoxFields, SelectAttribute
 
 
 class Getters(LibraryComponent):
@@ -360,3 +360,25 @@ def get_style(
                     assertion_expected,
                     f"Style value for {key} is ",
                 )
+
+    @keyword(tags=["Getter", "Assertion"])
+    def get_boundingbox(self, selector: str, *keys: BoundingBoxFields):
+        """ Gets elements size and location as an object {x: int, y: int, width: int, height: int}.
+
+            Optionally filters the returned values based on ``keys``.
+
+            Example use:
+            | unfiltered:       |                  |            |   |   |
+            | ${bounding_box}=  | Get BoundingBox  | \\#element |   |   |
+            | filtered:         |                  |            |   |   |
+            | ${xy}=            | Get BoundingBox  | \\#element | x | y |
+
+
+        """
+        with self.playwright.grpc_channel() as stub:
+            response = stub.GetBoundingBox(Request.ElementSelector(selector=selector))
+            parsed = json.loads(response.body)
+            logger.debug(parsed)
+            if keys:
+                parsed = {key.value: parsed[key.value] for key in keys}
+            return parsed

Browser/utils/data_types.py

@@ -49,6 +49,14 @@ class SupportedBrowsers(Enum):
 ViewportDimensions = TypedDict("ViewportDimensions", {"width": int, "height": int})
 
 
+class BoundingBoxFields(Enum):
+    width = "width"
+    height = "height"
+    x = "x"
+    y = "y"
+    ALL = "ALL"
+
+
 class AutoClosingLevel(Enum):
     SUITE = auto()
     TEST = auto()

atest/test/02_Content_Keywords/basic_getters.robot

@@ -66,3 +66,18 @@ Get Element Count and Assert
 Get Style and Assert
     Get Style    h1    ALL    *=    align-content
     Get Style    h1    align-content    ==    normal
+
+Get Element Size
+    ${expected}=    Evaluate    {'x': 8, 'y': 232.875, 'width': 37.90625, 'height': 30}
+    ${bounding_box}=    Get BoundingBox    \#progress_bar
+    Should Be Equal    ${bounding_box}    ${expected}
+
+Get Element x and y
+    ${expected}=    Evaluate    {'x': 8, 'y': 232.875}
+    ${xy}=    Get BoundingBox    \#progress_bar    x    y
+    Should Be Equal    ${xy}    ${expected}
+
+Get Element width and height
+    ${expected}=    Evaluate    {'width': 37.90625, 'height': 30}
+    ${wh}=    Get BoundingBox    \#progress_bar    width    height
+    Should Be Equal    ${wh}    ${expected}

docs/Browser.html

@@ -4,13 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { PlaywrightState } from './playwright-state';
 import { Request, Response } from './generated/playwright_pb';
-import {
-    determineElement,
-    exists,
-    invokeOnPage,
-    invokePlaywrightMethod,
-    waitUntilElementExists,
-} from './playwirght-invoke';
+import { determineElement, invokeOnPage, invokePlaywrightMethod, waitUntilElementExists } from './playwirght-invoke';
 import { emptyWithLog, jsResponse, stringResponse } from './response-util';
 
 declare global {
@@ -105,6 +99,7 @@ export async function waitForFunction(
         script = eval(script);
     }
 
+    // TODO: This might behave weirdly if element selector points to a different page
     const result = await invokeOnPage(state.getActivePage(), callback, 'waitForFunction', script, elem, options);
     callback(null, stringResponse(JSON.stringify(result.jsonValue)));
 }

node/playwright-wrapper/evaluation.ts

@@ -4,7 +4,7 @@ import { ServerUnaryCall, sendUnaryData } from 'grpc';
 import { PlaywrightState } from './playwright-state';
 import { Request, Response, Types } from './generated/playwright_pb';
 import { boolResponse, intResponse, stringResponse } from './response-util';
-import { invokeOnPage, invokePlaywrightMethod, waitUntilElementExists } from './playwirght-invoke';
+import { determineElement, invokeOnPage, invokePlaywrightMethod, waitUntilElementExists } from './playwirght-invoke';
 
 export async function getTitle(callback: sendUnaryData<Response.String>, page?: Page) {
     const title = await invokeOnPage(page, callback, 'title');
@@ -122,3 +122,18 @@ export async function getViewportSize(
     const result = await invokeOnPage(page, callback, 'viewportSize');
     callback(null, stringResponse(JSON.stringify(result)));
 }
+
+export async function getBoundingBox(
+    call: ServerUnaryCall<Request.ElementSelector>,
+    callback: sendUnaryData<Response.String>,
+    state: PlaywrightState,
+): Promise<void> {
+    const selector = call.request.getSelector();
+    const elem = await determineElement(state, selector, callback);
+    if (!elem) {
+        callback(new Error(`No element matching ${elem} found`), null);
+        return;
+    }
+    const boundingBox = await elem.boundingBox();
+    callback(null, stringResponse(JSON.stringify(boundingBox)));
+}

node/playwright-wrapper/getters.ts

@@ -114,6 +114,13 @@ export class PlaywrightServer implements IPlaywrightServer {
         return browserControl.takeScreenshot(call, callback, this.getActivePage());
     }
 
+    async getBoundingBox(
+        call: ServerUnaryCall<Request.ElementSelector>,
+        callback: sendUnaryData<Response.String>,
+    ): Promise<void> {
+        return getters.getBoundingBox(call, callback, this.state);
+    }
+
     async setTimeout(call: ServerUnaryCall<Request.Timeout>, callback: sendUnaryData<Response.Empty>): Promise<void> {
         return browserControl.setTimeout(call, callback, this.getActiveBrowser(callback)?.context?.c);
     }

node/playwright-wrapper/grpc-service.ts

@@ -242,9 +242,10 @@ service  Playwright {
   rpc SetViewportSize(Request.Viewport) returns (Response.Empty);
   /* Gets an elements computed style */
   rpc GetStyle(Request.ElementSelector) returns (Response.String);
+  /* Gets elements x, y coordinates and width, height as json object */ 
+  rpc GetBoundingBox(Request.ElementSelector) returns (Response.String);
   /* Makes a `fetch` request in the browser */
   rpc HttpRequest(Request.HttpRequest) returns (Response.String);
-  
   rpc WaitForRequest(Request.HttpCapture) returns (Response.String);
   rpc WaitForResponse(Request.HttpCapture) returns (Response.String);
   rpc WaitForDownload(Request.FilePath) returns (Response.String);