{"id":13527305,"url":"https://github.com/alibaba/uirecorder","last_synced_at":"2025-05-14T16:04:03.104Z","repository":{"id":37733320,"uuid":"64893263","full_name":"alibaba/uirecorder","owner":"alibaba","description":"UI Recorder is a  multi-platform UI test recorder.","archived":false,"fork":false,"pushed_at":"2023-04-17T09:37:31.000Z","size":51053,"stargazers_count":2068,"open_issues_count":99,"forks_count":397,"subscribers_count":97,"default_branch":"master","last_synced_at":"2025-04-05T19:08:25.390Z","etag":null,"topics":["nodejs","recorder","selenium","uitest","webdriver"],"latest_commit_sha":null,"homepage":"http://uirecorder.com/","language":"JavaScript","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/alibaba.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGE.md","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}},"created_at":"2016-08-04T01:57:03.000Z","updated_at":"2025-03-25T09:31:47.000Z","dependencies_parsed_at":"2023-10-20T16:37:43.026Z","dependency_job_id":null,"html_url":"https://github.com/alibaba/uirecorder","commit_stats":{"total_commits":268,"total_committers":17,"mean_commits":"15.764705882352942","dds":"0.30597014925373134","last_synced_commit":"72d08a133545b0cb34b424aa835529fd813d673d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fuirecorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fuirecorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fuirecorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fuirecorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alibaba","download_url":"https://codeload.github.com/alibaba/uirecorder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631630,"owners_count":21136553,"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":["nodejs","recorder","selenium","uitest","webdriver"],"created_at":"2024-08-01T06:01:45.382Z","updated_at":"2025-04-12T20:37:59.526Z","avatar_url":"https://github.com/alibaba.png","language":"JavaScript","readme":"# UI Recorder\n\n---\n\n![logo.png](https://raw.github.com/alibaba/uirecorder/master/logo.png)\n\n[![NPM version](https://img.shields.io/npm/v/uirecorder.svg)](https://www.npmjs.com/package/uirecorder)\n[![License](https://img.shields.io/npm/l/uirecorder.svg)](https://www.npmjs.com/package/uirecorder)\n[![NPM count](https://img.shields.io/npm/dm/uirecorder.svg)](https://www.npmjs.com/package/uirecorder)\n[![NPM count](https://img.shields.io/npm/dt/uirecorder.svg)](https://www.npmjs.com/package/uirecorder)\n[![TesterHome](https://img.shields.io/badge/TTF-TesterHome-2955C5.svg)](https://testerhome.com/github_statistics)\n\nUI Recorder is multi-platform UI test case recorder like [Selenium IDE](http://docs.seleniumhq.org/projects/ide/) but more powerful than Selenium IDE!\n\nUI Recorder is easy to use, even zero cost.\n\n1. Official Site: [https://www.yuque.com/artist/uirecorder/](https://www.yuque.com/artist/uirecorder/)\n2. Language Switch: [English](https://github.com/alibaba/uirecorder/blob/master/README.md), [中文](https://github.com/alibaba/uirecorder/blob/master/README_zh-cn.md)\n3. Change log: [CHANGE](https://github.com/alibaba/uirecorder/blob/master/CHANGE.md)\n4. Video Tutorial：[PC中文教程](http://v.youku.com/v_show/id_XMTY4NTk5NjI4MA==.html)\n\n\n# Features\n\n1. Support all user operation: key event, mouse event, alert, file upload, drag, svg, shadow dom\n2. Support mobile native APP(Android, iOS) recorde, powered by [Macaca](https://macacajs.github.io)\n3. No interference when recording: the same as self test\n4. Record test file saved in local\n5. Support kinds of expect: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage\n6. Support image diff\n7. Support powerful var string\n8. Support common test case: one case call another\n9. Support parallel test\n10. Support i18n: en, zh-cn, zh-tw\n11. Support screenshots after each step\n12. Support HTML report \u0026 JUnit report\n13. Support multi systems: Windows, Mac, Linux\n14. Test file base on NodeJs: [jWebDriver](http://jwebdriver.com/)\n\n\u003c!-- GITCONTRIBUTOR_START --\u003e\n\n# Contributors\n\n|[\u003cimg src=\"https://avatars.githubusercontent.com/u/62272417?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eitestauipi\u003c/b\u003e\u003c/sub\u003e](https://github.com/itestauipi)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/18617837?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eStngle\u003c/b\u003e\u003c/sub\u003e](https://github.com/Stngle)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/970390?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eyaniswang\u003c/b\u003e\u003c/sub\u003e](https://github.com/yaniswang)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/1011681?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003exudafeng\u003c/b\u003e\u003c/sub\u003e](https://github.com/xudafeng)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/7446962?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eundead25\u003c/b\u003e\u003c/sub\u003e](https://github.com/undead25)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/5198256?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003estevobm\u003c/b\u003e\u003c/sub\u003e](https://github.com/stevobm)\u003cbr/\u003e|\n| :---: | :---: | :---: | :---: | :---: | :---: |\n|[\u003cimg src=\"https://avatars.githubusercontent.com/u/8197272?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003emicosty\u003c/b\u003e\u003c/sub\u003e](https://github.com/micosty)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/73584840?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eali-lion\u003c/b\u003e\u003c/sub\u003e](https://github.com/ali-lion)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/13583768?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003ealibaba-oss\u003c/b\u003e\u003c/sub\u003e](https://github.com/alibaba-oss)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/14184989?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003efelizalde\u003c/b\u003e\u003c/sub\u003e](https://github.com/felizalde)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/977025?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eportokallidis\u003c/b\u003e\u003c/sub\u003e](https://github.com/portokallidis)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/52845048?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003esnapre\u003c/b\u003e\u003c/sub\u003e](https://github.com/snapre)\u003cbr/\u003e|\n[\u003cimg src=\"https://avatars.githubusercontent.com/u/1209810?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eparadite\u003c/b\u003e\u003c/sub\u003e](https://github.com/paradite)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/24625264?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003eWingOfTime\u003c/b\u003e\u003c/sub\u003e](https://github.com/WingOfTime)\u003cbr/\u003e|[\u003cimg src=\"https://avatars.githubusercontent.com/u/8609783?v=4\" width=\"100px;\"/\u003e\u003cbr/\u003e\u003csub\u003e\u003cb\u003ezquancai\u003c/b\u003e\u003c/sub\u003e](https://github.com/zquancai)\u003cbr/\u003e\n\nThis project follows the git-contributor [spec](https://github.com/xudafeng/git-contributor), auto updated at `Sat Apr 30 2022 21:11:26 GMT+0800`.\n\n\u003c!-- GITCONTRIBUTOR_END --\u003e\n\n# Screenshots\n\n![shot1](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot1.png)\n\n![shot2](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot2.png)\n\n![shot3](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot3.png)\n\n![shot4](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot4.png)\n\n# Video demo\n\n\n![video1](http://wx1.sinaimg.cn/mw1024/7f3afc78gy1fdf5gass5rg20sg0g0kjo.gif)\n\n![video2](http://wx2.sinaimg.cn/mw1024/7f3afc78gy1fdf5hb8anig20sg0g0u12.gif)\n\n# Quick start\n\n\n## Install\n\n1. Install NodeJs (version \u003e= v7.x)\n\n    \u003e [https://nodejs.org/](https://nodejs.org/)\n\n    \u003e `sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}` (Mac, Linux)\n\n2. Install chrome\n\n    \u003e [https://www.google.com/chrome/](https://www.google.com/chrome/)\n\n3. Install UI Recorder\n\n    \u003e `npm install uirecorder mocha -g`\n\n## PC record\n\n\n1. Init test project\n\n    \u003e Create new folder\n\n    \u003e `uirecorder init`\n\n2. Start record test case\n\n    \u003e edit hosts file\n\n    \u003e `uirecorder sample/test.spec.js`\n\n3. Start WebDriver Server\n\n4. Run test case\n\n    \u003e Run all case: `source run.sh` ( Linux|Mac ) or `run.bat` ( Windows )\n\n    \u003e Run single case: `source run.sh sample/test.spec.js` ( Linux|Mac ) or `run.bat sample/test.spec.js` ( Windows )\n\n5. Get reports \u0026 screenshots\n\n    \u003e ./reports/index.html\n\n    \u003e ./reports/index.xml (JUnit)\n\n    \u003e ./reports/index.json\n\n    \u003e ./screenshots/\n\n## More Platform Support\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"//macacajs.github.io\"\u003e\n    \u003cimg\n      alt=\"Macaca\"\n      src=\"https://macacajs.github.io/logo/macaca.svg\"\n      width=\"200\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n1. Install \u0026 start macaca server:\n\n    \u003e Install [Macaca](http://macacajs.github.io)\n\n    \u003e Connect your mobile or open emulator\n\n    \u003e `macaca server --port 4444`\n\n2. Init test project\n\n    \u003e Create new folder\n\n    \u003e `uirecorder init --mobile`\n\n3. Start record test case\n\n    \u003e `uirecorder --mobile sample/test.spec.js`\n\n4. Run test case\n\n    \u003e Run all case: `source run.sh` ( Linux|Mac ) or `run.bat` ( Windows )\n\n    \u003e Run single case: `source run.sh sample/test.spec.js` ( Linux|Mac ) or `run.bat sample/test.spec.js` ( Windows )\n\n5. Get reports \u0026 screenshots\n\n    \u003e ./reports/index.html\n\n    \u003e ./reports/index.xml (JUnit)\n\n    \u003e ./reports/index.json\n\n    \u003e ./screenshots/\n\n# Documentation Translations\n\n1. [中文使用手册](https://github.com/alibaba/uirecorder/blob/master/doc/zh-cn/readme.md)\n\n# QA\n\n## How to debug test code\n\n1. Install [Visual Studio Code](https://code.visualstudio.com/) \u0026 open Visual Studio Code\n2. Open the project root folder by vs code\n3. Open test file, add break point\n4. press `F5` key to start, press `F10` key to run next line\n\n## How to deploy WebDriver Server\n\n1. How to run selenium standalone server?\n\n    \u003e `npm run server`\n\n2. Selenium Grid: [https://github.com/SeleniumHQ/selenium/wiki/Grid2](https://github.com/SeleniumHQ/selenium/wiki/Grid2)\n3. F2etest: [https://github.com/alibaba/f2etest](https://github.com/alibaba/f2etest)\n\n## How to change webdriver host \u0026 port by env temporary, debug for local?\n\n1. `export webdriver=127.0.0.1:4444` or `set webdriver=127.0.0.1:4444` (Windows)\n\nTip: port is not required, For example: `export webdriver=127.0.0.1`\n\n## How to dock Jenkins?\n\n1. Add commands\n\n        source ./install.sh\n        source ./run.sh\n\n2. Add reports\n\n    \u003e [JUnit](https://wiki.jenkins-ci.org/display/JENKINS/JUnit+Plugin): `reports/index.xml`\n\n    \u003e [HTML](https://wiki.jenkins-ci.org/display/JENKINS/HTML+Publisher+Plugin): `reports/index.html`\n\n## How to filter unstable path\n\n1. Because some attribute values are random or unstable, we can't record a stable CSS selector\n2. We can filter the attributes with a blacklist. You can type `uirecorder init` and then input the blacklist from the command line\n\nTip: blacklist is a regex, you can use it like this: `/attr_\\d+/`\n\n## How to record common test case?\n\n1. Record `commons/login.mod.js`\n2. Record `sample/test.spec.js`\n\n    1. please input `login.mod.js` in recorder start page or jump test case in page\n    2. After `login.mod.js` loaded, then recorder other steps\n\n3. `source run.sh` ( Linux|Mac ) or `run.bat` ( Windows )\n\n## How to record file upload?\n\n1. UI Recorder only support native file compont\n2. direct click `\u003cinput type=\"file\"\u003e` or click `\u003cbutton role=\"upload\"\u003eUpload file\u003c/button\u003e`, the placeholder button must mark as `upload` with `role` or `data-role`\n3. File must save to `uploadfiles/` directory\n\n## How to use vars\n\nedit config.json\n\n    {\n        \"recorder\": {\n            ...\n        },\n        \"webdriver\": {\n            ...\n        },\n        \"vars\": {\n            \"productId\": \"123456\",\n            \"productName\": \"mp3\"\n        }\n    }\n\n1. start with url: `http://xxx.com/product?id={{productId}}`\n2. add new var with tool panel\n3. update var with tool panel\n4. jump url with tool panel: `http://xxx.com/product?id={{productId}}`\n5. insert vars string with tool panel: `{{productName}}` or `aaa{{productName}}bbb`\n6. expect to var string: `{{productName}}` or `aaa{{productName}}bbb`\n\nTip: All var string also support js template string, For example: `{{productName}}, ${new Date().getTime()}, ${parseInt(testVars.a)+parseInt(testVars.b)}`\n\n\n## How to add hover multiple or add expect after a hover?\n\n1. Press down `Ctrl` or `Command` button\n2. Click `Add Hover` Button, enter hover mode\n3. Release `Ctrl` or `Command` button\n4. Click the dom you want to hover (can add multiple)\n5. Click `Add Expect` Button\n6. Click the dom you want to expect\n7. Press `Esc` button or click `End Hover` Button, exit hover mode\n\n## How to expect the value after js eval in front browser?\n\n1. `Add Expect`, select type `jscode`\n2. sync mode: `return document.title`\n3. function mode:\n\n        function(){\n            var str = \"aaa\";\n            return str;\n        }\n\n4. async mode:\n\n        function(done){\n            setTimeout(function(){\n                done(123);\n            }, 100);\n        }\n\n## How to hide doms before expect?\n\n1. `uirecorder init`\n2. Input css selector when init `Hide before expect`\n3. `uirecorder start`\n4. UIRecorder will hide matched doms before expect, then you can expect the dom behind the mask div\n\n## How to record option click?\n\nSome steps is not very important, but occasionally displayed, this steps will expect to success always.\n\n1. Press 'Alt' button\n2. Click the target DOM\n\n## How to use image diff?\n\n1. Install GraphicsMagick\n\n    \u003e brew install graphicsmagick (Mac)\n\n    \u003e sudo apt-get install graphicsmagick (Linux)\n\n    \u003e http://www.graphicsmagick.org/download.html (Windows)\n\n2. Add expect with imgdiff\n\n    \u003e select expect type: imgdiff\n\n    \u003e select target element\n\n3. Rebuild the baseline image\n\n    \u003e `source run.sh sample/test.spec.js --rebuilddiff` (Mac | Linux)\n\n    \u003e `run.bat sample/test.spec.js --rebuilddiff` (Windows)\n\n## Can't do when recording\n\n1. don't change url in location bar\n2. don't change focus by TAB key\n3. don't use dblclick, WebDriver no support\n4. don't select text by mouse, WebDriver no support\n5. don't focus to background window manualy\n6. don't click useless DOM, only record key steps\n\n## How develop test friendly code?\n\n1. please dont't use random id or name\n2. please name a id for DOM area\n3. add label for form\n4. please listen click event instead of mousedown\n\n## How to set udid to mobile test?\n\n1. `export devices=xxx1,xxx2` (windows: `set devices=xxx1,xxx2`)\n2. `source run.sh` ( Linux|Mac ) or `run.bat` ( Windows )\n\n## How to save raw cmds json?\n\n1. `uirecorder start --raw`\n2. After test saved, then you can get 2 files: `sample/test.spec.js`, `sample/test.spec.json`\n\n## Other Tips\n\n1. Mac system: localhost must place in hosts\n\n# License\n\nUIRecorder is released under the MIT license.\n\n# Thanks\n\n* jWebDriver: [https://github.com/yaniswang/jWebDriver](https://github.com/yaniswang/jWebDriver)\n* chai: [https://github.com/chaijs/chai](https://github.com/chaijs/chai)\n* macaca-mocha-parallel-tests: [https://github.com/macacajs/macaca-mocha-parallel-tests](https://github.com/macacajs/macaca-mocha-parallel-tests)\n* macaca-reporter: [https://github.com/macacajs/macaca-reporter](https://github.com/macacajs/macaca-reporter)\n","funding_links":[],"categories":["Repository","JavaScript"],"sub_categories":["Testing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2Fuirecorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falibaba%2Fuirecorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2Fuirecorder/lists"}