feat: generate same child & nonunique seelctors

This commit is contained in:
karishmas6
2024-09-03 05:30:46 +05:30
parent 8b20b8223b
commit 9843116cbf

View File

@@ -741,11 +741,9 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
function getNonUniqueSelector(element: HTMLElement): string { function getNonUniqueSelector(element: HTMLElement): string {
let selector = element.tagName.toLowerCase(); let selector = element.tagName.toLowerCase();
// Avoid using IDs to maintain non-uniqueness
if (element.className) { if (element.className) {
const classes = element.className.split(/\s+/).filter((cls: string) => Boolean(cls)); const classes = element.className.split(/\s+/).filter((cls: string) => Boolean(cls));
if (classes.length > 0) { if (classes.length > 0) {
// Exclude utility classes and escape special characters
const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':')); const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':'));
if (validClasses.length > 0) { if (validClasses.length > 0) {
selector += '.' + validClasses.map(cls => CSS.escape(cls)).join('.'); selector += '.' + validClasses.map(cls => CSS.escape(cls)).join('.');
@@ -759,11 +757,10 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
function getSelectorPath(element: HTMLElement | null): string { function getSelectorPath(element: HTMLElement | null): string {
const path: string[] = []; const path: string[] = [];
let depth = 0; let depth = 0;
const maxDepth = 2; // Limiting the depth of the selector path const maxDepth = 2;
while (element && element !== document.body && depth < maxDepth) { while (element && element !== document.body && depth < maxDepth) {
const selector = getNonUniqueSelector(element); const selector = getNonUniqueSelector(element);
path.unshift(selector); path.unshift(selector);
element = element.parentElement; element = element.parentElement;
depth++; depth++;
@@ -785,21 +782,19 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
} catch (error) { } catch (error) {
console.error('Error in getNonUniqueSelectors:', error); console.error('Error in getNonUniqueSelectors:', error);
return { generalSelector: '' }; return { generalSelector: '' };
} }
}; };
export const getChildSelectors = async (page: Page, parentSelector: string): Promise<string[]> => { export const getChildSelectors = async (page: Page, parentSelector: string): Promise<string[]> => {
try { try {
const childSelectors = await page.evaluate((parentSelector: string) => { const childSelectors = await page.evaluate((parentSelector: string) => {
const parentElement = document.querySelector(parentSelector);
if (!parentElement) return [];
const childElements = Array.from(parentElement.children); function getNonUniqueSelector(element: HTMLElement): string {
return childElements.map(child => { let selector = element.tagName.toLowerCase();
let selector = child.tagName.toLowerCase();
if (child.className) { if (element.className) {
const classes = child.className.split(/\s+/).filter((cls: string) => Boolean(cls)); const classes = element.className.split(/\s+/).filter((cls: string) => Boolean(cls));
if (classes.length > 0) { if (classes.length > 0) {
const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':')); const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':'));
if (validClasses.length > 0) { if (validClasses.length > 0) {
@@ -807,8 +802,30 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
} }
} }
} }
return selector; return selector;
}); }
function getSelectorPath(element: HTMLElement | null): string {
const path: string[] = [];
let depth = 0;
const maxDepth = 2;
while (element && element !== document.body && depth < maxDepth) {
const selector = getNonUniqueSelector(element);
path.unshift(selector);
element = element.parentElement;
depth++;
}
return path.join(' > ');
}
const parentElement = document.querySelector(parentSelector);
if (!parentElement) return [];
const childElements = Array.from(parentElement.children) as HTMLElement[]; // Type assertion to HTMLElement[]
return childElements.map(child => getSelectorPath(child));
}, parentSelector); }, parentSelector);
return childSelectors || []; return childSelectors || [];
@@ -818,6 +835,8 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
} }
}; };
/** /**
* 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.