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();
const classNames = Array.from(element.classList).map(cls => `.${cls}`).join('');
const nonUniqueSelector = `${tagName}${classNames}`;
return {
nonUniqueSelector,
text: element.innerText,
};
};
const hoveredElement = document.elementFromPoint(x, y) as HTMLElement;
if (hoveredElement != null && !hoveredElement.closest('#overlay-controls')) {
const { parentElement } = hoveredElement;
const element = parentElement?.tagName === 'A' ? parentElement : hoveredElement;
const generatedSelectors = genNonUniqueSelectors(element);
return generatedSelectors;
} }
}, { x: coordinates.x, y: coordinates.y });
return selectors; function getSelectorPath(element: Element): string {
} catch (e) { const path = [];
const { message, stack } = e as Error; while (element && element !== document.body) {
console.error('Error while retrieving element:', message); path.unshift(getSelector(element));
console.error('Stack:', stack); element = element.parentElement!;
}
return path.join(' > ');
}
const element = document.elementFromPoint(x, y) as Element;
if (!element) return null;
const generalSelector = getSelectorPath(element);
return {
generalSelector,
tagName: element.tagName.toLowerCase(),
className: element.className,
text: element.textContent?.trim() || '',
href: (element as HTMLAnchorElement).href || undefined,
};
}, coordinates);
return selectors || {};
} catch (error) {
console.error('Error in getNonUniqueSelectors:', error);
return {};
} }
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.