{"id":17845775,"url":"https://github.com/mcastagnetti/metrx","last_synced_at":"2025-03-20T07:30:30.076Z","repository":{"id":42933649,"uuid":"237929692","full_name":"mcastagnetti/metrx","owner":"mcastagnetti","description":"Measure web page performance metrics with ease. ","archived":false,"fork":false,"pushed_at":"2023-07-20T17:41:28.000Z","size":924,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T23:46:04.615Z","etag":null,"topics":["cli","hacktoberfest","metrics","performance","puppeteer","web-performance"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mcastagnetti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-03T09:33:47.000Z","updated_at":"2022-09-14T13:15:12.000Z","dependencies_parsed_at":"2024-10-27T22:27:16.524Z","dependency_job_id":"8250b48a-f26c-45b6-9c1d-0961e4b5521a","html_url":"https://github.com/mcastagnetti/metrx","commit_stats":{"total_commits":28,"total_committers":3,"mean_commits":9.333333333333334,"dds":0.1071428571428571,"last_synced_commit":"ef479e4c3caa5ff41995d19b2dd6ed24764c4dda"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcastagnetti%2Fmetrx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcastagnetti%2Fmetrx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcastagnetti%2Fmetrx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcastagnetti%2Fmetrx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcastagnetti","download_url":"https://codeload.github.com/mcastagnetti/metrx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243871650,"owners_count":20361378,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","hacktoberfest","metrics","performance","puppeteer","web-performance"],"created_at":"2024-10-27T21:36:57.658Z","updated_at":"2025-03-20T07:30:25.063Z","avatar_url":"https://github.com/mcastagnetti.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# metrx\n\nThis tool measures any web application performances.\n\nThis project uses [Puppeteer](https://github.com/GoogleChrome/puppeteer) to make painless automation.\n\n\u003cp align=\"center\"\u003e\n    \u003cbr\u003e\n        \u003cimg width=480 src=\"https://github.com/mcastagnetti/metrx/blob/master/metrx-example.gif?raw=true\" alt=\"metrx example\" /\u003e\n    \u003cbr\u003e\n\u003c/p\u003e\n\n## Installation\n\nTo install metrx :\n\n```bash\nnpm install -g metrx\n```\n\n## Usage\n\nTo run the application, just use :\n\n```bash\nnpx metrx \u003curl\u003e\n\n# Or if installed globally\nmetrx \u003curl\u003e\n```\n\nSeveral options are available to enhance metrics easily. Use `-h (--help)` to display them.\n\n```console\n➜ metrx -h\n\n  Usage: metrx [options] \u003curl ...\u003e\n\n  Measures web application loading metrics\n\n  Options:\n\n    -r, --repeat [n]                     The number of times the page metrics are measured (default: 5)\n    -w, --width [width]                  The viewport's width to set (default: 1920)\n    -H, --height [height]                The viewport's height to set (default: 1080)\n    -c, --custom-path [custom-path]      Path to custom path configuration file\n    -o, --output-format [output-format]  The desired output format (default: table)\n    --output-file [output-file]          Whether we want to export data in a file, and the desired path to the file\n    --wait-until [wait-until]            The waitUntil value of the Page.reload options accepted by puppeteer\n    --with-redirects                     Whether we want to test the timings of the whole redirect chain\n    --no-headless                        Defines if we dont want to use puppeteer headless mode\n    --no-sandbox                         Disable chrome sandbox mode, mandatory in some systems\n    -h, --help                           Output usage information\n```\n\n### Custom user path\n\nA custom file path can be set in the cli options. That way, you can tell puppeteer what it should do before measuring any kind of metric.\n\nThis option can be useful if you need to be logged in before being able to access your application.\n\nTo include your file into the process, just use `-c \u003crelative path to your file\u003e` option.\n\n```bash\nmetrx localhost:8000 -c '../../custom-path.mjs'\n```\n\nThe `custom-path.mjs` file must be an ES module that exports an async function as default export.\n\n```javascript\n// index.js: The custom path function is called like so :\nif (customPath) {\n    const customPathFunction = import(customPath);\n    await customPathFunction.default(page, logInfo);\n}\n\n// custom-path.js: example of login process\nconst LOGIN_INPUT = 'input[type=\"login\"]';\nconst PASSWORD_INPUT = 'input[type=\"password\"]';\n\nexport default async (page, logInfo) =\u003e {\n    const login = 'my-secret-login';\n    const password = 'my-really-secret-password';\n    const loginUrl = 'http://localhost:8080/login';\n\n    logInfo(`Loading ${loginUrl}`);\n\n    // Go to the login page url, and wait for the selector to be ready.\n    await page.goto(loginUrl);\n    await page.waitForSelector(LOGIN_INPUT);\n\n    logInfo('Logging in...');\n\n    // Type creditentials.\n    await page.type(LOGIN_INPUT, login);\n    await page.type(PASSWORD_INPUT, password);\n\n    logInfo('Redirecting');\n\n    // The process will continue once the redirect is resolved.\n    return page.waitForNavigation();\n};\n```\n\nThose functions have access to two arguments :\n\n-   `page` (The `Page` puppeteer object to be able to access the full [puppeteer page instance API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page))\n-   `logInfo` (To log custom informations)\n\n### Export data to a file\n\nYou can choose to export to multiple formats and export formated data to a file. For now, only `table`, `raw`, `json` and `csv` are available.\n`table` and `raw` data will be exported to a `txt` file. To use it, just type :\n\n```bash\nmetrx localhost:8000 --output-format json --output-file ~/results.json\n```\n\nIf you don't provide any filename, a file will automatically be created in your current directory.\n\n### \"Wait until\" option\n\nTo make a page reload, `metrx` does a `Page.reload()` from puppeteer's `Page` object. This object accepts a `waitUntil` parameter, which defines when the page navigation has succeeded, and when the application should collect the metrics and reload the page. You can find more information about `Page.reload()` [right here](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagereloadoptions).\n\nTo use, just add the `--wait-until` flag and the desired options. Since `Page.reload` accepts either a `String` or an `Array` of `Strings`, if you want to add multiple values, just split them with a `,`\n\nFor example:\n\n```bash\nmetrx localhost:8000 --wait-until networkidle0,load\n```\n\n## Development\n\nTo contribute, just run the following commands :\n\n```shell\ngit clone https://github.com/mcastagnetti/metrx.git\n\ncd metrx\n\nnpm install\n```\n\nThen, to use `metrx` just run it via `cli.js`, for example :\n\n```shell\n./cli.js http://localhost:8000\n```\n\n## Useful Resources\n\n-   [Commander documentation](https://github.com/tj/commander.js)\n-   [Puppeteer API](https://pptr.dev/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcastagnetti%2Fmetrx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcastagnetti%2Fmetrx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcastagnetti%2Fmetrx/lists"}