1. kkakizaki

    Posted

    kkakizaki
Changes in title
+Web UI の自動テストツール Cypress のご紹介
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,166 @@
+## はじめに
+
+こんにちは。
+[CYBIRDエンジニア Advent Calendar](https://qiita.com/advent-calendar/2017/cybird) 8日目の @kkakizaki です。
+7日目は @a-hirahira さんの(前の人のタイトルリンク付き)でした。すごかったですね
+
+さて、いつもは~~雑用~~QAマネージャー的な話ばかりなので、
+たまには大好きなQAツールの話を書きます!!!
+
+## Selenium以外の選択肢「Cypress」
+
+長い間、Web UI の自動テストツールといえば Selenium だったのですが、
+最近は Selenium 以外にも優れたツールが増えてきています。
+
+大部分が有料ツールなので、なかなか紹介しづらいのですが、
+「[Cypress(サイプレス)](https://www.cypress.io/)」はオープンソースで無料で使えるだけではなく、
+かなり使い勝手の良いツールに仕上がっているので、
+QA関係者は一度試してみることをおすすめします。
+
+※注意: Cypress のテストランナーは無料ですが、オプションの Webダッシュボード機能は有料です。とはいえ無料部分だけで十分強力なツールとなっております。
+
+## Cypress の使い方
+
+[公式のチュートリアル](https://docs.cypress.io/guides/getting-started/installing-cypress.html#What-You’ll-Learn)がとてもわかりやすいので、そっちを読んで下さい。(完)
+……
+と、いってしまうのはあまりにも乱暴なので簡単に解説します。
+Cypress は Windows版、Mac版、Linux版が存在するのですが、
+今回は Mac版を利用しています。
+
+### 事前に必要なもの
+
+* [node.js](https://nodejs.org/ja/) を使います。事前にインストールしておきましょう。
+
+### インストール
+
+* Cypress はプロジェクト単位でインストールすることが推奨されているようです。適当な場所に専用ディレクトリを作成しましょう。
+* ディレクトリを移動したら npm install だけでOK。
+
+```bash
+$ cd /your/project/path
+$ npm install cypress --save-dev
+```
+
+### 起動
+
+* Cypress の本体はインストールディレクトリの中の node_module の中の .bin の中にいらっしゃいます。
+* 起動は、そいつを open するだけです。
+
+```bash
+$ ./node_module/.bin/cypress open
+```
+
+![スクリーンショット 2017-11-22 14.46.25.png](https://qiita-image-store.s3.amazonaws.com/0/36320/fa248e9f-79c4-82ac-a0e0-d4282c372172.png)|
+|:-:|
+
+起動すると上記の画面が出てきます。
+「OK, got it!」をクリックしてウィンドウを閉じましょう。
+
+![スクリーンショット 2017-11-24 17.07.57.png](https://qiita-image-store.s3.amazonaws.com/0/36320/76a8fcc2-23ce-a5b3-8fdc-379530d915d1.png)|
+|:-:|
+
+上記が Cypress のメインウィンドウと言えます。
+テストスクリプトはインストールディレクトリの中の cypress の中の integration の中にあります。
+
+試しに example_spec.js をクリックしてみましょう。
+
+![スクリーンショット 2017-11-22 14.51.33.png](https://qiita-image-store.s3.amazonaws.com/0/36320/caeb4f33-5bdd-86f9-78fd-71f46c851d42.png)|
+|:-:|
+
+別ウィンドウで Test Runner が開き、
+example.cypress.io(Cypress用のテストサイト)に対して、
+次々コマンドが実行されていきます。
+豊富なコマンドと実行スピードに感動できるはず。
+
+## UI 自動テストの Hello World
+
+インストールが完了したら、公式チュートリアルの「[Writing Your First Test](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#What-You’ll-Learn)」から順番に実践してみることをおすすめします。
+
+今回は、せっかくなので UI 自動テストの Hello World であるところの
+「Google で 'cypress.io' を検索して、検索結果画面の title 要素を検証する」ところまでやってみましょう。
+
+Cypress の操作方法は、基本的には他のスクレイピングツールと変わりません。
+下記の動作と結果検証の繰り返しになります。
+
+* Web の UI 要素を検索する。
+* 検索した要素に対して操作を実行する。
+
+```js:example_spec2.js
+describe('My First Test', function() {
+ it('Visit Google', function() {
+ cy.visit('https://www.google.co.jp')
+
+ cy.get('.gsfi.lst-d-f')
+ .type('cypress.io')
+
+ cy.contains('Google 検索')
+ .click()
+
+ cy.title().should('eq', 'cypress.io - Google 検索')
+ })
+})
+```
+
+上記のスクリプトを作成したら、前項の integration ディレクトリ内に設置し実行してみましょう。
+
+![スクリーンショット 2017-11-27 16.41.35.png](https://qiita-image-store.s3.amazonaws.com/0/36320/e24ad4d6-330e-25bf-09b6-5a4a728996eb.png)|
+|:-:|
+
+* Google にアクセスする。
+* 検索窓に「cypress.io」と入力する。
+* 「Google 検索」ボタンをクリックする。
+* title 要素が「cypress.io - Google 検索」であることを検証する。
+
+これらの動作が確認できると思います。
+
+## Selenium と Cypress の違い
+
+ここまで見ると「じゃあ、Selenium と何が違うの?」と思うかもしれません。
+ざっと違いを挙げてみます。
+
+### Cypress はインストールが楽
+
+Cypress は一発でインストールが完了するので、とても楽です。
+Selenium はテストフレームワークやドライバの設定などなど行わなければならないため、
+結構骨が折れます。
+
+### アーキテクチャが異なる(っぽい)
+
+Selenium はブラウザの外部で動作しリモートでコマンドを実行します。
+Cypress はブラウザそのものに組み込まれているため、Selenium よりも多くのことが実現可能です。(って公式の人が言ってた)
+
+### Cypress はテスト実行スピードが速い
+
+アーキテクチャの違いが影響しているのかどうかわかりませんが、
+Cypress の方が圧倒的にテスト実行スピードが速いです。
+Cypress の設計志向は「フロントエンジニアのテスト駆動開発に役立てたい(そのためにスピードが必要)」ということらしいです。
+
+### Cypress は Google Chrome しか対応していない
+
+Selenium はマルチブラウザ対応していますが、
+Cypress は残念ながら Google Chrome にしか対応していません。
+でも良いじゃない速いんだから。
+
+### Cypress は JavaScript にしか対応していない
+
+Selenium は様々な言語でテストスクリプトを書けますが、
+Cypress は JavaScript しか使えません。
+でも良いじゃない速いんだから。
+(フロントエンド開発に特化させるため JavaScript を選択しているっぽい)
+
+## 最後に
+
+そんなわけで、Cypress について紹介しました。
+今回はセットアップ周りの話しか書けませんでしたが、
+この記事で紹介した以上に便利な機能が Cypress には備わっているので、
+興味のある方は是非使ってみて下さい。(自分もいじり倒したいっす…)
+
+【便利な機能の例】
+
+- テストスクリプトのステップごとのスナップショット機能
+- スクリプトを書き換える度にテストが走る機能
+- 自動で Wait してくれる機能
+- 自動スクリーンショット、動画撮影機能
+- スタブ、タイマー機能 等など
+
+[CYBIRD エンジニア Advent Calendar 2017](https://qiita.com/advent-calendar/2017/cybird) 明日は、@tossyz さんの 「失敗…」 です!楽しみですね!