Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
June 13, 2017 10:57
November 17, 2020 21:04
July 24, 2017 21:09
November 20, 2020 11:32
September 25, 2020 14:57
June 27, 2019 16:19
November 18, 2020 10:48
November 18, 2020 10:48
August 4, 2016 10:06
June 27, 2019 16:19
November 29, 2016 12:13
October 29, 2020 11:38
August 11, 2017 11:24
April 30, 2022 21:20
October 21, 2021 15:06
October 19, 2016 15:23
August 4, 2016 10:06
November 20, 2020 11:33
November 20, 2020 11:33
August 4, 2016 10:06

UI Recorder


NPM version License NPM count NPM count TesterHome

UI Recorder is multi-platform UI test case recorder like Selenium IDE but more powerful than Selenium IDE!

UI Recorder is easy to use, even zero cost.

  1. Official Site:
  2. Language Switch: English, 中文
  3. Change log: CHANGE
  4. Video Tutorial:PC中文教程


  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
  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

















This project follows the git-contributor spec, auto updated at Sat Apr 30 2022 21:11:26 GMT+0800.






Video demo



Quick start


  1. Install NodeJs (version >= v7.x)

    sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} (Mac, Linux)

  2. Install 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 ( Linux|Mac ) or run.bat ( Windows )

    Run single case: source sample/test.spec.js ( Linux|Mac ) or run.bat sample/test.spec.js ( Windows )

  5. Get reports & screenshots


    ./reports/index.xml (JUnit)



More Platform Support


  1. Install & start macaca server:

    Install Macaca

    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 ( Linux|Mac ) or run.bat ( Windows )

    Run single case: source sample/test.spec.js ( Linux|Mac ) or run.bat sample/test.spec.js ( Windows )

  5. Get reports & screenshots


    ./reports/index.xml (JUnit)



Documentation Translations

  1. 中文使用手册


How to debug test code

  1. Install Visual Studio Code & 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:

  3. F2etest:

How to change webdriver host & port by env temporary, debug for local?

  1. export webdriver= or set webdriver= (Windows)

Tip: port is not required, For example: export webdriver=

How to dock Jenkins?

  1. Add commands

     source ./
     source ./
  2. Add reports

    JUnit: reports/index.xml

    HTML: 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 ( 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:{{productId}}
  2. add new var with tool panel
  3. update var with tool panel
  4. jump url with tool panel:{{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:

         var str = "aaa";
         return str;
  4. async mode:

         }, 100);

How to hide doms before expect?

  1. uirecorder init
  2. Input css selector when init Hide before expect
  3. uirecorder start
  4. UIRecorder will hide matched doms before expect, then you can expect the dom behind the mask div

How to record option click?

Some steps is not very important, but occasionally displayed, this steps will expect to success always.

  1. Press 'Alt' button
  2. Click the target DOM

How to use image diff?

  1. Install GraphicsMagick

    brew install graphicsmagick (Mac)

    sudo apt-get install graphicsmagick (Linux) (Windows)

  2. Add expect with imgdiff

    select expect type: imgdiff

    select target element

  3. Rebuild the baseline image

    source sample/test.spec.js --rebuilddiff (Mac | Linux)

    run.bat sample/test.spec.js --rebuilddiff (Windows)

Can't do when recording

  1. don't change url in location bar
  2. don't change focus by TAB key
  3. don't use dblclick, WebDriver no support
  4. don't select text by mouse, WebDriver no support
  5. don't focus to background window manualy
  6. don't click useless DOM, only record key steps

How develop test friendly code?

  1. please dont't use random id or name
  2. please name a id for DOM area
  3. add label for form
  4. please listen click event instead of mousedown

How to set udid to mobile test?

  1. export devices=xxx1,xxx2 (windows: set devices=xxx1,xxx2)
  2. source ( Linux|Mac ) or run.bat ( Windows )

How to save raw cmds json?

  1. uirecorder start --raw
  2. After test saved, then you can get 2 files: sample/test.spec.js, sample/test.spec.json

Other Tips

  1. Mac system: localhost must place in hosts


UIRecorder is released under the MIT license.