From 97c19afd1659b9869da3a7bb2d91d420a735f0f6 Mon Sep 17 00:00:00 2001
From: magmueller <mamagnus00@gmail.com>
Date: Mon, 20 Jan 2025 08:43:16 -0800
Subject: [PATCH] Merged viewport in dom service

---
 browser_use/dom/service.py | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/browser_use/dom/service.py b/browser_use/dom/service.py
index 5a6664103..1379ec39d 100644
--- a/browser_use/dom/service.py
+++ b/browser_use/dom/service.py
@@ -21,23 +21,32 @@ class DomService:
 		self.xpath_cache = {}
 
 	# region - Clickable elements
-	async def get_clickable_elements(self, highlight_elements: bool = True, focus_element: int = -1) -> DOMState:
-		element_tree = await self._build_dom_tree(highlight_elements, focus_element)
+	async def get_clickable_elements(
+		self,
+		highlight_elements: bool = True,
+		focus_element: int = -1,
+		viewport_expansion: int = 0,
+	) -> DOMState:
+		element_tree = await self._build_dom_tree(highlight_elements, focus_element, viewport_expansion)
 		selector_map = self._create_selector_map(element_tree)
 
 		return DOMState(element_tree=element_tree, selector_map=selector_map)
 
-	async def _build_dom_tree(self, highlight_elements: bool, focus_element: int) -> DOMElementNode:
+	async def _build_dom_tree(
+		self,
+		highlight_elements: bool,
+		focus_element: int,
+		viewport_expansion: int,
+	) -> DOMElementNode:
 		js_code = resources.read_text('browser_use.dom', 'buildDomTree.js')
 
 		args = {
-			"doHighlightElements": highlight_elements,
-			"focusHighlightIndex": focus_element,
+			'doHighlightElements': highlight_elements,
+			'focusHighlightIndex': focus_element,
+			'viewportExpansion': viewport_expansion,
 		}
 
-		eval_page = await self.page.evaluate(
-			js_code, args
-		)  # This is quite big, so be careful
+		eval_page = await self.page.evaluate(js_code, args)  # This is quite big, so be careful
 		html_to_dict = self._parse_node(eval_page)
 
 		if html_to_dict is None or not isinstance(html_to_dict, DOMElementNode):