From d97106c03759ae9fdd30c6eaedc70c812eb3b30a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rene=CC=81?= Date: Mon, 7 Oct 2024 21:23:45 +0200 Subject: [PATCH] implemented Playwrights Highlighting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: ReneĢ --- Browser/keywords/evaluation.py | 8 +++++-- Browser/utils/__init__.py | 1 + Browser/utils/data_types.py | 13 ++++++++++++ node/playwright-wrapper/evaluation.ts | 30 +++++++++++++++++++++++---- protobuf/playwright.proto | 1 + 5 files changed, 47 insertions(+), 6 deletions(-) diff --git a/Browser/keywords/evaluation.py b/Browser/keywords/evaluation.py index e5d525b5d..2e3ca425f 100644 --- a/Browser/keywords/evaluation.py +++ b/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 diff --git a/Browser/utils/__init__.py b/Browser/utils/__init__.py index d01f4660b..03ece4e89 100644 --- a/Browser/utils/__init__.py +++ b/Browser/utils/__init__.py @@ -29,6 +29,7 @@ FormatterTypes, GeoLocation, HighLightElement, + HighlightMode, HttpCredentials, LambdaFunction, NewPageDetails, diff --git a/Browser/utils/data_types.py b/Browser/utils/data_types.py index adf2d4834..e85f70e2b 100644 --- a/Browser/utils/data_types.py +++ b/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": diff --git a/node/playwright-wrapper/evaluation.ts b/node/playwright-wrapper/evaluation.ts index f1822121e..f39afc309 100644 --- a/node/playwright-wrapper/evaluation.ts +++ b/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 { 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, 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 }, diff --git a/protobuf/playwright.proto b/protobuf/playwright.proto index 9979bde4f..87a1c03ec 100644 --- a/protobuf/playwright.proto +++ b/protobuf/playwright.proto @@ -232,6 +232,7 @@ message Request { string style = 4; string color = 5; bool strict = 6; + string mode = 7; } message SelectElementSelector {