{"id":28275778,"url":"https://github.com/quantuminformation/test-recorder","last_synced_at":"2026-02-25T23:33:21.215Z","repository":{"id":34934591,"uuid":"39005526","full_name":"quantuminformation/test-recorder","owner":"quantuminformation","description":"Records acceptance tests for web applications. Chat on  Supports Ember, Nightwatch, Chromeless (WIP). Soon TestCafe.","archived":false,"fork":false,"pushed_at":"2024-09-24T19:04:08.000Z","size":57759,"stargazers_count":49,"open_issues_count":23,"forks_count":7,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-10-12T01:39:49.084Z","etag":null,"topics":["vanilla-typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quantuminformation.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2015-07-13T10:20:41.000Z","updated_at":"2024-09-24T19:04:11.000Z","dependencies_parsed_at":"2024-10-02T01:32:06.700Z","dependency_job_id":"0507b5a4-333d-424e-9361-df91363e2e88","html_url":"https://github.com/quantuminformation/test-recorder","commit_stats":{"total_commits":77,"total_committers":3,"mean_commits":"25.666666666666668","dds":"0.11688311688311692","last_synced_commit":"f5812285e0365892b322f4036b7e335e9077eb61"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/quantuminformation/test-recorder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantuminformation%2Ftest-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantuminformation%2Ftest-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantuminformation%2Ftest-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantuminformation%2Ftest-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quantuminformation","download_url":"https://codeload.github.com/quantuminformation/test-recorder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quantuminformation%2Ftest-recorder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29844876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T22:37:40.667Z","status":"ssl_error","status_checked_at":"2026-02-25T22:37:25.960Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["vanilla-typescript"],"created_at":"2025-05-21T04:15:57.167Z","updated_at":"2026-02-25T23:33:21.201Z","avatar_url":"https://github.com/quantuminformation.png","language":"TypeScript","funding_links":["https://ko-fi.com/A325GAE"],"categories":[],"sub_categories":[],"readme":"# Sponsors\nIf you would like to be an official supporter of this project, please contact me, and I will place your logo here!\n# Donations\nIf this project is useful to you and you would like to support it, you are most welcome to buy me a coffee! https://ko-fi.com/A325GAE\n\n# test-recorder\nThe test-recorder records acceptance tests for the Ember-cli and Nightwatch testing frameworks.\nI am currently doing a WIP for Chromeless, but it is available in the Chrome extension\n\nThis project records the ways you interact with your application and then generates the code to playback these actions inside an acceptance test runner. \nThe idea is to save you time writing these tests by hand.\n \nYou should only add the TestRecorder.js script to your app when your app behaves as\nexpected (happy flow) as then you will have the tests generated for this. You can then take these tests and modify them to your specific needs.\n\n# Chrome extension\nThe Test Recorder has now been made into a [Chrome extension](https://chrome.google.com/webstore/detail/test-recorder/mehbmedddkpilcbbjcichiopegameghh) which makes it real easy for anyone to start recording tests in the browser. I include how it works in this video: as I bonus I also include my pastime of Skiing in London.\n    \n\u003ca href=\"http://www.youtube.com/watch?feature=player_embedded\u0026v=HhJFD3jr0oo\n\" target=\"_blank\"\u003e\u003cimg src=\"http://img.youtube.com/vi/HhJFD3jr0oo/0.jpg\" \nalt=\"IMAGE ALT TEXT HERE\" width=\"240\" height=\"180\" border=\"10\" /\u003e\u003c/a\u003e\n\n# Browser compatibility\n\nAs this is a pure dev tool, I only support recording your Applications on Chrome due to it having the features I need. I will support other browsers if I get enough support.\n\n\n# Installation\n`npm i --save-dev test-recorder`\n\n# Videos\n\nTo help you understand how it works I made a [video playlist](https://www.youtube.com/playlist?list=PLCrwuqjmVebKF6cpH-hcLpSXYhSNiO7g7)!\n\nFirst video of the series\n\n\u003ca href=\"http://www.youtube.com/watch?feature=player_embedded\u0026v=l4eCTUcPBp8\n\" target=\"_blank\"\u003e\u003cimg src=\"http://img.youtube.com/vi/l4eCTUcPBp8/0.jpg\" \nalt=\"IMAGE ALT TEXT HERE\" width=\"240\" height=\"180\" border=\"10\" /\u003e\u003c/a\u003e\n\n# Current UI interactions  recorded for acceptance tests:\n\n* Button clicks\n* Text input \n* Changes in DOM additions/removals (only if they have an id)\n\n# Settings\nIf you click on the settings (cog wheel) button a popup opens with various options:\n* Record all elements— this records mutations on all elements, default unchecked: only records elements with id's\n* Persist code — Saves the generated code to the output screen. This is useful for single page apps that refresh the page.\n* Keep recorder open - if the page is refreshed with the recorder open, it will open again.\n\n# Notes\n\nIf an element doesn't have an id then an exlusive dom path selector will be generated to click on this button in a test, ie\n```js\nclick(\"body\u003ediv\u003ediv:eq(0)\u003ebutton\");\nandThen(function () {\n equal(find(\"#foo\").length, 0, \"foo removed AFTER user [INSERT REASON]\");\n});\n```\n\nIf you don't want to record an element, and any of its children add this class to it `doNotRecord`\n\n\n# Generating tests in the text example app\n\n\nI have an example app inside /tests that can be used to create tests for the various test frameworks.\n \n* First you need to build the test project by running `npm i` and `webpack` inside `/tests`. \n* then you can open `tests/build/` in the browser to see the app running with the test recorder UI. \n* You can select what framework you are using and you can copy the code that is generated.\n* Once you have the tests generated you can paste the code into the actual test file inside the relevant test framework, e.g `tests/nightwatch/tests/index.test.js\n\nNote all the tests frameworks have a test example file for you to get started.\n\n\n# Importing the test-recorder with no build system\n\nImport the script and init the TestRecorder. Thats it! \n`\n\n```\u003cscript src=\"node_modules/test-recorder/test-recorder.js\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  var testRecorder = new TestRecorder.TestRecorder()\n\u003c/script\u003e\n```\n\n# Importing the test-recorder with a build system like webpack or gulp\n\nImport the script and init the TestRecorder. That's it! \n\n```js\nimport { TestRecorder } from 'test-recorder'\n\nlet testRecorder = new TestRecorder()\n```\n\n\n# Importing the test-recorder into an Ember-cli project\n\nImport the script and init the TestRecorder. Thats it! \n\n* copy the test-recorder script to vendor. You can add an npm script for this `\"copy\": \"cp node_modules/test-recorder/build/test-recorder.js vendor\"`\n* import the test recorder to ember-cli-build.js:\n`  app.import('vendor/test-recorder.js');`\n* In your app run: `let testRecorder = new TestRecorder.TestRecorder()`\n\n## Running nightwatch tests\n\n* Run `node tests/server.js`\n* run nightwatch inside of `test/nightwatch`\n\nThis uses `tests/nightwatch/nightwatch.json` as settings to to run test files in the  `tests/nightwatch/tests` folder.\n\n# Running Ember-cli tests\n\nJust paste in the output into the relevant place in your tests and run as normal. \n\nI maintain a fork [here](https://github.com/QuantumInformation/travis-web) of using the test-recorder with the travis-web app. \n\n## Roadmap\n* Record any changes to location (routes, html5, etc)\n* Allow select2 inputs to be automated\n* Create codes for key-presses \n* Get mutations to work with async effects to be configured with separate wait times\n* create tests for changes of lengths in lists\n* Create cucumber generator\n* Create protractor generator\n\n\n## UP for discussion\n* Ignore clicks on ember elements with no effect\n## TIPS\n\nAvoid making multiple button clicks (or other interactions that cause asynchronous) updates until DOM has \nfinished updating. This will allow code generated by the mutations observer to be placed in the in the\ngenerated code. \n\n# Limitations\nIt records as much of the grunt work that I can think of, but state will of course need to be managed by the end user, ie initial page navigations and login, app state needed to get the tests to work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantuminformation%2Ftest-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquantuminformation%2Ftest-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquantuminformation%2Ftest-recorder/lists"}