295 lines
7.6 KiB
Markdown
295 lines
7.6 KiB
Markdown
# Locator
|
|
|
|
_Helps locating elements in simple HTML pages_
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
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:
|
|
|
|
```sh
|
|
git clone https://gitea.tforgione.fr/tforgione/locator
|
|
cd locator
|
|
npm install
|
|
```
|
|
|
|
## Usage
|
|
|
|
If you installed globally:
|
|
|
|
```sh
|
|
locator <path-to-the-HTML-file>
|
|
```
|
|
|
|
If you just cloned the repo, in the directory where the `index.js` file is:
|
|
|
|
```sh
|
|
node index.js <path-to-the-HTML-file>
|
|
```
|
|
|
|
## Example
|
|
|
|
```sh
|
|
locator example.html
|
|
```
|
|
|
|
Output:
|
|
|
|
```json
|
|
{
|
|
"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:
|
|
|
|
```sh
|
|
locator example.html --flatten
|
|
```
|
|
|
|
Ouput:
|
|
|
|
```json
|
|
[
|
|
{
|
|
"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.
|
|
|
|
```sh
|
|
locator --output output-directory example.html
|
|
```
|