vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: get deepest element rect coordinates

Browse Source
This commit is contained in:
RohitR311
2024-12-31 12:26:09 +05:30
parent 4b4074b70d
commit 4a09ea66ff
1 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
server/src/workflow-management/selector.ts
View File

@@ -237,23 +237,30 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
if (!getList || listSelector !== '') { if (!getList || listSelector !== '') {
const rect = await page.evaluate( const rect = await page.evaluate(
async ({ x, y }) => { async ({ x, y }) => {
// Helper function to get element from point including shadow DOM // Enhanced helper function to get element from point including shadow DOM
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => { const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
let element = document.elementFromPoint(x, y) as HTMLElement; let element = document.elementFromPoint(x, y) as HTMLElement;
if (!element) return null; if (!element) return null;
// Traverse through shadow roots // Traverse through shadow roots
let current = element; let current = element;
while (current) { let shadowRoot = current.shadowRoot;
const shadowRoot = current.shadowRoot;
if (!shadowRoot) break; // Keep track of the deepest shadow DOM element found
let deepestElement = current;
while (shadowRoot) {
// Try to find element at same point in shadow DOM
const shadowElement = shadowRoot.elementFromPoint(x, y) as HTMLElement; const shadowElement = shadowRoot.elementFromPoint(x, y) as HTMLElement;
if (!shadowElement || shadowElement === current) break; if (!shadowElement || shadowElement === current) break;
// Update our tracking of the deepest element
deepestElement = shadowElement;
current = shadowElement; current = shadowElement;
shadowRoot = current.shadowRoot;
} }
return current;
return deepestElement;
}; };
const el = getDeepestElementFromPoint(x, y); const el = getDeepestElementFromPoint(x, y);
@@ -274,36 +281,45 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
}; };
} }
} }
return null;
}, },
{ x: coordinates.x, y: coordinates.y }, { x: coordinates.x, y: coordinates.y }
); );
return rect; return rect;
} else { } else {
const rect = await page.evaluate( const rect = await page.evaluate(
async ({ x, y }) => { async ({ x, y }) => {
// Helper function to get element from point including shadow DOM // Enhanced helper function to get element from point including shadow DOM
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => { const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
let element = document.elementFromPoint(x, y) as HTMLElement; let element = document.elementFromPoint(x, y) as HTMLElement;
if (!element) return null; if (!element) return null;
// Traverse through shadow roots // Traverse through shadow roots
let current = element; let current = element;
while (current) { let shadowRoot = current.shadowRoot;
const shadowRoot = current.shadowRoot;
if (!shadowRoot) break; // Keep track of the deepest shadow DOM element found
let deepestElement = current;
while (shadowRoot) {
// Try to find element at same point in shadow DOM
const shadowElement = shadowRoot.elementFromPoint(x, y) as HTMLElement; const shadowElement = shadowRoot.elementFromPoint(x, y) as HTMLElement;
if (!shadowElement || shadowElement === current) break; if (!shadowElement || shadowElement === current) break;
// Update our tracking of the deepest element
deepestElement = shadowElement;
current = shadowElement; current = shadowElement;
shadowRoot = current.shadowRoot;
} }
return current;
return deepestElement;
}; };
const originalEl = getDeepestElementFromPoint(x, y); const originalEl = getDeepestElementFromPoint(x, y);
if (originalEl) { if (originalEl) {
let element = originalEl; let element = originalEl;
// Handle element hierarchy traversal for list items
while (element.parentElement) { while (element.parentElement) {
const parentRect = element.parentElement.getBoundingClientRect(); const parentRect = element.parentElement.getBoundingClientRect();
const childRect = element.getBoundingClientRect(); const childRect = element.getBoundingClientRect();
@@ -326,7 +342,6 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
} }
const rectangle = element?.getBoundingClientRect(); const rectangle = element?.getBoundingClientRect();
if (rectangle) { if (rectangle) {
return { return {
x: rectangle.x, x: rectangle.x,
@@ -342,14 +357,14 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
} }
return null; return null;
}, },
{ x: coordinates.x, y: coordinates.y }, { x: coordinates.x, y: coordinates.y }
); );
return rect; return rect;
} }
} catch (error) { } catch (error) {
const { message, stack } = error as Error; const { message, stack } = error as Error;
logger.log('error', `Error while retrieving selector: ${message}`); console.error('Error while retrieving selector:', message);
logger.log('error', `Stack: ${stack}`); console.error('Stack:', stack);
} }
}; };