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

  • J8_206802
    了解作者
  • 1.2MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-24 01:51
    上传日期
uirecorder, UI记录器是一个类似 selenium IDE的UI测试用例记录器 用户界面记录器 UI记录器是一个零成本的UI测试用例记录器,如 selenium IDE 。用户界面记录器比 selenium 更强大 !用户界面记录器易于使用。官方网站:http://uirecorder.
uirecorder.zip
  • uirecorder-master
  • project
  • screenshots
  • screenshots.md
    28B
  • commons
  • commons.md
    34B
  • uploadfiles
  • uploadfiles.md
    31B
  • vslaunch.json
    960B
  • .gitignore1
    131B
  • install.sh
    118B
  • run.sh
    85B
  • README.md
    471B
  • run.bat
    93B
  • .editorconfig
    306B
  • hosts
    0B
  • package.json
    1.5KB
  • i18n
  • zh-cn.js
    5.8KB
  • zh-tw.js
    5.8KB
  • en.js
    5.6KB
  • .vscode
  • launch.json
    527B
  • lib
  • update.js
    1.1KB
  • start.js
    91.7KB
  • i18n.js
    412B
  • init.js
    8.6KB
  • chrome-extension
  • img
  • icon-64.png
    4.8KB
  • vars.png
    1.5KB
  • icon-128.png
    4.8KB
  • icon.png
    1.4KB
  • alert.png
    1.4KB
  • icon-record.png
    2.2KB
  • icon-disable.png
    2.2KB
  • back.png
    1.1KB
  • fail.png
    9.8KB
  • jscode.png
    1.5KB
  • mloading.gif
    33.4KB
  • hover.png
    1.6KB
  • cancel.png
    7.1KB
  • expect.png
    1.5KB
  • text.png
    934B
  • ok.png
    15.8KB
  • sleep.png
    7KB
  • warn.png
    12.3KB
  • end.png
    7.3KB
  • success.png
    12.9KB
  • jump.png
    15.7KB
  • js
  • jquery-3.4.1.min.js
    86.1KB
  • mobile.js
    26.2KB
  • background.js
    10.5KB
  • foreground.js
    104.1KB
  • start.js
    3.5KB
  • manifest.json
    1.2KB
  • start.html
    7.3KB
  • mobile.html
    3.9KB
  • doc
  • zh-cn
  • pc-advanced.md
    5.7KB
  • pc-faq.md
    286B
  • readme.md
    741B
  • pc-standard.md
    8.2KB
  • template
  • jwebdriver-mobile.js
    5.3KB
  • jwebdriver.js
    7.1KB
  • tool
  • uirecorder.crx
    166.4KB
  • bin
  • uirecorder
    3.5KB
  • screenshot
  • shot1.png
    60.1KB
  • shot3.png
    13.3KB
  • shot2.png
    32.7KB
  • shot4.png
    872.9KB
  • CHANGE.md
    14.1KB
  • buildcrx.bat
    215B
  • .npmignore
    88B
  • LICENSE
    1KB
  • uirecorder.pem
    1.7KB
  • README.md
    11.5KB
  • uirecorder.log
    463B
  • logo.png
    38.9KB
  • README_zh-cn.md
    5.1KB
  • .editorconfig
    306B
  • .gitignore
    44B
  • index.js
    236B
  • buildcrx.sh
    198B
  • package-lock.json
    112.1KB
  • package.json
    1KB
内容介绍
# UI Recorder --- ![logo.png](https://raw.github.com/alibaba/uirecorder/master/logo.png) [![NPM version](https://img.shields.io/npm/v/uirecorder.svg?style=flat-square)](https://www.npmjs.com/package/uirecorder) [![License](https://img.shields.io/npm/l/uirecorder.svg?style=flat-square)](https://www.npmjs.com/package/uirecorder) [![NPM count](https://img.shields.io/npm/dm/uirecorder.svg?style=flat-square)](https://www.npmjs.com/package/uirecorder) [![NPM count](https://img.shields.io/npm/dt/uirecorder.svg?style=flat-square)](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 ![shot1](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot1.png) ![shot2](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot2.png) ![shot3](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot3.png) ![shot4](https://raw.github.com/alibaba/uirecorder/master/screenshot/shot4.png) # Video demo ![video1](http://wx1.sinaimg.cn/mw1024/7f3afc78gy1fdf5gass5rg20sg0g0kjo.gif) ![video2](http://wx2.sinaimg.cn/mw1024/7f3afc78gy1fdf5hb8anig20sg0g0u12.gif) # 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`
评论
    相关推荐