feat: get container element based on dimensions and children

This commit is contained in:
Rohit
2025-04-17 19:07:33 +05:30
parent 0f472ca2ae
commit 3bf659b62f

View File

@@ -302,59 +302,38 @@ export const getElementInformation = async (
); );
return elementInfo; return elementInfo;
} else { } else {
page.on('console', msg => {
console.log(`Browser console: ${msg.text()}`);
});
const elementInfo = await page.evaluate( const elementInfo = await page.evaluate(
async ({ x, y }) => { async ({ x, y }) => {
const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => { const getDeepestElementFromPoint = (x: number, y: number): HTMLElement | null => {
let elements = document.elementsFromPoint(x, y) as HTMLElement[]; let elements = document.elementsFromPoint(x, y) as HTMLElement[];
if (!elements.length) return null; if (!elements.length) return null;
const findDeepestElement = (elements: HTMLElement[]): HTMLElement | null => { const findContainerElement = (elements: HTMLElement[]): HTMLElement | null => {
if (!elements.length) return null; if (!elements.length) return null;
if (elements.length === 1) return elements[0]; if (elements.length === 1) return elements[0];
let deepestElement = elements[0]; for (let i = 0; i < elements.length; i++) {
let maxDepth = 0; const element = elements[i];
const rect = element.getBoundingClientRect();
for (const element of elements) {
let depth = 0;
let current = element;
while (current) { if (rect.width >= 30 && rect.height >= 30) {
depth++; const hasChildrenInList = elements.some((otherElement, j) =>
if (current.parentElement) { i !== j && element.contains(otherElement)
current = current.parentElement; );
} else {
break; if (hasChildrenInList) {
} return element;
} }
if (depth > maxDepth) {
maxDepth = depth;
deepestElement = element;
} }
} }
return deepestElement; return elements[0];
}; };
// Logic to get list container element
let targetElement = null;
for (const element of elements) { let deepestElement = findContainerElement(elements);
const deepestEl = findDeepestElement(elements);
if (deepestEl && element !== deepestEl) {
if (element.contains(deepestEl) &&
element !== deepestEl.parentElement &&
element.tagName !== 'HTML' &&
element.tagName !== 'BODY') {
targetElement = element;
break;
}
}
}
let deepestElement = targetElement || findDeepestElement(elements);
if (!deepestElement) return null; if (!deepestElement) return null;
const traverseShadowDOM = (element: HTMLElement): HTMLElement => { const traverseShadowDOM = (element: HTMLElement): HTMLElement => {
@@ -842,53 +821,29 @@ export const getRect = async (page: Page, coordinates: Coordinates, listSelector
let elements = document.elementsFromPoint(x, y) as HTMLElement[]; let elements = document.elementsFromPoint(x, y) as HTMLElement[];
if (!elements.length) return null; if (!elements.length) return null;
const findDeepestElement = (elements: HTMLElement[]): HTMLElement | null => { const findContainerElement = (elements: HTMLElement[]): HTMLElement | null => {
if (!elements.length) return null; if (!elements.length) return null;
if (elements.length === 1) return elements[0]; if (elements.length === 1) return elements[0];
let deepestElement = elements[0]; for (let i = 0; i < elements.length; i++) {
let maxDepth = 0; const element = elements[i];
const rect = element.getBoundingClientRect();
for (const element of elements) {
let depth = 0;
let current = element;
while (current) { if (rect.width >= 30 && rect.height >= 30) {
depth++; const hasChildrenInList = elements.some((otherElement, j) =>
if (current.parentElement) { i !== j && element.contains(otherElement)
current = current.parentElement; );
} else {
break; if (hasChildrenInList) {
} return element;
} }
if (depth > maxDepth) {
maxDepth = depth;
deepestElement = element;
} }
} }
return deepestElement; return elements[0];
}; };
// Logic to get list container element
let targetElement = null;
for (const element of elements) { let deepestElement = findContainerElement(elements);
const deepestEl = findDeepestElement(elements);
if (deepestEl && element !== deepestEl) {
if (element.contains(deepestEl) &&
element !== deepestEl.parentElement &&
element.tagName !== 'HTML' &&
element.tagName !== 'BODY') {
targetElement = element;
break;
}
}
}
let deepestElement = targetElement || findDeepestElement(elements);
if (!deepestElement) return null; if (!deepestElement) return null;
const traverseShadowDOM = (element: HTMLElement): HTMLElement => { const traverseShadowDOM = (element: HTMLElement): HTMLElement => {
@@ -2041,53 +1996,29 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
let elements = document.elementsFromPoint(x, y) as HTMLElement[]; let elements = document.elementsFromPoint(x, y) as HTMLElement[];
if (!elements.length) return null; if (!elements.length) return null;
const findDeepestElement = (elements: HTMLElement[]): HTMLElement | null => { const findContainerElement = (elements: HTMLElement[]): HTMLElement | null => {
if (!elements.length) return null; if (!elements.length) return null;
if (elements.length === 1) return elements[0]; if (elements.length === 1) return elements[0];
let deepestElement = elements[0]; for (let i = 0; i < elements.length; i++) {
let maxDepth = 0; const element = elements[i];
const rect = element.getBoundingClientRect();
for (const element of elements) {
let depth = 0;
let current = element;
while (current) { if (rect.width >= 30 && rect.height >= 30) {
depth++; const hasChildrenInList = elements.some((otherElement, j) =>
if (current.parentElement) { i !== j && element.contains(otherElement)
current = current.parentElement; );
} else {
break; if (hasChildrenInList) {
} return element;
} }
if (depth > maxDepth) {
maxDepth = depth;
deepestElement = element;
} }
} }
return deepestElement; return elements[0];
}; };
// Logic to get list container element
let targetElement = null;
for (const element of elements) { let deepestElement = findContainerElement(elements);
const deepestEl = findDeepestElement(elements);
if (deepestEl && element !== deepestEl) {
if (element.contains(deepestEl) &&
element !== deepestEl.parentElement &&
element.tagName !== 'HTML' &&
element.tagName !== 'BODY') {
targetElement = element;
break;
}
}
}
let deepestElement = targetElement || findDeepestElement(elements);
if (!deepestElement) return null; if (!deepestElement) return null;
const traverseShadowDOM = (element: HTMLElement): HTMLElement => { const traverseShadowDOM = (element: HTMLElement): HTMLElement => {