Go to file
Thomas Forgione 2e4f86979b Working on stuff 2023-05-25 12:01:45 +02:00
.gitignore Adds support for screenshots 2023-02-24 17:12:52 +01:00
README.md Adds support for screenshots 2023-02-24 17:12:52 +01:00
image.js Locator starts working great 2023-03-01 17:46:37 +01:00
index.js Working on stuff 2023-05-25 12:01:45 +02:00
package-lock.json Adds support for screenshots 2023-02-24 17:12:52 +01:00
package.json Locator starts working great 2023-03-01 17:46:37 +01:00

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