uirecorder, UI记录器是一个类似 selenium IDE的UI测试用例记录器.zip

# UI Recorder ---  [](https://www.npmjs.com/package/uirecorder) [](https://www.npmjs.com/package/uirecorder) [](https://www.npmjs.com/package/uirecorder) [](https://www.npmjs.com/package/uirecorder) UI Recorder is multi-platform UI test case recorder like [Selenium IDE](http://docs.seleniumhq.org/projects/ide/) but more powerful than Selenium IDE! UI Recorder is easy to use, even zero cost. 1. Official Site: [http://uirecorder.com/](http://uirecorder.com/) 2. Language Switch: [English](https://github.com/alibaba/uirecorder/blob/master/README.md), [中文](https://github.com/alibaba/uirecorder/blob/master/README_zh-cn.md) 3. Change log: [CHANGE](https://github.com/alibaba/uirecorder/blob/master/CHANGE.md) 4. Video Tutorial：[PC中文教程](http://v.youku.com/v_show/id_XMTY4NTk5NjI4MA==.html) # Features 1. Support all user operation: key event, mouse event, alert, file upload, drag, svg, shadow dom 2. Support mobile native APP(Android, iOS) recorde, powered by [Macaca](https://macacajs.github.io) 3. No interference when recording: the same as self test 4. Record test file saved in local 5. Support kinds of expect: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage 6. Support image diff 7. Support powerful var string 8. Support common test case: one case call another 9. Support parallel test 10. Support i18n: en, zh-cn, zh-tw 11. Support screenshots after each step 12. Support HTML report & JUnit report 13. Support multi systems: Windows, Mac, Linux 14. Test file base on NodeJs: [jWebDriver](http://jwebdriver.com/) # Screenshots     # Video demo   # Quick start ## Install 1. Install NodeJs (version >= v7.x) > [https://nodejs.org/](https://nodejs.org/) > `sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}` (Mac, Linux) 2. Install chrome > [https://www.google.com/chrome/](https://www.google.com/chrome/) 3. Install UI Recorder > `npm install uirecorder mocha -g` ## PC record 1. Init test project > Create new folder > `uirecorder init` 2. Start record test case > edit hosts file > `uirecorder sample/test.spec.js` 3. Start WebDriver Server 4. Run test case > Run all case: `source run.sh` ( Linux|Mac ) or `run.bat` ( Windows ) > Run single case: `source run.sh sample/test.spec.js` ( Linux|Mac ) or `run.bat sample/test.spec.js` ( Windows ) 5. Get reports & screenshots > ./reports/index.html > ./reports/index.xml (JUnit) > ./reports/index.json > ./screenshots/ ## More Platform Support <p align="center"> <a href="//macacajs.github.io" rel='nofollow' onclick='return false;'> <img alt="Macaca" src="https://macacajs.github.io/macaca-logo/svg/monkey.svg" width="200" /> </a> </p> 1. Install & start macaca server: > Install [Macaca](http://macacajs.github.io) > Connect your mobile or open emulator > `macaca server --port 4444` 2. Init test project > Create new folder > `uirecorder init --mobile` 3. Start record test case > `uirecorder --mobile sample/test.spec.js` 4. Run test case > Run all case: `source run.sh` ( Linux|Mac ) or `run.bat` ( Windows ) > Run single case: `source run.sh sample/test.spec.js` ( Linux|Mac ) or `run.bat sample/test.spec.js` ( Windows ) 5. Get reports & screenshots > ./reports/index.html > ./reports/index.xml (JUnit) > ./reports/index.json > ./screenshots/ # Documentation Translations 1. [中文使用手册](https://github.com/alibaba/uirecorder/blob/master/doc/zh-cn/readme.md) # QA ## How to debug test code 1. Install [Visual Studio Code](https://code.visualstudio.com/) & open Visual Studio Code 2. Open the project root folder by vs code 3. Open test file, add break point 4. press `F5` key to start, press `F10` key to run next line ## How to deploy WebDriver Server 1. How to run selenium standalone server? > `npm run server` 2. Selenium Grid: [https://github.com/SeleniumHQ/selenium/wiki/Grid2](https://github.com/SeleniumHQ/selenium/wiki/Grid2) 3. F2etest: [https://github.com/alibaba/f2etest](https://github.com/alibaba/f2etest) ## How to change webdriver host & port by env temporary, debug for local? 1. `export webdriver=127.0.0.1:4444` or `set webdriver=127.0.0.1:4444` (Windows) Tip: port is not required, For example: `export webdriver=127.0.0.1` ## How to dock Jenkins? 1. Add commands source ./install.sh source ./run.sh 2. Add reports > [JUnit](https://wiki.jenkins-ci.org/display/JENKINS/JUnit+Plugin): `reports/index.xml` > [HTML](https://wiki.jenkins-ci.org/display/JENKINS/HTML+Publisher+Plugin): `reports/index.html` ## How to filter unstable path 1. Because some attribute values are random or unstable, we can't record a stable CSS selector 2. We can filter the attributes with a blacklist. You can type `uirecorder init` and then input the blacklist from the command line Tip: blacklist is a regex, you can use it like this: `/attr_\d+/` ## How to record common test case? 1. Record `commons/login.mod.js` 2. Record `sample/test.spec.js` 1. please input `login.mod.js` in recorder start page or jump test case in page 2. After `login.mod.js` loaded, then recorder other steps 3. `source run.sh` ( Linux|Mac ) or `run.bat` ( Windows ) ## How to record file upload? 1. UI Recorder only support native file compont 2. direct click `<input type="file">` or click `<button role="upload">Upload file</button>`, the placeholder button must mark as `upload` with `role` or `data-role` 3. File must save to `uploadfiles/` directory ## How to use vars edit config.json { "recorder": { ... }, "webdriver": { ... }, "vars": { "productId": "123456", "productName": "mp3" } } 1. start with url: `http://xxx.com/product?id={{productId}}` 2. add new var with tool panel 3. update var with tool panel 4. jump url with tool panel: `http://xxx.com/product?id={{productId}}` 5. insert vars string with tool panel: `{{productName}}` or `aaa{{productName}}bbb` 6. expect to var string: `{{productName}}` or `aaa{{productName}}bbb` Tip: All var string also support js template string, For example: `{{productName}}, ${new Date().getTime()}, ${parseInt(testVars.a)+parseInt(testVars.b)}` ## How to add hover multiple or add expect after a hover? 1. Press down `Ctrl` or `Command` button 2. Click `Add Hover` Button, enter hover mode 3. Release `Ctrl` or `Command` button 4. Click the dom you want to hover (can add multiple) 5. Click `Add Expect` Button 6. Click the dom you want to expect 7. Press `Esc` button or click `End Hover` Button, exit hover mode ## How to expect the value after js eval in front browser? 1. `Add Expect`, select type `jscode` 2. sync mode: `return document.title` 3. function mode: function(){ var str = "aaa"; return str; } 4. async mode: function(done){ setTimeout(function(){ done(123); }, 100); } ## How to hide doms before expect? 1. `uirecorder init`