implemented Playwrights Highlighting

Browser/keywords/evaluation.py

@@ -20,7 +20,7 @@
 
 from ..base import LibraryComponent
 from ..generated.playwright_pb2 import Request
-from ..utils import DownloadInfo, keyword, logger
+from ..utils import DownloadInfo, HighlightMode, keyword, logger
 
 
 class Evaluation(LibraryComponent):
@@ -86,6 +86,8 @@ def highlight_elements(
         width: str = "2px",
         style: str = "dotted",
         color: str = "blue",
+        *,
+        mode: HighlightMode = HighlightMode.border,
     ):
         """Adds a highlight to elements matched by the ``selector``. Provides a style adjustment.
 
@@ -95,10 +97,11 @@ def highlight_elements(
 
         | =Arguments= | =Description= |
         | ``selector`` | Selectors which shall be highlighted. See the `Finding elements` section for details about the selectors. |
-        | ``duration`` | Sets for how long the selector shall be highlighted. Defaults to ``5s`` => 5 seconds. |
+        | ``duration`` | Sets for how long the selector shall be highlighted. Defaults to ``5s`` => 5 seconds. If set to 0 seconds, the highlighting is not deleted. |
         | ``width`` | Sets the width of the higlight border. Defaults to 2px. |
         | ``style`` | Sets the style of the border. Defaults to dotted. |
         | ``color`` | Sets the color of the border. Valid colors i.e. are: ``red``, ``blue``, ``yellow``, ``pink``, ``black`` |
+        | ``mode`` | Sets the mode of the highlight. Valid modes are: ``border`` (classic mode), ``playwright`` (Playwrights native). If ``playwright`` is used, ``width``, ``style`` and ``color`` is ignored and only one highlighting can happen at the same time. |
 
         Keyword does not fail if selector resolves to multiple elements.
 
@@ -118,6 +121,7 @@ def highlight_elements(
                     style=style,
                     color=color,
                     strict=False,
+                    mode=mode.name,
                 )
             )
         count: int = response.body

Browser/utils/__init__.py

@@ -29,6 +29,7 @@
     FormatterTypes,
     GeoLocation,
     HighLightElement,
+    HighlightMode,
     HttpCredentials,
     LambdaFunction,
     NewPageDetails,

Browser/utils/data_types.py

@@ -589,6 +589,19 @@ class HighLightElement(TypedDict):
     color: str
 
 
+class HighlightMode(Enum):
+    """Highlight mode for the element.
+
+    ``border``: Highlights the element with a border outside of the selected element.
+    This is the classic way to highlight an element of Browser librarary.
+
+    ``playwright``: Highlights the element with Playwrights built in function.
+    """
+
+    border = auto()
+    playwright = auto()
+
+
 class LambdaFunction:
     @classmethod
     def from_string(cls, string: str) -> "LambdaFunction":

node/playwright-wrapper/evaluation.ts

@@ -433,7 +433,17 @@ export async function highlightElements(
     const style = request.getStyle();
     const color = request.getColor();
     const strictMode = request.getStrict();
-    const count = await highlightAll(selector, duration, width, style, color, strictMode, state);
+    const mode = request.getMode();
+    const count = await highlightAll(
+        selector,
+        duration,
+        width,
+        style,
+        color,
+        strictMode,
+        state,
+        mode as 'border' | 'playwright',
+    );
     return intResponse(count, `Highlighted ${count} elements for ${duration}.`);
 }
 
@@ -452,6 +462,7 @@ async function highlightAll(
     color: string,
     strictMode: boolean,
     state: PlaywrightState,
+    mode: 'border' | 'playwright' = 'border',
 ): Promise<number> {
     const locator = await findLocator(state, selector, strictMode, undefined, false);
     let count: number;
@@ -462,6 +473,15 @@ async function highlightAll(
         return 0;
     }
     logger.info(`Locator count is ${count}`);
+    if (mode === 'playwright') {
+        locator.highlight();
+        if (duration !== 0) {
+            setTimeout(() => {
+                state.getActivePage()?.locator('none.highlight-no-element').highlight();
+            }, duration);
+        }
+        return count;
+    }
     await locator.evaluateAll(
         (elements: Array<Element>, options: EvaluationOptions) => {
             elements.forEach((e: Element) => {
@@ -478,9 +498,11 @@ async function highlightAll(
                 d.style.border = `${options?.wdt ?? '1px'} ${options?.stl ?? `dotted`} ${options?.clr ?? `blue`}`;
                 d.style.boxSizing = 'content-box';
                 document.body.appendChild(d);
-                setTimeout(() => {
-                    d.remove();
-                }, options?.dur ?? 5000);
+                if (options?.dur !== 0) {
+                    setTimeout(() => {
+                        d.remove();
+                    }, options?.dur ?? 5000);
+                }
             });
         },
         { dur: duration, wdt: width, stl: style, clr: color },

protobuf/playwright.proto

@@ -232,6 +232,7 @@ message Request {
     string style = 4;
     string color = 5;
     bool strict = 6;
+    string mode = 7;
   }
 
   message SelectElementSelector {