cinnamonjsを使ってみる

はじめに

触ったこと無いE2Eフレームワークを触ってみる月間第三弾。
今回はちょっと変わり種のコチラ

github.com

リーダーに紹介頂いたのですが、なかなかマニアックそうなのを教えてくれましたね…。
諦めず頑張ります。

インストール

$ npm install --save-dev cinnamonjs
$ npm install --save-dev selenium-webdriver

## ダウンロードしてきたfirefoxドライバの配置(geckodriver)
$ mv ~/Downloads/geckodriver-v0.19.1-macos.tar.gz ~/Repository/cinnamojs-test
$ tar -zxvf geckodriver-v0.19.1-macos.tar.gz

テストを書く

simple_spec.js

module.exports = [
  {action: "start"},
  {action: "browser.set.size", width: 1024, height: 768},
  {action: "browse", url: "http://teamspirit.hatenablog.com/"},
  {action: "send.keys", locator: {css: "input[type=text]"}, keys: "riririusei99"},
  {action: "click", locator: {css: "input[type=submit]"}},
  {action: "wait.title", "page.title": "riririusei99 の検索結果 - TeamSpirit Developer Blog"}
];

ディレクトリ構成

.
├── geckodriver
├── node_modules
├── output
├── package-lock.json
├── package.json
└── specs
    └── simple_spec.js

• outputのディレクトリにレポートファイルが入る

テスト実行

$ ./node_modules/cinnamonjs/cli.js ./specs/simple_spec.js

使ってみた感想

テストを実行するとレポートを出力し、テストにかかった時間や、アクション毎にスクリーンショットも撮って確認できる。
json形式でテストを書くのでひとつひとつの操作に意味を手動のテストケースと紐付けながらかけたりも出来るかも。

昔、聞いた自動テストコードの生成システムはExcelでテストケースを書いたらコードになるって言ってたので、こういう形式なら出来るかもしれないと思いました。

テストレポートのキャプチャ

今回触ったもの

github.com

おわり

riririusei99