{"id":14385282,"url":"https://github.com/axemclion/karma-telemetry","last_synced_at":"2025-03-24T08:33:54.583Z","repository":{"id":57288577,"uuid":"13946780","full_name":"axemclion/karma-telemetry","owner":"axemclion","description":"Karma Framework for running performance tasks using Telemetry","archived":false,"fork":false,"pushed_at":"2019-05-29T17:14:30.000Z","size":25,"stargazers_count":37,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-19T03:37:10.937Z","etag":null,"topics":["angular","karma","performance","web-performance"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/axemclion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-29T04:47:32.000Z","updated_at":"2022-02-08T10:51:05.000Z","dependencies_parsed_at":"2022-09-09T23:00:15.997Z","dependency_job_id":null,"html_url":"https://github.com/axemclion/karma-telemetry","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axemclion%2Fkarma-telemetry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axemclion%2Fkarma-telemetry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axemclion%2Fkarma-telemetry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axemclion%2Fkarma-telemetry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/axemclion","download_url":"https://codeload.github.com/axemclion/karma-telemetry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245235904,"owners_count":20582337,"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":["angular","karma","performance","web-performance"],"created_at":"2024-08-28T18:02:05.075Z","updated_at":"2025-03-24T08:33:54.306Z","avatar_url":"https://github.com/axemclion.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"#karma-telemetry\r\n\r\n\u003e Adapter for running the [Chromium Telemetry](http://www.chromium.org/developers/telemetry) performance benchmarks for [Karma](https://github.com/karma-runner/karma).\r\n\r\n## About\r\nThis plugin runs with Karma and is ideal for testing the rendering performance of components in frameworks. It reports various rendering metrics like first paint time, mean frame time, load time, etc. It can be integrated with continuous integration systems to ensure that the performance of components do not degrade over time.\r\n\r\n### Usage Example\r\nIt can be used for [Topcoat](http://topcoat.io) components to generate graphs like [these](http://bench.topcoat.io). When expensive styles with blur or gradients are added, the performance of components may suffer and this plugin could be used to catch them. \r\n\r\n### Try it out now !\r\n1. Clone this project\r\n2. Run `npm install`\r\n3. Run `grunt test` (or `karma start`, if you have karma installed).  \r\n4. You should see browsers open and a gradient-circle scroll.\r\n5. Once the browsers close, open `test-results.xml` (or the `test-results` folder) to see the various rendering performance metrics that were recorded. \r\n\r\n## Installation\r\n\r\nThe easiest way is to keep `karma-telemetry` as a devDependency in your `package.json`.\r\n\r\n```json\r\n{\r\n  \"devDependencies\": {\r\n    \"karma\": \"~0.10\",\r\n    \"karma-telemetry\": \"*\"\r\n  }\r\n}\r\n```\r\n\r\nYou can simple do it by:\r\n\r\n```bash\r\nnpm install karma-telemetry --save-dev\r\n```\r\n\r\nSince this is a Karma framework, you would need to use the [Karma](http://karma-runner.github.io) testing framework. \r\n\r\n\r\n### Configuration\r\nFollowing code shows the default configuration.\r\n\r\n```js\r\n// karma.conf.js\r\nmodule.exports = function(config) {\r\n  config.set({\r\n    // This is the name of the framework for running telemetry\r\n    frameworks: ['telemetry'],\r\n\r\n    // We need to open the test cases in a new window instead of an iFrame\r\n    // To be able to record the paint times accurately \r\n    client: {\r\n      useIframe: false\r\n    },\r\n\r\n    // Each test case represents a rendering metric.\r\n    // The Junit reporter can be used to see times of individual metrics\r\n    reporters: ['junit', 'progress'],\r\n    junitReporter: {\r\n      outputFile: 'test-results/test-results.xml',\r\n      suite: ''\r\n    },\r\n\r\n    // To enable more accurate rendering benchmarking, firefox and chrome have to be started with special flags. \r\n    // Other browsers can be started normally\r\n    browsers: [\r\n      'firefox_perf',\r\n      'chrome_perf'\r\n    ],\r\n    customLaunchers: {\r\n      chrome_perf: {\r\n        base: 'Chrome',\r\n        flags: ['--disable-popup-blocking', '--enable-gpu-benchmarking', '--enable-threaded-compositing']\r\n      },\r\n      firefox_perf: {\r\n        base: 'Firefox',\r\n        prefs: {\r\n          'dom.send_after_paint_to_content': true,\r\n          'dom.disable_open_during_load': false\r\n        }\r\n      },\r\n\r\n      // Browsers on Saucelabs also need the following configuration\r\n      sauce_chrome: {\r\n        base: 'SauceLabs',\r\n        browserName: 'chrome',\r\n        chromeOptions: {\r\n          args: ['--enable-gpu-benchmarking', '--disable-popup-blocking', '--enable-thread-composting']\r\n        },\r\n        'disable-popup-handler': true\r\n      },\r\n\r\n      // In case of firefox, remember to install the firefox profile creator. \r\n      // This is a modified version of the firefox-profile-js with a Synchronous method and can be installed using\r\n      // $ npm install axemclion/firefox-profile-js\r\n      sauce_firefox: {\r\n        base: 'SauceLabs',\r\n        browserName: 'firefox',\r\n        firefox_profile: (function() {\r\n          // Note that the firefox-profile module is \r\n          var FirefoxProfile = require('firefox-profile');\r\n          var fp = new FirefoxProfile();\r\n          fp.setPreference('dom.send_after_paint_to_content', true);\r\n          fp.setPreference('dom.disable_open_during_load', false);\r\n          fp.updatePreferences();\r\n          return fp.encodedSync();\r\n        }()),\r\n        'disable-popup-handler': true\r\n      }\r\n    },\r\n  });\r\n};\r\n```\r\n\r\nIn case of using Firefox on saucelabs, remember to install the firefox profile generator using `npm install axemclion/firefox-profile-js`. You can look at the project's karma.conf.js for a full configuration\r\n\r\n### Writing tests\r\nNote that Karma adds all the Javascript test files into a single HTML file for testing. It is ideal to test one component at a time and hence it may be better to dynamically generate a karma configuration for each test case. In case of grunt, look at the defination of the test task in `Gruntfile.js`. \r\nThe test case should append the component to the document body sufficient number of times to allow the page to scroll. Look at `test/test.js` for an example. \r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxemclion%2Fkarma-telemetry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxemclion%2Fkarma-telemetry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxemclion%2Fkarma-telemetry/lists"}