What kind of note?
ゆるいTech系記事です。世に出して育てていくスタイルを取るので、がしがし更新をかける予定です。
Release note
2019/03/16 : 1.0
今回は、ウェブブラウザ（chrome）を用いた画面操作自動化ツール「Cypress」を紹介したいと思います。
Who are u?
京都で働く２０代です。縁あって自動ツールを使っています。
Table of Contents
今日のお話は以下３つに要約されます
1. Cypressでできること//「Seleniumさん、jsまたこけたぁ」という人におすすめ。
2. Cypressでできないこと//「複数タブはやーらない！」トレードオフですね。
3. Cypressを選ぶ理由// npm使って終わり。わからない人はフォルダごそっ。
Cyprss でできること
https://vimeo.com/237527670
Cypressは、ブラウザの自動操作をすることができるツールです。これにより、あなたが操作をして確認するおよそすべてのテストを自動で実行することができます。
Cypressを使うユーザの主な利用目的は、Web開発におけるE2Eテストです。
（E2Eテストとは、テストのピラミッドにおける頂点にあたるテストで 、画面上での操作や画面上の要素などを確認します。詳しくはこちらへ。）
- ボタンを押す、モーダルを触る サイト上に用意したボタンを押してページ遷移することは人には簡単でもプログラムで実行することは難しいです。しかし、Cypressなら、要素を選択して .click()と書くだけでボタンを押してくれます。もちろん、ぴゅっと出てくるモーダルでもOK
- テキストの確認 タイトルを取得して照合したり、表示されたモーダル内に記載されたテキストが予想していたものと一致しているかを確かめたりすることができます。 もちろん、ログインして確認できるページへも訪問できます。
- Basic認証の設定、UAの偽装 開発環境でテストをしようと思った場合、Basic認証をクリアしなければなりません。もちろんそういった対応も可能ですし、モバイル用のテストを検討するためのUA偽装も可能です。
つまり、ボタンを押したり、モーダルが出てくるの閉じたり、クッキー渡して遷移する画面がたくさんあったり、というテストケースが多いのであれば、Let's Cypress となるわけです。
Cypressでできないこと
- 複数タブに対応していません これは公式が発表しています。「複数開く意味ないから新しくvisitしなはれ」といっています。 これに伴い、ポップアップから選択して、という動きもできないです（・・・）。
- たぶんいろいろある 触り始めて１ヶ月のため、まだまだCypressのことを知らないため、やりたいこともできないことも少ないです。公式にはこれできない、とか、forumにもたくさん質問が出ているので、もっとたくさんあると思います。続々追記していきたいと思います。
Cypress を選ぶ理由
インストールがとても簡単
npm を利用してインストールできるので、環境構築がpuppeteerやSeleniumと比較してとても簡単でした。つまり、沼がない、ということです。npmわからない人にも親切な設計
npmなにそれ、新しいお店？ という人向けにzipを用意しています。なんと、これをダウンロードするだけで、Cypressの環境が整います。よって、チームで取り組み時などには、先人が頑張ったフォルダをぽいっと渡すだけで、新人にも環境が整います。あとは実行したり、書き換えてテストケースを増やしていけばいいだけ、となります。
同じようなツールにGoogleが開発しているpuppeteer があります。これはヘッドレスで動いてくれる、コミュニティが盛ん、というスグレモノのようですね。
こちらも近い人が触っているので、近い将来比較検討ができるかと思います。今はお互い一長一短を見てみようというフェーズのため、またいつか報告したいと想います。