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.