Thomas Forgione
68eeda7aa6
|
||
|---|---|---|
| .gitignore | ||
| README.md | ||
| example.html | ||
| index.js | ||
| package-lock.json | ||
| package.json | ||
| quality.js | ||
README.md
Locator
Helps locating elements in simple HTML pages
Installation
npm install --global git+https://gitea.tforgione.fr/tforgione/locator.git
If you don't want to install, just clone the repo and prepare the dependencies:
git clone https://gitea.tforgione.fr/tforgione/locator
cd locator
npm install
Usage
If you installed globally:
locator <path-to-the-HTML-file>
If you just cloned the repo, in the directory where the index.js file is:
node index.js <path-to-the-HTML-file>
Example
locator example.html
Output:
{
"tag": "SECTION",
"class": "",
"box": {
"x": 0,
"y": 0,
"width": 1,
"height": 1
},
"children": [
{
"tag": "H1",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.09722222222222222,
"width": 0.890625,
"height": 0.11812065972222222
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.10416666666666667,
"width": 0.50234375,
"height": 0.10416666666666667
},
"children": [],
"text": "The painting wanders"
}
],
"text": null
},
{
"tag": "P",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.26395399305555556,
"width": 0.890625,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.2667317708333333,
"width": 0.43125,
"height": 0.058333333333333334
},
"children": [],
"text": "The dramatic trek wraps workout."
}
],
"text": null
},
{
"tag": "UL",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.37819010416666665,
"width": 0.890625,
"height": 0.22604166666666667
},
"children": [
{
"tag": "LI",
"class": "",
"box": {
"x": 0.0859375,
"y": 0.37819010416666665,
"width": 0.859375,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.3809678819444444,
"width": 0.5876953125,
"height": 0.058333333333333334
},
"children": [],
"text": "The wrong candidate sublets anesthesiologist."
}
],
"text": null
},
{
"tag": "LI",
"class": "",
"box": {
"x": 0.0859375,
"y": 0.4583984375,
"width": 0.859375,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.4611762152777778,
"width": 0.4072265625,
"height": 0.058333333333333334
},
"children": [],
"text": "The late hydrocarb slides violet."
}
],
"text": null
},
{
"tag": "LI",
"class": "",
"box": {
"x": 0.0859375,
"y": 0.5386067708333333,
"width": 0.859375,
"height": 0.065625
},
"children": [
{
"tag": "SPAN",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.5413845486111111,
"width": 0.3783203125,
"height": 0.058333333333333334
},
"children": [],
"text": "The rich arthur forms zombie."
}
],
"text": null
}
],
"text": null
}
],
"text": null
}
You can also flatten the output:
locator example.html --flatten
Ouput:
[
{
"tag": "SECTION",
"class": "",
"box": {
"x": 0,
"y": 0,
"width": 1,
"height": 1
},
"text": null
},
{
"tag": "H1",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.10416666666666667,
"width": 0.50234375,
"height": 0.10416666666666667
},
"children": [],
"text": "The painting wanders"
},
{
"tag": "P",
"class": "sized-span",
"box": {
"x": 0.0546875,
"y": 0.2667317708333333,
"width": 0.43125,
"height": 0.058333333333333334
},
"children": [],
"text": "The dramatic trek wraps workout."
},
{
"tag": "UL",
"class": "",
"box": {
"x": 0.0546875,
"y": 0.37819010416666665,
"width": 0.890625,
"height": 0.22604166666666667
},
"text": null
},
{
"tag": "LI",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.3809678819444444,
"width": 0.5876953125,
"height": 0.058333333333333334
},
"children": [],
"text": "The wrong candidate sublets anesthesiologist."
},
{
"tag": "LI",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.4611762152777778,
"width": 0.4072265625,
"height": 0.058333333333333334
},
"children": [],
"text": "The late hydrocarb slides violet."
},
{
"tag": "LI",
"class": "sized-span",
"box": {
"x": 0.0859375,
"y": 0.5413845486111111,
"width": 0.3783203125,
"height": 0.058333333333333334
},
"children": [],
"text": "The rich arthur forms zombie."
}
]
It is also possible to make screenshots of each slide but removing the considered element.
locator --output output-directory example.html