feat: WORKING getNonUniqueSelectors

This commit is contained in:
karishmas6
2024-08-07 00:28:45 +05:30
parent 20810aa85b
commit 7a14fe2c1e

View File

@@ -98,19 +98,19 @@ export const getElementInformation = async (
{ x: coordinates.x, y: coordinates.y }, { x: coordinates.x, y: coordinates.y },
); );
if (elementInfo) { // if (elementInfo) {
if (elementInfo.tagName === 'A') { // if (elementInfo.tagName === 'A') {
if (elementInfo.innerText) { // if (elementInfo.innerText) {
console.log(`Link text: ${elementInfo.innerText}, URL: ${elementInfo.url}`); // console.log(`Link text: ${elementInfo.innerText}, URL: ${elementInfo.url}`);
} else { // } else {
console.log(`URL: ${elementInfo.url}`); // console.log(`URL: ${elementInfo.url}`);
} // }
} else if (elementInfo.tagName === 'IMG') { // } else if (elementInfo.tagName === 'IMG') {
console.log(`Image URL: ${elementInfo.imageUrl}`); // console.log(`Image URL: ${elementInfo.imageUrl}`);
} else { // } else {
console.log(`Element innerText: ${elementInfo.innerText}`); // console.log(`Element innerText: ${elementInfo.innerText}`);
} // }
} // }
return elementInfo; return elementInfo;
} catch (error) { } catch (error) {
@@ -734,46 +734,52 @@ export const getSelectors = async (page: Page, coordinates: Coordinates) => {
* @category WorkflowManagement-Selectors * @category WorkflowManagement-Selectors
* @returns {Promise<Selectors|null|undefined>} * @returns {Promise<Selectors|null|undefined>}
*/ */
export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates) => { export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates) => {
try { try {
const selectors: any = await page.evaluate(async ({ x, y }) => { const selectors = await page.evaluate(({ x, y }) => {
// version @medv/finder function getSelector(element: Element): string {
// https://github.com/antonmedv/finder/blob/master/finder.ts let selector = element.tagName.toLowerCase();
if (element.className) {
const genNonUniqueSelectors = (element: HTMLElement | null) => { const classes = element.className.split(/\s+/).filter(Boolean);
if (element == null) { if (classes.length > 0) {
return null; selector += '.' + classes.join('.');
}
}
return selector;
} }
const tagName = element.tagName.toLowerCase(); function getSelectorPath(element: Element): string {
const classNames = Array.from(element.classList).map(cls => `.${cls}`).join(''); const path = [];
while (element && element !== document.body) {
path.unshift(getSelector(element));
element = element.parentElement!;
}
return path.join(' > ');
}
const nonUniqueSelector = `${tagName}${classNames}`; const element = document.elementFromPoint(x, y) as Element;
if (!element) return null;
const generalSelector = getSelectorPath(element);
return { return {
nonUniqueSelector, generalSelector,
text: element.innerText, tagName: element.tagName.toLowerCase(),
}; className: element.className,
text: element.textContent?.trim() || '',
href: (element as HTMLAnchorElement).href || undefined,
}; };
}, coordinates);
const hoveredElement = document.elementFromPoint(x, y) as HTMLElement; return selectors || {};
if (hoveredElement != null && !hoveredElement.closest('#overlay-controls')) { } catch (error) {
const { parentElement } = hoveredElement; console.error('Error in getNonUniqueSelectors:', error);
const element = parentElement?.tagName === 'A' ? parentElement : hoveredElement; return {};
const generatedSelectors = genNonUniqueSelectors(element);
return generatedSelectors;
} }
}, { x: coordinates.x, y: coordinates.y });
return selectors;
} catch (e) {
const { message, stack } = e as Error;
console.error('Error while retrieving element:', message);
console.error('Stack:', stack);
}
return null;
}; };
/** /**
* Returns the first pair from the given workflow that contains the given selector * Returns the first pair from the given workflow that contains the given selector
* inside the where condition, and it is the only selector there. * inside the where condition, and it is the only selector there.