UI Recorder - Selenium IDE substitution made by node.js

Selenium IDE has stopped working on the latest Firefox. Along with this, development seems to have started also with IDE running with a new API, but waiting for it will be painful. It is also a matter of continuing to use the old version.

I would like to use the UI Recorder there. It is operation recording software of newly introduced Selenium IDE like web browser.

How to use UI Recorder

The UI Recorder first creates a directory and initializes it.

1. $ uirecorder init
2. __ ______ ____ __
3. / / / / _/ / __ \___ _________ _________/ /__ _____
4. / / / // / / /_/ / _ \/ ___/ __ \/ ___/ __ / _ \/ ___/
5. / /_/ // / / _, _/ __/ /__/ /_/ / / / /_/ / __/ /
6. \____/___/ /_/ |_|\___/\___/\____/_/ \__,_/\___/_/ v2.5.32
7. Official Site: http://uirecorder.com
8. ------------------------------------------------------------------
9. ? Dom path config, extend: id, name, class data-id,data-name,type,data-type,role,data-role,data-value
10. ? Black list RegExp for attribute value
11. ? Black list RegExp for class value
12. ? Hide before expect
13. ? Webdriver host or ip 127.0.0.1
14. ? Webdriver port 4444
15. ? Browsers list chrome, ie 11
16. config.json file saved
17. :
18. .vscode/launch.json file created
19. Start install project dependencies...
20. --------------------------------------------

Then specify the file and start recording.

1. $ uirecorder sample/test.spec.js
2. __ ______ ____ __
3. / / / / _/ / __ \___ _________ _________/ /__ _____
4. / / / // / / /_/ / _ \/ ___/ __ \/ ___/ __ / _ \/ ___/
5. / /_/ // / / _, _/ __/ /__/ /_/ / / / /_/ / __/ /
6. \____/___/ /_/ |_|\___/\___/\____/_/ \__,_/\___/_/ v2.5.32
7. Official Site: http://uirecorder.com
8. ------------------------------------------------------------------
9. ? Test spec file name: sample/test.spec.js
10. ? Open checker browser? Yes
11. ? Browser size (example: 1024 x 768): maximize
12. Recorder server listen on: 9765
13. Checker browser opened
14. ------------------------------------------------------------------
15. Recorder browser opened
16. url: http://www.moongift.jp/
17. ✓ execute succeed
18. waitBody:
19. ✓ execute succeed
20. :
21. sendKeys: テスト{ENTER}
22. ✓ execute succeed
23. waitBody:
24. ✓ execute succeed
25. ------------------------------------------------------------------
26. Record 10 steps, 10 steps check succeed, 0 steps check failed
27. Recorded test saved: sample/test.spec.js
28. Recorder server closed
29. Recorder browser closed
30. Checker browser closed

Operation uses Chrome.

After that, I will test by using the web browser. You can also execute JavaScript code.

The source will be created when you perform a single operation. When you do this, the recorded action will be played. The contents of the file are as follows (part).

1. $ cat sample/test.spec.js
2. :
3. module.exports = function(){
4. let driver, testVars;
5. before(function(){
6. let self = this;
7. driver = self.driver;
8. testVars = self.testVars;
9. });
10. it('url: http://www.moongift.jp/', async function(){
11. await driver.url(_(`http://www.moongift.jp/`));
12. });
13. it('click: Fruumo - Google Chro... ( #main div:nth-child(3) > div.detail > h2.title > a, 416, 16, 0 )', async function(){
14. await driver.sleep(300).wait('#main div:nth-child(3) > div.detail > h2.title > a', 30000)
15. .sleep(300).mouseMove(416, 16).click(0);
16. });
17. it('scrollTo: 0, 0', async function(){
18. await driver.scrollTo(0, 0);
19. });
20. it('click: s ( input[name="s"], 49, 11, 0 )', async function(){
21. await driver.sleep(300).wait('input[name="s"]', 30000)
22. .sleep(300).mouseMove(49, 11).click(0);
23. });
24. it('sendKeys: テスト{ENTER}', async function(){
25. await driver.sendKeys('テスト{ENTER}');
26. });
27. };

The code is based on mocha and is generated as testable code. Although the test code is only JavaScript, it is convenient to be able to record the operation in Selenium IDE like GUI. Is not it powerful as substitute software?

UI Recorder is open source software (MIT License) made by node / JavaScript.

UI Recorder | UI Recorder is a UI test case recorder like Selenium IDE.

alibaba/uirecorder: UI Recorder is a UI test case recorder like Selenium IDE.