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.js

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