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

テスト実行

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

使ってみた感想

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

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

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

f:id:riririusei99:20180117231946p:plain

今回触ったもの

github.com

おわり

riririusei99

nightmare.jsを使ってみる

はじめに

使ったことないE2Eフレームワークを使ってみる月間、第2弾。 nightmareという名前のため触らずにはいられなかった。

f:id:riririusei99:20180122211912p:plain http://www.nightmarejs.org/www.nightmarejs.org

インストール

$ npm install --save-dev mocha
$ npm install --save-dev nightmare
$ npm install --save-dev power-assert
$ mkdir test
$ touch test/simpe_spec.js

テストを書く

test/simple_spec.js

const Nightmare = require('nightmare')
const assert = require('power-assert')

describe('Load a Page', function() {
  this.timeout('20s')

  let nightmare = null
  beforeEach(() => {
    nightmare = new Nightmare()
  })

  describe('My First Test', () => {
    it('Search riririusei99', done => {
      nightmare.goto('http://teamspirit.hatenablog.com/')
        .type('input[type=text]', 'riririusei99')
        .click('input[type=submit]')
        .evaluate(() => {
          return document.title;
        })
        .end()
        .then((title) => {
          assert.ok(title === 'riririusei99 の検索結果 - TeamSpirit Developer Blog');
          done();
        })
        .catch(done)
    })
  })
})

テストコマンドを追加

package.jsonに下記を追加

  "scripts": {
    "test": "mocha"
  },

テスト実行

$ npm test

> nightmare-test@1.0.0 test /Users/username/Repository/nightmare-test
> mocha



  Load a Page
    My First Test
      ✓ Search riririusei99 (6500ms)


  1 passing (7s)

使ってみた感想

  • アサーションを複数入れようとしたらテストコードがいろいろ複雑になってしまったので断念
  • specファイル一個で動いているので設定をいじるとさらにスッキリするかも
  • Electronが裏で動いているので、Electronを使ったアプリのテストに採用されるのかも
  • ヘッドレスブラウザが裏で動くので簡単なツールの自動化には良いのかも
  • テストコードの書き方に前回と違いが出たので良かった

今回触ったもの

github.com

protractorを使ってみる

はじめに

使ったことないE2Eフレームワークを色々試すの巻。 Angularでないプロダクトでも使えるらしいの挑戦。

Protractor - end-to-end testing for AngularJS

触ってみたメモ

# Global Install
$ npm install -g protractor

$ protractor --version

$ webdriver-manager version

# ProtractorのSetupにはUpdateをしろって書いてあるので試しにやってみる
$ webdriver-manager update

# SleniumServerの起動しておく
$ webdriver-manager start

conf.js

exports.config = {
   // こう書いておくとangular以外でも使用できる
  onPrepare: function () {
    browser.ignoreSynchronization = true;
  },
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['specs/*']
};

spec.js

describe('My First Test', function() {
  it('Search riririusei99', function() {
    browser.get('http://teamspirit.hatenablog.com/');
    
    element(by.css('input[type=text')).sendKeys('riririusei99');
    element(by.css('input[type=submit]')).click();

    // Waits for the title to be 'riririusei99'.
    var EC = protractor.ExpectedConditions;
    browser.wait(EC.titleContains('riririusei99'), 5000);

    expect(browser.getTitle()).toEqual('riririusei99 の検索結果 - TeamSpirit Developer Blog');

  });
});

テスト実行

protractor conf.js

使ってみた感想

  • webdrive-managerが入っているのでドライバの管理が簡単そうに見える
  • 設定が色々できるので拡張性高そう(ブラウザ変えたり、テストフレームワーク変えたり…)

今回触ったもの

github.com

【git】名前・メールをリポジトリ毎に変えたい

リポジトリ毎にコミット名を変えたい。(勉強会用の個人リポジトリにコミットする時とか用)

鍵を作成

$  cd ~/.ssh
$  ssh-keygen -t rsa
# 鍵の内容をクリップボードにコピー
$  pbcopy < ~/.ssh/id_rsa.pub

github上で鍵を登録

clone後にローカルで設定する

$ git config --local user.name "usename99"
$ git config --local user.email "MailAddress@gmail.com"

nodebrewの使い方メモ

リポジトリ毎にnode.jsのバージョンを使い分ける必要が出てきたので個人的な備忘録

# localにインストールされてるリストを確認
$ nodebrew ls

# リモートにあるバージョンの一覧を取得(LTSが何かまでは見れないので別途確認)
$ nodebrew ls-remote

# Installしてバージョン確認(2018/01/10ではv8.9.4)
$ nodebrew install-binary v8.9.4
$ nodebrew use v8.9.4
use v8.9.4
$ node -v
v8.9.4

# デフォルトで使われる設定
$ nodebrew alias default {version}

広告を非表示にする

スクラムマスターになったのでいろいろ本を読み漁った話

この記事はチームスピリットアドベントカレンダーの16日目の記事です。(日付についてはお察しください。)

adventar.org

はじめに

スクラムマスターをやってみてのふりかえりを書いた記事を書いていたのですが…。

思った以上に長くなりまして…。

書くのも辛い、読むのも辛い
文章になるぐらいなら分割しようかと思いまして、、、

オススメ書籍をまずは分割してみました(>人<)

既にアドベントカレンダーも大幅に遅れてしまってるし! …という話です。

では本編。

オススメ書籍

1.アジャイルサムライ
以前に借りて読んだものを改めて、自分で購入して読み直した。
スクラムチームで過ごす中で何を大切にすればいいのかとかこういう時にはどうすればいいんだっけみたいなマインドの部分で非常に参考になる本。
自分の考え方はこの本がベースになっていると思う。

2.SCRUM BOOT CAMP THE BOOK
会社の本棚にあったので、読んだ本。一部内容が漫画になっており、非常に読みやすい本です。
これから勉強する、概要を素早く知りたいという人にはオススメでした。
一冊でざっくり理解したい人はこれがオススメです。

3.エッセンシャルスクラム
スクラムマスターはアジャイルコーチの役割もあるため、ある程度体系的な知識が必要という考えから購入した本。
分厚いだけあってスクラム開発における様々なイベント・問題などに対して網羅的に書いてある。
困った事がある時や、本来あるべき姿はどうなんだっけを知りたい時に辞書みたいな使い方をしている本です。

4.実践アジャイルテスト
新しいチームに入ってみて、文化が違うのでどういった関わり方をすれば良いか悩んだので改めて読み直した。
アジャイルテスターとしてチームにジョインする時についてのテストの考え方、スクラムチームに貢献するにはどういうことをすればいいのかが書かれている。
こちらはアジャイルテスターとして困った事がある時にどうするっだっけみたいな時に辞書代わりに使っている本です。

5.アジャイルコーチング
アジャイルコーチする上でどうやって改善を進めれば良いのかという進め方、考え方・スタンスについて知りたくて購入した本。
正直さっと読んだ感じでは上手く実践できていないので、もう一回読んだら何か摑める気がする。

6.スクラム実践入門
アジャイルコーチングとどちらを買うか迷った挙句、買わなかったんだけど、会社の本棚にあった。
前半はスクラム開発の概要を説明しているので他の本と情報がかぶるが、6章〜8章について事例が書いてあるので他のチームがどんな事に困って解決しようとしてるのか知りたい時にはいいと思います。

タイプ別オススメ

これまで読んだものをタイプ別にオススメすると、こんな感じでしょうか!

スクラムって何ー?」って人

「SCRUM BOOT CAMP THE BOOK」をまず読む。

スクラムチームにこれから入るぜ!」って人

「SCRUM BOOT CAMP THE BOOK」&「アジャイルサムライ」を読む。
※QAなら「実践アジャイルテスト」も読む

「記憶を消して、もう一度スクラムマスターをやる世界線にタイムリープしたriririusei99」って人

「エッセンシャルスクラム」&「アジャイルサムライ」&「実践アジャイルテスト」を読む。
※基本が分かったタイミングでお師さんを探す&書籍に限らず情報収集。

まとめ

上記の本を一通り読んでみて、全部わかってるかと思うとそうじゃないのでなかなか難しいなぁとか思っています。
その他、オススメ書籍があればぜひ教えて欲しいです!

冬休み初日の現場からは以上です!

おわり

WebDriver始めました

Slenium WebDriver始めました。 完全に自分向け

要素を取得する(cssSelector)

WebDriver.findElement(By.cssSelector("body"));
WebDriver.findElements(By.cssSelector("li"));

特定番目を取得する

WebDriver.findElements(By.cssSelector("li")).get(0);

数を取得する

WebDriver.findElements(By.cssSelector("li")).getSize();

クリック

WebElement button = WebDriver.findElements(By.cssSelector("button")).get(0);
click(button);

セレクトボックス

Select selectBox = new Select(WebElement);
selectBox.selectByValue(String);
selectBox.selectByIndex(int);

チェックボックス

public void setCheckBox(WebElement checkBox, Boolean check) {
  if (checkBox.isSelected() != check) {
    click(checkBox);
  }
}
WebElement checkBox = WebDriver.findElement(By.cssSeletor("#agree"));
setCheckBox(checkBox, true);

文字を入力

WebElement input = WebDriver.findElement(By.cssSeletor("input#sample"));
input.sendKeys("hogehoge");

//BackSpace
input.sendKeys(Keys.BACK_SPACE);
//ENTER
input.sendKeys(Keys.ENTER);

// 削除する
input.clear();

待つ

// 押せるようになるまで待つ
WebElement button = WebDriver.findElement(By.cssSelector("button"));
wait.until(ExpectedConditions.elementToBeClickable(button));

// 見えるまで待つ
WebElement header = WebDriver.findElement(By.cssSelector("header"));
wait.until(ExpectedConditions.visibilityOf(header));

// 見えなくなるまで待つ
WebEkenebt indicator = WebDriver.findElement(By.cssSelector(".indicator"));
wait.until(ExpectedConditions.invisibilityOf(indicator));

// 消えるまで待つ
WebEkenebt indicator = WebDriver.findElement(By.cssSelector(".indicator"));
wait.until(ExpectedConditions.stalenessOf(indicator));

// テキストの文字列になるまで待つ
WebElement h1 = WebDriver.findElement(By.cssSelector("h1"));
wait.until(ExpectedConditions.textToBePresentInElement(h1, "riririusei99"));

Cookieの操作

// 追加
WebDriver.manage().add_cookie({'name': 'foo', 'value': 'bar'});
// 名前で削除
WebDriver.manage().deleteCookieNamed("foo");
// 全削除
WebDriver.manage().deleteAllCookies();
広告を非表示にする