Cypressを使ってみる

はじめに

E2Eツールをどんどん使ってみる月間なのでこちらを挑戦しました。 ボスに触ってみるならコレだと教わったので触ってみる。
下書きのまま放置されてたので公開。

www.cypress.io

インストール

$ mkdir cypress-test

$ npm install cypress --save-dev

$ ./node_module/.bin/cypress open

ウィンドウが立ち上がるとホームディレクトリにいろいろ追加してくれるので試しにexample_spec.jsを走らせるとテンションが上がる。 sampleにはいろいろ書いてあるので触り方を学ぶにはちょうどいいかも!

ディレクトリ構成

.
├── fixtures
├── integration  //ココにテストを書く
├── plugins
├── screenshots
└── support

テストを書こう!

$ cd integration
$ touch simple_spec.js

simple_spec.js

describe('My First Test', function() {
  it("Search riririusei99", function() {
    cy.visit('http://teamspirit.hatenablog.com/')

    cy.get('input[type=text]').type('riririusei99')
    cy.get('input[type=submit]').click()

    // Waits for the title to be 'riririusei99'.
    cy.title().should('include', 'riririusei99')

    cy.title().should('eq', 'riririusei99 の検索結果 - TeamSpirit Developer Blog')
  })
})

画面

simple_spec.jsf:id:riririusei99:20180110233044p:plain

CLIで実行してみる

$ ./node_modules/.bin/cypress run


  (Tests Starting)


  My First Test
    ✓ clicking 'type' navigates to a new url (8625ms)


  1 passing (10s)


  (Tests Finished)

  - Tests:           1
  - Passes:          1
  - Failures:        0
  - Pending:         0
  - Duration:        9 seconds
  - Screenshots:     0
  - Video Recorded:  true
  - Cypress Version: 1.4.1

CLIで実行するとvideosディレクトリが作られmp4ファイルを出力してくれる

さっくりまとめ

すぐにインストールできてすぐに動く、しかもCLIでも動くのは結構便利(自動化しやすい)
いろいろ拡張したくなる(ブラウザ変えたい、テストフレームワーク変えたい)のにはどう対応していくのかな
小さなコンテンツに対してChromeだけで保証するような場合とかにはものすごく便利だと思いました。

おわり

riririusei99

TestCafeを使ってみる

はじめに

使ったこと無いE2Eフレームワークを触ってみる月間第四弾
あきらかにテストしてくれそうなこちらです。

devexpress.github.io

インストール

$ npm install --save-dev testcafe

ディレクトリ構成

$ tree -L 1
.
├── node_modules
├── package-lock.json
├── package.json
└── simple_spec.js

テストを書く

simple_spec.js

import { Selector } from 'testcafe';

fixture `My First Test`
    .page `http://teamspirit.hatenablog.com/`;

test('Search riririusei99', async t => {
    await t
      .typeText('input[type=text', 'riririusei99')
      .click('input[type=submit]');

    const title = await t.eval(() => document.title);
    await t.expect(title).eql('riririusei99 の検索結果 - TeamSpirit Developer Blog');
});

テスト実行

$ ./node_modules/testcafe/bin/testcafe-with-v8-flag-filter.js chrome simple_spec.js
 Running tests in:

 My First Test
 ✓ Search riririusei99


 1 passed (12s)

今回使ってみての感想

触ってみて5分もたたずに動きました。ほぼ設定いじってない状態で動いたので導入が簡単。
async/awaitを使ってテストコードをかけるようになりましたので、フロントのエンジニアは抵抗なく書けるのかな。
一通り触り終わったら使い込んでみたくなりました。

今回触ったもの

github.com

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}