@treelocator/runtime 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +30 -0
- package/.turbo/turbo-test.log +18 -0
- package/.turbo/turbo-ts.log +4 -0
- package/LICENSE +22 -0
- package/dist/browserApi.d.ts +9 -9
- package/dist/browserApi.js +13 -13
- package/dist/components/Runtime.js +1 -1
- package/dist/initRuntime.js +1 -1
- package/package.json +4 -3
- package/src/browserApi.ts +22 -22
- package/src/components/Runtime.tsx +7 -7
- package/src/global.d.ts +4 -4
- package/src/initRuntime.ts +1 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
|
|
2
|
+
> @treelocator/runtime@0.1.3 build /Users/wende/projects/locatorjs/packages/runtime
|
|
3
|
+
> concurrently pnpm:build:*
|
|
4
|
+
|
|
5
|
+
[tailwind]
|
|
6
|
+
[tailwind] > @treelocator/runtime@0.1.3 build:tailwind /Users/wende/projects/locatorjs/packages/runtime
|
|
7
|
+
[tailwind] > tailwindcss -i ./src/main.css -o ./dist/output.css
|
|
8
|
+
[tailwind]
|
|
9
|
+
[babel]
|
|
10
|
+
[babel] > @treelocator/runtime@0.1.3 build:babel /Users/wende/projects/locatorjs/packages/runtime
|
|
11
|
+
[babel] > babel src --out-dir dist --extensions .js,.jsx,.ts,.tsx
|
|
12
|
+
[babel]
|
|
13
|
+
[ts]
|
|
14
|
+
[ts] > @treelocator/runtime@0.1.3 build:ts /Users/wende/projects/locatorjs/packages/runtime
|
|
15
|
+
[ts] > tsc --declaration --emitDeclarationOnly --noEmit false --outDir dist
|
|
16
|
+
[ts]
|
|
17
|
+
[wrapImage]
|
|
18
|
+
[wrapImage] > @treelocator/runtime@0.1.3 build:wrapImage /Users/wende/projects/locatorjs/packages/runtime
|
|
19
|
+
[wrapImage] > node ./scripts/wrapImage.js
|
|
20
|
+
[wrapImage]
|
|
21
|
+
[wrapImage] Tree icon file generated
|
|
22
|
+
[wrapImage] pnpm run build:wrapImage exited with code 0
|
|
23
|
+
[tailwind]
|
|
24
|
+
[tailwind] Rebuilding...
|
|
25
|
+
[tailwind]
|
|
26
|
+
[tailwind] Done in 171ms.
|
|
27
|
+
[tailwind] pnpm run build:tailwind exited with code 0
|
|
28
|
+
[babel] Successfully compiled 71 files with Babel (446ms).
|
|
29
|
+
[babel] pnpm run build:babel exited with code 0
|
|
30
|
+
[ts] pnpm run build:ts exited with code 0
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
|
|
2
|
+
> @treelocator/runtime@0.1.2 test /Users/wende/projects/locatorjs/packages/runtime
|
|
3
|
+
> vitest run
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
RUN v2.1.9 /Users/wende/projects/locatorjs/packages/runtime
|
|
7
|
+
|
|
8
|
+
✓ src/functions/cropPath.test.ts (2 tests) 1ms
|
|
9
|
+
✓ src/functions/evalTemplate.test.ts (1 test) 1ms
|
|
10
|
+
✓ src/functions/transformPath.test.ts (3 tests) 2ms
|
|
11
|
+
✓ src/functions/mergeRects.test.ts (1 test) 1ms
|
|
12
|
+
✓ src/functions/getUsableFileName.test.tsx (4 tests) 1ms
|
|
13
|
+
|
|
14
|
+
Test Files 5 passed (5)
|
|
15
|
+
Tests 11 passed (11)
|
|
16
|
+
Start at 18:29:05
|
|
17
|
+
Duration 687ms (transform 240ms, setup 0ms, collect 278ms, tests 7ms, environment 1ms, prepare 366ms)
|
|
18
|
+
|
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Krzysztof Wende
|
|
4
|
+
Copyright (c) 2023 Michael Musil (original LocatorJS)
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
SOFTWARE.
|
package/dist/browserApi.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export interface LocatorJSAPI {
|
|
|
10
10
|
*
|
|
11
11
|
* @example
|
|
12
12
|
* // Basic usage with CSS selector
|
|
13
|
-
* window.
|
|
13
|
+
* window.__treelocator__.getPath('button.submit');
|
|
14
14
|
* // Returns:
|
|
15
15
|
* // "div in App at src/App.tsx:15
|
|
16
16
|
* // └─ button in SubmitButton at src/components/SubmitButton.tsx:12"
|
|
@@ -18,12 +18,12 @@ export interface LocatorJSAPI {
|
|
|
18
18
|
* @example
|
|
19
19
|
* // Usage with HTMLElement
|
|
20
20
|
* const button = document.querySelector('button.submit');
|
|
21
|
-
* window.
|
|
21
|
+
* window.__treelocator__.getPath(button);
|
|
22
22
|
*
|
|
23
23
|
* @example
|
|
24
24
|
* // In Playwright
|
|
25
25
|
* const path = await page.evaluate(() => {
|
|
26
|
-
* return window.
|
|
26
|
+
* return window.__treelocator__.getPath('button.submit');
|
|
27
27
|
* });
|
|
28
28
|
* console.log(path);
|
|
29
29
|
*/
|
|
@@ -41,7 +41,7 @@ export interface LocatorJSAPI {
|
|
|
41
41
|
*
|
|
42
42
|
* @example
|
|
43
43
|
* // Get structured ancestry data
|
|
44
|
-
* const ancestry = window.
|
|
44
|
+
* const ancestry = window.__treelocator__.getAncestry('button.submit');
|
|
45
45
|
* // Returns: [
|
|
46
46
|
* // { elementName: 'div', componentName: 'App', filePath: 'src/App.tsx', line: 15 },
|
|
47
47
|
* // { elementName: 'button', componentName: 'SubmitButton', filePath: 'src/components/SubmitButton.tsx', line: 12 }
|
|
@@ -50,7 +50,7 @@ export interface LocatorJSAPI {
|
|
|
50
50
|
* @example
|
|
51
51
|
* // In Playwright - extract just component names
|
|
52
52
|
* const components = await page.evaluate(() => {
|
|
53
|
-
* const ancestry = window.
|
|
53
|
+
* const ancestry = window.__treelocator__.getAncestry('.my-element');
|
|
54
54
|
* return ancestry?.map(item => item.componentName).filter(Boolean);
|
|
55
55
|
* });
|
|
56
56
|
*/
|
|
@@ -64,14 +64,14 @@ export interface LocatorJSAPI {
|
|
|
64
64
|
*
|
|
65
65
|
* @example
|
|
66
66
|
* // Get both formats at once
|
|
67
|
-
* const data = window.
|
|
67
|
+
* const data = window.__treelocator__.getPathData('button.submit');
|
|
68
68
|
* console.log(data.path); // Human-readable string
|
|
69
69
|
* console.log(data.ancestry); // Structured array
|
|
70
70
|
*
|
|
71
71
|
* @example
|
|
72
72
|
* // In Playwright - useful for comprehensive debugging
|
|
73
73
|
* const data = await page.evaluate(() => {
|
|
74
|
-
* return window.
|
|
74
|
+
* return window.__treelocator__.getPathData('.error-message');
|
|
75
75
|
* });
|
|
76
76
|
* if (data) {
|
|
77
77
|
* console.log('Component tree:', data.path);
|
|
@@ -90,11 +90,11 @@ export interface LocatorJSAPI {
|
|
|
90
90
|
*
|
|
91
91
|
* @example
|
|
92
92
|
* // View help in browser console
|
|
93
|
-
* console.log(window.
|
|
93
|
+
* console.log(window.__treelocator__.help());
|
|
94
94
|
*
|
|
95
95
|
* @example
|
|
96
96
|
* // In Playwright - view help
|
|
97
|
-
* const help = await page.evaluate(() => window.
|
|
97
|
+
* const help = await page.evaluate(() => window.__treelocator__.help());
|
|
98
98
|
* console.log(help);
|
|
99
99
|
*/
|
|
100
100
|
help(): string;
|
package/dist/browserApi.js
CHANGED
|
@@ -17,7 +17,7 @@ function getAncestryForElement(element) {
|
|
|
17
17
|
}
|
|
18
18
|
const HELP_TEXT = `
|
|
19
19
|
╔═══════════════════════════════════════════════════════════════════════════╗
|
|
20
|
-
║
|
|
20
|
+
║ TreeLocatorJS Browser API ║
|
|
21
21
|
║ Programmatic Component Ancestry Access ║
|
|
22
22
|
╚═══════════════════════════════════════════════════════════════════════════╝
|
|
23
23
|
|
|
@@ -28,8 +28,8 @@ METHODS:
|
|
|
28
28
|
Returns a formatted string showing the component hierarchy.
|
|
29
29
|
|
|
30
30
|
Usage:
|
|
31
|
-
window.
|
|
32
|
-
window.
|
|
31
|
+
window.__treelocator__.getPath('button.submit')
|
|
32
|
+
window.__treelocator__.getPath(document.querySelector('.my-button'))
|
|
33
33
|
|
|
34
34
|
Returns:
|
|
35
35
|
"div in App at src/App.tsx:15
|
|
@@ -39,7 +39,7 @@ METHODS:
|
|
|
39
39
|
Returns raw ancestry data as an array of objects.
|
|
40
40
|
|
|
41
41
|
Usage:
|
|
42
|
-
window.
|
|
42
|
+
window.__treelocator__.getAncestry('button.submit')
|
|
43
43
|
|
|
44
44
|
Returns:
|
|
45
45
|
[
|
|
@@ -53,7 +53,7 @@ METHODS:
|
|
|
53
53
|
Returns both formatted path and raw ancestry in one call.
|
|
54
54
|
|
|
55
55
|
Usage:
|
|
56
|
-
const data = window.
|
|
56
|
+
const data = window.__treelocator__.getPathData('button.submit')
|
|
57
57
|
console.log(data.path) // formatted string
|
|
58
58
|
console.log(data.ancestry) // structured array
|
|
59
59
|
|
|
@@ -65,20 +65,20 @@ PLAYWRIGHT EXAMPLES:
|
|
|
65
65
|
|
|
66
66
|
// Get component path for debugging
|
|
67
67
|
const path = await page.evaluate(() => {
|
|
68
|
-
return window.
|
|
68
|
+
return window.__treelocator__.getPath('button.submit');
|
|
69
69
|
});
|
|
70
70
|
console.log(path);
|
|
71
71
|
|
|
72
72
|
// Extract component names
|
|
73
73
|
const components = await page.evaluate(() => {
|
|
74
|
-
const ancestry = window.
|
|
74
|
+
const ancestry = window.__treelocator__.getAncestry('.error-message');
|
|
75
75
|
return ancestry?.map(item => item.componentName).filter(Boolean);
|
|
76
76
|
});
|
|
77
77
|
|
|
78
78
|
// Create a test helper
|
|
79
79
|
async function getComponentPath(page, selector) {
|
|
80
80
|
return await page.evaluate((sel) => {
|
|
81
|
-
return window.
|
|
81
|
+
return window.__treelocator__.getPath(sel);
|
|
82
82
|
}, selector);
|
|
83
83
|
}
|
|
84
84
|
|
|
@@ -86,14 +86,14 @@ PUPPETEER EXAMPLES:
|
|
|
86
86
|
------------------
|
|
87
87
|
|
|
88
88
|
const path = await page.evaluate(() => {
|
|
89
|
-
return window.
|
|
89
|
+
return window.__treelocator__.getPath('.my-button');
|
|
90
90
|
});
|
|
91
91
|
|
|
92
92
|
SELENIUM EXAMPLES:
|
|
93
93
|
-----------------
|
|
94
94
|
|
|
95
95
|
const path = await driver.executeScript(() => {
|
|
96
|
-
return window.
|
|
96
|
+
return window.__treelocator__.getPath('button.submit');
|
|
97
97
|
});
|
|
98
98
|
|
|
99
99
|
CYPRESS EXAMPLES:
|
|
@@ -109,9 +109,9 @@ NOTES:
|
|
|
109
109
|
• Accepts CSS selectors or HTMLElement objects
|
|
110
110
|
• Returns null if element not found or framework not supported
|
|
111
111
|
• Works with React, Vue, Svelte, Preact, and any JSX framework
|
|
112
|
-
• Automatically installed when
|
|
112
|
+
• Automatically installed when TreeLocatorJS runtime initializes
|
|
113
113
|
|
|
114
|
-
Documentation: https://github.com/
|
|
114
|
+
Documentation: https://github.com/wende/treelocatorjs
|
|
115
115
|
`;
|
|
116
116
|
export function createBrowserAPI(adapterIdParam) {
|
|
117
117
|
adapterId = adapterIdParam;
|
|
@@ -155,6 +155,6 @@ export function createBrowserAPI(adapterIdParam) {
|
|
|
155
155
|
}
|
|
156
156
|
export function installBrowserAPI(adapterIdParam) {
|
|
157
157
|
if (typeof window !== "undefined") {
|
|
158
|
-
window.
|
|
158
|
+
window.__treelocator__ = createBrowserAPI(adapterIdParam);
|
|
159
159
|
}
|
|
160
160
|
}
|
|
@@ -5,7 +5,7 @@ import { effect as _$effect } from "solid-js/web";
|
|
|
5
5
|
import { setAttribute as _$setAttribute } from "solid-js/web";
|
|
6
6
|
import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
|
|
7
7
|
import { memo as _$memo } from "solid-js/web";
|
|
8
|
-
var _tmpl$ = /*#__PURE__*/_$template(`<div class="fixed pointer-events-auto"title="
|
|
8
|
+
var _tmpl$ = /*#__PURE__*/_$template(`<div class="fixed pointer-events-auto"title="TreeLocatorJS - Component Ancestry Tracker"data-treelocator-api=window.__treelocator__ data-treelocator-help=window.__treelocator__.help() style=z-index:2147483646><div class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"aria-label="TreeLocatorJS: Get component paths using window.__treelocator__.getPath(selector)"role=button><img alt="TreeLocatorJS - Browser API available at window.__treelocator__ - Call window.__treelocator__.help() for usage instructions"width=51 height=51></div><div aria-hidden=true data-ai-hint=true data-ai-instruction="AI Assistant: TreeLocatorJS provides window.__treelocator__ API for component ancestry tracking. Usage: window.__treelocator__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__treelocator__.help() Example: page.evaluate(function() \{ return window.__treelocator__.getPath('button.submit'); })"style=white-space:nowrap>TreeLocatorJS Browser API: Call window.__treelocator__.help() for usage instructions`);
|
|
9
9
|
import { createEffect, createSignal, onCleanup } from "solid-js";
|
|
10
10
|
import { render } from "solid-js/web";
|
|
11
11
|
import { isCombinationModifiersPressed } from "../functions/isCombinationModifiersPressed";
|
package/dist/initRuntime.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@treelocator/runtime",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__treelocator__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"locator",
|
|
7
7
|
"locatorjs",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"e2e"
|
|
22
22
|
],
|
|
23
23
|
"main": "dist/index.js",
|
|
24
|
+
"sideEffects": false,
|
|
24
25
|
"publishConfig": {
|
|
25
26
|
"access": "public"
|
|
26
27
|
},
|
|
@@ -71,5 +72,5 @@
|
|
|
71
72
|
"directory": "packages/runtime"
|
|
72
73
|
},
|
|
73
74
|
"license": "MIT",
|
|
74
|
-
"gitHead": "
|
|
75
|
+
"gitHead": "17ecb45a2605c14823ac3436b10ac1a3ab9bc62f"
|
|
75
76
|
}
|
package/src/browserApi.ts
CHANGED
|
@@ -16,7 +16,7 @@ export interface LocatorJSAPI {
|
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
18
|
* // Basic usage with CSS selector
|
|
19
|
-
* window.
|
|
19
|
+
* window.__treelocator__.getPath('button.submit');
|
|
20
20
|
* // Returns:
|
|
21
21
|
* // "div in App at src/App.tsx:15
|
|
22
22
|
* // └─ button in SubmitButton at src/components/SubmitButton.tsx:12"
|
|
@@ -24,12 +24,12 @@ export interface LocatorJSAPI {
|
|
|
24
24
|
* @example
|
|
25
25
|
* // Usage with HTMLElement
|
|
26
26
|
* const button = document.querySelector('button.submit');
|
|
27
|
-
* window.
|
|
27
|
+
* window.__treelocator__.getPath(button);
|
|
28
28
|
*
|
|
29
29
|
* @example
|
|
30
30
|
* // In Playwright
|
|
31
31
|
* const path = await page.evaluate(() => {
|
|
32
|
-
* return window.
|
|
32
|
+
* return window.__treelocator__.getPath('button.submit');
|
|
33
33
|
* });
|
|
34
34
|
* console.log(path);
|
|
35
35
|
*/
|
|
@@ -48,7 +48,7 @@ export interface LocatorJSAPI {
|
|
|
48
48
|
*
|
|
49
49
|
* @example
|
|
50
50
|
* // Get structured ancestry data
|
|
51
|
-
* const ancestry = window.
|
|
51
|
+
* const ancestry = window.__treelocator__.getAncestry('button.submit');
|
|
52
52
|
* // Returns: [
|
|
53
53
|
* // { elementName: 'div', componentName: 'App', filePath: 'src/App.tsx', line: 15 },
|
|
54
54
|
* // { elementName: 'button', componentName: 'SubmitButton', filePath: 'src/components/SubmitButton.tsx', line: 12 }
|
|
@@ -57,7 +57,7 @@ export interface LocatorJSAPI {
|
|
|
57
57
|
* @example
|
|
58
58
|
* // In Playwright - extract just component names
|
|
59
59
|
* const components = await page.evaluate(() => {
|
|
60
|
-
* const ancestry = window.
|
|
60
|
+
* const ancestry = window.__treelocator__.getAncestry('.my-element');
|
|
61
61
|
* return ancestry?.map(item => item.componentName).filter(Boolean);
|
|
62
62
|
* });
|
|
63
63
|
*/
|
|
@@ -72,14 +72,14 @@ export interface LocatorJSAPI {
|
|
|
72
72
|
*
|
|
73
73
|
* @example
|
|
74
74
|
* // Get both formats at once
|
|
75
|
-
* const data = window.
|
|
75
|
+
* const data = window.__treelocator__.getPathData('button.submit');
|
|
76
76
|
* console.log(data.path); // Human-readable string
|
|
77
77
|
* console.log(data.ancestry); // Structured array
|
|
78
78
|
*
|
|
79
79
|
* @example
|
|
80
80
|
* // In Playwright - useful for comprehensive debugging
|
|
81
81
|
* const data = await page.evaluate(() => {
|
|
82
|
-
* return window.
|
|
82
|
+
* return window.__treelocator__.getPathData('.error-message');
|
|
83
83
|
* });
|
|
84
84
|
* if (data) {
|
|
85
85
|
* console.log('Component tree:', data.path);
|
|
@@ -98,11 +98,11 @@ export interface LocatorJSAPI {
|
|
|
98
98
|
*
|
|
99
99
|
* @example
|
|
100
100
|
* // View help in browser console
|
|
101
|
-
* console.log(window.
|
|
101
|
+
* console.log(window.__treelocator__.help());
|
|
102
102
|
*
|
|
103
103
|
* @example
|
|
104
104
|
* // In Playwright - view help
|
|
105
|
-
* const help = await page.evaluate(() => window.
|
|
105
|
+
* const help = await page.evaluate(() => window.__treelocator__.help());
|
|
106
106
|
* console.log(help);
|
|
107
107
|
*/
|
|
108
108
|
help(): string;
|
|
@@ -130,7 +130,7 @@ function getAncestryForElement(element: HTMLElement): AncestryItem[] | null {
|
|
|
130
130
|
|
|
131
131
|
const HELP_TEXT = `
|
|
132
132
|
╔═══════════════════════════════════════════════════════════════════════════╗
|
|
133
|
-
║
|
|
133
|
+
║ TreeLocatorJS Browser API ║
|
|
134
134
|
║ Programmatic Component Ancestry Access ║
|
|
135
135
|
╚═══════════════════════════════════════════════════════════════════════════╝
|
|
136
136
|
|
|
@@ -141,8 +141,8 @@ METHODS:
|
|
|
141
141
|
Returns a formatted string showing the component hierarchy.
|
|
142
142
|
|
|
143
143
|
Usage:
|
|
144
|
-
window.
|
|
145
|
-
window.
|
|
144
|
+
window.__treelocator__.getPath('button.submit')
|
|
145
|
+
window.__treelocator__.getPath(document.querySelector('.my-button'))
|
|
146
146
|
|
|
147
147
|
Returns:
|
|
148
148
|
"div in App at src/App.tsx:15
|
|
@@ -152,7 +152,7 @@ METHODS:
|
|
|
152
152
|
Returns raw ancestry data as an array of objects.
|
|
153
153
|
|
|
154
154
|
Usage:
|
|
155
|
-
window.
|
|
155
|
+
window.__treelocator__.getAncestry('button.submit')
|
|
156
156
|
|
|
157
157
|
Returns:
|
|
158
158
|
[
|
|
@@ -166,7 +166,7 @@ METHODS:
|
|
|
166
166
|
Returns both formatted path and raw ancestry in one call.
|
|
167
167
|
|
|
168
168
|
Usage:
|
|
169
|
-
const data = window.
|
|
169
|
+
const data = window.__treelocator__.getPathData('button.submit')
|
|
170
170
|
console.log(data.path) // formatted string
|
|
171
171
|
console.log(data.ancestry) // structured array
|
|
172
172
|
|
|
@@ -178,20 +178,20 @@ PLAYWRIGHT EXAMPLES:
|
|
|
178
178
|
|
|
179
179
|
// Get component path for debugging
|
|
180
180
|
const path = await page.evaluate(() => {
|
|
181
|
-
return window.
|
|
181
|
+
return window.__treelocator__.getPath('button.submit');
|
|
182
182
|
});
|
|
183
183
|
console.log(path);
|
|
184
184
|
|
|
185
185
|
// Extract component names
|
|
186
186
|
const components = await page.evaluate(() => {
|
|
187
|
-
const ancestry = window.
|
|
187
|
+
const ancestry = window.__treelocator__.getAncestry('.error-message');
|
|
188
188
|
return ancestry?.map(item => item.componentName).filter(Boolean);
|
|
189
189
|
});
|
|
190
190
|
|
|
191
191
|
// Create a test helper
|
|
192
192
|
async function getComponentPath(page, selector) {
|
|
193
193
|
return await page.evaluate((sel) => {
|
|
194
|
-
return window.
|
|
194
|
+
return window.__treelocator__.getPath(sel);
|
|
195
195
|
}, selector);
|
|
196
196
|
}
|
|
197
197
|
|
|
@@ -199,14 +199,14 @@ PUPPETEER EXAMPLES:
|
|
|
199
199
|
------------------
|
|
200
200
|
|
|
201
201
|
const path = await page.evaluate(() => {
|
|
202
|
-
return window.
|
|
202
|
+
return window.__treelocator__.getPath('.my-button');
|
|
203
203
|
});
|
|
204
204
|
|
|
205
205
|
SELENIUM EXAMPLES:
|
|
206
206
|
-----------------
|
|
207
207
|
|
|
208
208
|
const path = await driver.executeScript(() => {
|
|
209
|
-
return window.
|
|
209
|
+
return window.__treelocator__.getPath('button.submit');
|
|
210
210
|
});
|
|
211
211
|
|
|
212
212
|
CYPRESS EXAMPLES:
|
|
@@ -222,9 +222,9 @@ NOTES:
|
|
|
222
222
|
• Accepts CSS selectors or HTMLElement objects
|
|
223
223
|
• Returns null if element not found or framework not supported
|
|
224
224
|
• Works with React, Vue, Svelte, Preact, and any JSX framework
|
|
225
|
-
• Automatically installed when
|
|
225
|
+
• Automatically installed when TreeLocatorJS runtime initializes
|
|
226
226
|
|
|
227
|
-
Documentation: https://github.com/
|
|
227
|
+
Documentation: https://github.com/wende/treelocatorjs
|
|
228
228
|
`;
|
|
229
229
|
|
|
230
230
|
export function createBrowserAPI(
|
|
@@ -283,6 +283,6 @@ export function createBrowserAPI(
|
|
|
283
283
|
|
|
284
284
|
export function installBrowserAPI(adapterIdParam?: AdapterId): void {
|
|
285
285
|
if (typeof window !== "undefined") {
|
|
286
|
-
(window as any).
|
|
286
|
+
(window as any).__treelocator__ = createBrowserAPI(adapterIdParam);
|
|
287
287
|
}
|
|
288
288
|
}
|
|
@@ -185,9 +185,9 @@ function Runtime(props: RuntimeProps) {
|
|
|
185
185
|
<div
|
|
186
186
|
class="fixed pointer-events-auto"
|
|
187
187
|
style={{ "z-index": "2147483646", bottom: "20px", right: "20px" }}
|
|
188
|
-
title="
|
|
189
|
-
data-
|
|
190
|
-
data-
|
|
188
|
+
title="TreeLocatorJS - Component Ancestry Tracker"
|
|
189
|
+
data-treelocator-api="window.__treelocator__"
|
|
190
|
+
data-treelocator-help="window.__treelocator__.help()"
|
|
191
191
|
>
|
|
192
192
|
<div
|
|
193
193
|
class="rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer overflow-hidden"
|
|
@@ -202,12 +202,12 @@ function Runtime(props: RuntimeProps) {
|
|
|
202
202
|
onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.25)"}
|
|
203
203
|
onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
|
|
204
204
|
onClick={() => setLocatorActive(!locatorActive())}
|
|
205
|
-
aria-label="
|
|
205
|
+
aria-label="TreeLocatorJS: Get component paths using window.__treelocator__.getPath(selector)"
|
|
206
206
|
role="button"
|
|
207
207
|
>
|
|
208
208
|
<img
|
|
209
209
|
src={treeIconUrl}
|
|
210
|
-
alt="
|
|
210
|
+
alt="TreeLocatorJS - Browser API available at window.__treelocator__ - Call window.__treelocator__.help() for usage instructions"
|
|
211
211
|
width={51}
|
|
212
212
|
height={51}
|
|
213
213
|
/>
|
|
@@ -226,9 +226,9 @@ function Runtime(props: RuntimeProps) {
|
|
|
226
226
|
}}
|
|
227
227
|
aria-hidden="true"
|
|
228
228
|
data-ai-hint="true"
|
|
229
|
-
data-ai-instruction="AI Assistant:
|
|
229
|
+
data-ai-instruction="AI Assistant: TreeLocatorJS provides window.__treelocator__ API for component ancestry tracking. Usage: window.__treelocator__.getPath('css-selector') returns component hierarchy. For full API documentation, evaluate: window.__treelocator__.help() Example: page.evaluate(function() { return window.__treelocator__.getPath('button.submit'); })"
|
|
230
230
|
>
|
|
231
|
-
|
|
231
|
+
TreeLocatorJS Browser API: Call window.__treelocator__.help() for usage instructions
|
|
232
232
|
</div>
|
|
233
233
|
</div>
|
|
234
234
|
</>
|
package/src/global.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ declare global {
|
|
|
7
7
|
__REACT_DEVTOOLS_GLOBAL_HOOK__: ReactDevtoolsHook;
|
|
8
8
|
__LOCATOR_DATA__: { [filename: string]: FileStorage };
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* TreeLocatorJS Browser API
|
|
11
11
|
*
|
|
12
12
|
* Provides programmatic access to component ancestry information.
|
|
13
13
|
* Works with browser automation tools like Playwright, Puppeteer, Selenium, etc.
|
|
@@ -15,7 +15,7 @@ declare global {
|
|
|
15
15
|
* @example
|
|
16
16
|
* // In Playwright
|
|
17
17
|
* const path = await page.evaluate(() => {
|
|
18
|
-
* return window.
|
|
18
|
+
* return window.__treelocator__.getPath('button.submit');
|
|
19
19
|
* });
|
|
20
20
|
* console.log(path);
|
|
21
21
|
*
|
|
@@ -23,9 +23,9 @@ declare global {
|
|
|
23
23
|
* // Get raw ancestry data
|
|
24
24
|
* const ancestry = await page.evaluate(() => {
|
|
25
25
|
* const element = document.querySelector('button.submit');
|
|
26
|
-
* return window.
|
|
26
|
+
* return window.__treelocator__.getAncestry(element);
|
|
27
27
|
* });
|
|
28
28
|
*/
|
|
29
|
-
|
|
29
|
+
__treelocator__: LocatorJSAPI;
|
|
30
30
|
}
|
|
31
31
|
}
|