UI Recorder - node.js製のSelenium IDE代替

Selenium IDEが最新のFirefoxで動かなくなりました。これに伴い、新しいAPIで動くIDEも開発がスタートしたようですが、それを待つのも辛いでしょう。かといって旧バージョンを使い続けるのも問題です。

そこで使ってみたいのがUI Recorderです。新しく登場したSelenium IDEライクなWebブラウザの操作記録ソフトウェアです。

UI Recorderの使い方

UI Recorderではまずディレクトリを作って初期化します。

$ uirecorder init
    __  ______   ____                           __         
   / / / /  _/  / __ \___  _________  _________/ /__  _____
  / / / // /   / /_/ / _ \/ ___/ __ \/ ___/ __  / _ \/ ___/
 / /_/ // /   / _, _/  __/ /__/ /_/ / /  / /_/ /  __/ /    
 \____/___/  /_/ |_|\___/\___/\____/_/   \__,_/\___/_/    v2.5.32
Official Site: http://uirecorder.com
------------------------------------------------------------------
? Dom path config, extend: id, name, class data-id,data-name,type,data-type,role,data-role,data-value
? Black list RegExp for attribute value 
? Black list RegExp for class value 
? Hide before expect 
? Webdriver host or ip 127.0.0.1
? Webdriver port 4444
? Browsers list chrome, ie 11
config.json file saved
  :
.vscode/launch.json file created
Start install project dependencies...
--------------------------------------------

そしてファイルを指定して記録を開始します。

$ uirecorder sample/test.spec.js
    __  ______   ____                           __         
   / / / /  _/  / __ \___  _________  _________/ /__  _____
  / / / // /   / /_/ / _ \/ ___/ __ \/ ___/ __  / _ \/ ___/
 / /_/ // /   / _, _/  __/ /__/ /_/ / /  / /_/ /  __/ /    
 \____/___/  /_/ |_|\___/\___/\____/_/   \__,_/\___/_/    v2.5.32
Official Site: http://uirecorder.com
------------------------------------------------------------------
? Test spec file name: sample/test.spec.js
? Open checker browser? Yes
? Browser size (example: 1024 x 768): maximize
Recorder server listen on: 9765
Checker browser opened
------------------------------------------------------------------
Recorder browser opened
  url: http://www.moongift.jp/
   ✓ execute succeed
  waitBody: 
   ✓ execute succeed
     :
  sendKeys: テスト{ENTER}
   ✓ execute succeed
  waitBody: 
   ✓ execute succeed
------------------------------------------------------------------
Record 10 steps, 10 steps check succeed, 0 steps check failed
Recorded test saved: sample/test.spec.js
Recorder server closed
Recorder browser closed
Checker browser closed

操作はChromeを使います。

後はWebブラウザを操作してテストを行います。JavaScriptのコードを実行することもできます。

一通りの操作を行ったらソースが生成されます。これを実行すると記録した動作が再生されます。ファイル内容は以下のようになっています（一部）。

$ cat sample/test.spec.js 
  :
module.exports = function(){
    let driver, testVars;
    before(function(){
        let self = this;
        driver = self.driver;
        testVars = self.testVars;
    });
    it('url: http://www.moongift.jp/', async function(){
        await driver.url(_(`http://www.moongift.jp/`));
    });
    it('click: Fruumo - Google Chro... ( #main div:nth-child(3) > div.detail > h2.title > a, 416, 16, 0 )', async function(){
        await driver.sleep(300).wait('#main div:nth-child(3) > div.detail > h2.title > a', 30000)
               .sleep(300).mouseMove(416, 16).click(0);
    });
    it('scrollTo: 0, 0', async function(){
        await driver.scrollTo(0, 0);
    });
    it('click: s ( input[name="s"], 49, 11, 0 )', async function(){
        await driver.sleep(300).wait('input[name="s"]', 30000)
               .sleep(300).mouseMove(49, 11).click(0);
    });
    it('sendKeys: テスト{ENTER}', async function(){
        await driver.sendKeys('テスト{ENTER}');
    });
};

コードはmochaベースになっており、テストできるコードとして生成されます。テストコードはJavaScriptのみですが、Selenium IDEライクに操作をGUIで記録できるのは便利です。代替ソフトウェアとして有力ではないでしょうか。

UI Recorderはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

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.