From abd2c7dc0ccf2671b188e467a7f6d653c49039b4 Mon Sep 17 00:00:00 2001 From: Amir Date: Mon, 19 Feb 2024 21:03:32 +0330 Subject: [PATCH 1/6] feat: -added helper to check if element is ignored. --- packages/runtime/src/functions/isIgnoredElement.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 packages/runtime/src/functions/isIgnoredElement.ts diff --git a/packages/runtime/src/functions/isIgnoredElement.ts b/packages/runtime/src/functions/isIgnoredElement.ts new file mode 100644 index 00000000..2bb1f4b3 --- /dev/null +++ b/packages/runtime/src/functions/isIgnoredElement.ts @@ -0,0 +1,10 @@ +/** + * This function checks if the found element should be ignored. + */ +const isIgnoredElement = (element:HTMLElement):boolean => { + // TODO: -add more options for ignoring elements if needed e.g. disable all elements with certain prefix + if (element.dataset.locatorDisable) return true; + return false +}; + +export default isIgnoredElement From b15f570d7ec39824bd076f019350b2c2ec143491 Mon Sep 17 00:00:00 2001 From: Amir Date: Mon, 19 Feb 2024 21:04:06 +0330 Subject: [PATCH 2/6] feat: -added ignored element support for jsx-adaptor --- packages/runtime/src/adapters/jsx/jsxAdapter.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/runtime/src/adapters/jsx/jsxAdapter.ts b/packages/runtime/src/adapters/jsx/jsxAdapter.ts index 18997f3a..56197356 100644 --- a/packages/runtime/src/adapters/jsx/jsxAdapter.ts +++ b/packages/runtime/src/adapters/jsx/jsxAdapter.ts @@ -12,9 +12,12 @@ import { TreeNode, TreeNodeComponent } from "../../types/TreeNode"; import { Source } from "../../types/types"; import { goUpByTheTree } from "../goUpByTheTree"; import { HtmlElementTreeNode } from "../HtmlElementTreeNode"; +import isIgnoredElement from "../../functions/isIgnoredElement"; export function getElementInfo(target: HTMLElement): FullElementInfo | null { const found = target.closest("[data-locatorjs-id]"); + // if element is ignored, it should match the parent + if (found instanceof HTMLElement && isIgnoredElement(found) && found.parentElement && found.parentElement !== found) return getElementInfo(found.parentElement) if ( found && From a98862825647d11dc3d04020d8f98e948b6e4e9b Mon Sep 17 00:00:00 2001 From: Amir Date: Mon, 19 Feb 2024 21:04:31 +0330 Subject: [PATCH 3/6] feat: -added ignored element support for react-adaptor --- packages/runtime/src/adapters/react/reactAdapter.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/runtime/src/adapters/react/reactAdapter.ts b/packages/runtime/src/adapters/react/reactAdapter.ts index 0c4761a3..e0409c60 100644 --- a/packages/runtime/src/adapters/react/reactAdapter.ts +++ b/packages/runtime/src/adapters/react/reactAdapter.ts @@ -17,12 +17,16 @@ import { Fiber, Source } from "@locator/shared"; import { TreeNode, TreeNodeComponent } from "../../types/TreeNode"; import { goUpByTheTree } from "../goUpByTheTree"; import { HtmlElementTreeNode } from "../HtmlElementTreeNode"; +import isIgnoredElement from "../../functions/isIgnoredElement"; export function getElementInfo(found: HTMLElement): FullElementInfo | null { + // if element is ignored, it should match the parent + if (isIgnoredElement(found) && found.parentElement) return getElementInfo(found.parentElement) + // Instead of labels, return this element, parent elements leading to closest component, its component labels, all wrapping components labels. const labels: LabelData[] = []; - const fiber = findFiberByHtmlElement(found, false); + const fiber = findFiberByHtmlElement(found , false); if (fiber) { const { component, componentBox, parentElements } = getAllParentsElementsAndRootComponent(fiber); From 079a67bf13d7a2e8391c5bc9beadce978b7f7416 Mon Sep 17 00:00:00 2001 From: Amir Date: Mon, 19 Feb 2024 21:04:42 +0330 Subject: [PATCH 4/6] feat: -added ignored element support for svelte-adaptor --- packages/runtime/src/adapters/svelte/svelteAdapter.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/runtime/src/adapters/svelte/svelteAdapter.ts b/packages/runtime/src/adapters/svelte/svelteAdapter.ts index 81cd87a5..3ae7d086 100644 --- a/packages/runtime/src/adapters/svelte/svelteAdapter.ts +++ b/packages/runtime/src/adapters/svelte/svelteAdapter.ts @@ -8,6 +8,7 @@ import { } from "../adapterApi"; import { goUpByTheTree } from "../goUpByTheTree"; import { HtmlElementTreeNode } from "../HtmlElementTreeNode"; +import isIgnoredElement from "../../functions/isIgnoredElement"; type SvelteLoc = { char: number; @@ -20,6 +21,8 @@ type SvelteElement = HTMLElement & { __svelte_meta?: { loc: SvelteLoc } }; export function getElementInfo(found: SvelteElement): FullElementInfo | null { if (found.__svelte_meta) { + // if element is ignored, it should match the parent + if (isIgnoredElement(found) && found.parentElement) return getElementInfo(found.parentElement) const { loc } = found.__svelte_meta; return { thisElement: { From 5aa33a783150dcf3e330fb6a612156b8fe7c441c Mon Sep 17 00:00:00 2001 From: Amir Date: Mon, 19 Feb 2024 21:04:55 +0330 Subject: [PATCH 5/6] feat: -added ignored element support for vue-adaptor --- packages/runtime/src/adapters/vue/vueAdapter.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/runtime/src/adapters/vue/vueAdapter.ts b/packages/runtime/src/adapters/vue/vueAdapter.ts index 93e79367..3e7a6a5a 100644 --- a/packages/runtime/src/adapters/vue/vueAdapter.ts +++ b/packages/runtime/src/adapters/vue/vueAdapter.ts @@ -10,6 +10,7 @@ import { import { goUpByTheTree } from "../goUpByTheTree"; import { HtmlElementTreeNode } from "../HtmlElementTreeNode"; import { getVueComponentBoundingBox } from "./getVNodeBoundingBox"; +import isIgnoredElement from "../../functions/isIgnoredElement"; type VueElement = HTMLElement & { __vueParentComponent?: ComponentInternalInstance; @@ -17,6 +18,9 @@ type VueElement = HTMLElement & { export function getElementInfo(found: VueElement): FullElementInfo | null { const parentComponent = found.__vueParentComponent; + // if element is ignored, it should match the parent + if (isIgnoredElement(found) && parentComponent && found.parentElement) return getElementInfo(found.parentElement ) + if (parentComponent) { if (!parentComponent.type) { return null; From b847f221bcf160c21302eecf99cf4cc617b0d28f Mon Sep 17 00:00:00 2001 From: Amir Date: Mon, 19 Feb 2024 21:47:18 +0330 Subject: [PATCH 6/6] feat: -included first children in ignored element fallback --- packages/runtime/src/adapters/jsx/jsxAdapter.ts | 2 +- packages/runtime/src/adapters/react/reactAdapter.ts | 2 +- packages/runtime/src/adapters/svelte/svelteAdapter.ts | 2 +- packages/runtime/src/adapters/vue/vueAdapter.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/runtime/src/adapters/jsx/jsxAdapter.ts b/packages/runtime/src/adapters/jsx/jsxAdapter.ts index 56197356..36dbd910 100644 --- a/packages/runtime/src/adapters/jsx/jsxAdapter.ts +++ b/packages/runtime/src/adapters/jsx/jsxAdapter.ts @@ -17,7 +17,7 @@ import isIgnoredElement from "../../functions/isIgnoredElement"; export function getElementInfo(target: HTMLElement): FullElementInfo | null { const found = target.closest("[data-locatorjs-id]"); // if element is ignored, it should match the parent - if (found instanceof HTMLElement && isIgnoredElement(found) && found.parentElement && found.parentElement !== found) return getElementInfo(found.parentElement) + if (found instanceof HTMLElement && isIgnoredElement(found) && ((found.parentElement && found.parentElement !== found) || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement) if ( found && diff --git a/packages/runtime/src/adapters/react/reactAdapter.ts b/packages/runtime/src/adapters/react/reactAdapter.ts index e0409c60..9de08b4c 100644 --- a/packages/runtime/src/adapters/react/reactAdapter.ts +++ b/packages/runtime/src/adapters/react/reactAdapter.ts @@ -21,7 +21,7 @@ import isIgnoredElement from "../../functions/isIgnoredElement"; export function getElementInfo(found: HTMLElement): FullElementInfo | null { // if element is ignored, it should match the parent - if (isIgnoredElement(found) && found.parentElement) return getElementInfo(found.parentElement) + if (isIgnoredElement(found) && (found.parentElement || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement) // Instead of labels, return this element, parent elements leading to closest component, its component labels, all wrapping components labels. const labels: LabelData[] = []; diff --git a/packages/runtime/src/adapters/svelte/svelteAdapter.ts b/packages/runtime/src/adapters/svelte/svelteAdapter.ts index 3ae7d086..e95eb7e4 100644 --- a/packages/runtime/src/adapters/svelte/svelteAdapter.ts +++ b/packages/runtime/src/adapters/svelte/svelteAdapter.ts @@ -22,7 +22,7 @@ type SvelteElement = HTMLElement & { __svelte_meta?: { loc: SvelteLoc } }; export function getElementInfo(found: SvelteElement): FullElementInfo | null { if (found.__svelte_meta) { // if element is ignored, it should match the parent - if (isIgnoredElement(found) && found.parentElement) return getElementInfo(found.parentElement) + if (isIgnoredElement(found) && (found.parentElement || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement) const { loc } = found.__svelte_meta; return { thisElement: { diff --git a/packages/runtime/src/adapters/vue/vueAdapter.ts b/packages/runtime/src/adapters/vue/vueAdapter.ts index 3e7a6a5a..6f255956 100644 --- a/packages/runtime/src/adapters/vue/vueAdapter.ts +++ b/packages/runtime/src/adapters/vue/vueAdapter.ts @@ -19,7 +19,7 @@ type VueElement = HTMLElement & { export function getElementInfo(found: VueElement): FullElementInfo | null { const parentComponent = found.__vueParentComponent; // if element is ignored, it should match the parent - if (isIgnoredElement(found) && parentComponent && found.parentElement) return getElementInfo(found.parentElement ) + if (isIgnoredElement(found) && ((parentComponent && found.parentElement) || found.children.length > 0)) return getElementInfo((found.children[0] || found.parentElement) as HTMLElement ) if (parentComponent) { if (!parentComponent.type) {