技術

Cypress使ってみました

  /

CypressというE2Eテストツールを使ってみたので、その雑感になります。

本記事はCypressの導入チュートリアルではありませんが、

  • Cypressって何？
  • Cypress使おうか迷っているけど、実際どんなもんなの？

という方には役立つ情報になっています。

Contents
  1. 使うことになった経緯
  2. 使う前に思っていたことと、実際に使ってみた感想
  3. はまったこと

使うことになった経緯

私は現在、あるWebシステム構築の案件にインフラ兼バックエンドというポジションで参画しているのですが、本番リリース後、結構暇していました。受託案件ということもあり、リリース間隔がマッタリで、本番リリース後は仕事のフェーズから実装から他者とのやりとりがメインになったらからです。その辺のベンダーコントロール的なことをやる人は別にいたので、私は暇していたんですね。

それとは対称的に、フロントのメンバーは忙しそうにしていました。というのも、テストを手動で行っていて毎回、UIをポチポチしていたからです。

何で自動化しないのか不思議に思っていました。そこまで手が回らないのか、そもそも方法を知らないのか。そこで雑談レベルで、「スマフォはともかく、PCのブラウザテストぐらいなら割と簡単にできると思いますよ、今Software/DesignでCypressの連載やっていますし丁度いいんじゃないですか？」と言ってみたら、じゃあやってよとなってそのタスクが回ってきました^^;

使う前に思っていたことと、実際に使ってみた感想

以下は私が使う前に思っていたことと、実際に使ってみた感想です。

E2Eテスト系の実装はすぐゴチャゴチャになってしまう印象があって、あまりやりたくなかったのですが、思っていた以上に簡単にできました。Cypressすごいと思いました。

Seleniumと比べてどう？

Seleniumと比較して、だいぶ簡単に導入できます。シンプルなコードになりますし、メンテもしやすいと思います。

Seleniumはテスト以外にもいろいろ使えますが、Cypressはテストに特化しています。その分、簡単、シンプルです。今後、テスト目的ならまずはCypressを検討するべきだと思いました。

CypressはCORS対応やマルチブラウザに対応できないという制限、というか縛りがあるのですが、これらが許容できるならCypressを使うべきです。Cypressだとどうしても要件が満たせないときは、Seleniumの導入を検討するでいいかと思います。

APIのテストにも使えるの？

使えます。むしろ、UIよりAPI向きのツールって気もします。

私はAPIのテストとはTavernというyamlだけでさっとできるツールを使うことが多かったのですが、今後はCypressでいいかもと思いました。Tavernは結局、モックvalidationみたいなことができるだけすしね。

Cypressならもう少しこったチェックもできて、それでいてテストコードは煩雑にならないという特徴があります。今、別案件でLambdaでREST APIを構築しているのですが、だいぶ膨れ上がってきたのでそろそろテスト導入してどうにかしないとな思っていたので、Cypressでやってみるつもりでいます。

JavaScript書きたくないんだけど？

CypressはJavaScriptでしか書けません。Seleniumは多言語対応しているので、これもどうかと思っていました。

でも実際に使ってみると、たいした問題じゃありませんでした。確かにSeleniumを使ったテストは、JavaScriptでは書きたくありません。でもCypressはJSで全然OKです。それぐらいシンプルなコードになります。

はまったこと

Cypressはシンプルで公式のサンプルも豊富、導入しやすいことには間違いないのですが、何点かはまったこともありました。

キャッシュが原因でページ遷移すると動かない問題

googleにアクセスしたテストサンプルや公式のサンプルは動くのに、テストしたいサイトでは動作しないという現象にあいました。

いろいろと、あーでもない、こーでもないとやっている内に、ページ遷移したら現象が発生する、ページ遷移するまでは動くということがわかりました。

この現象から、「あ、キャッシュか」となってtweetのリンクの記事に辿り着きました。

こちらを設定して無事、解決しました。

アロー関数だと動かない問題

キャッシュ原因のページ遷移の問題が解決した後、途中で動かなくなり何でだーとなりました。

いろいろ触っている内に、アロー関数からノーマル関数にしたら動くということがわかりました。で、tweetのリンクの記事に辿り着きました。

メソッド内で、thisを使用する場合はアロー関数でなくノーマル関数にしないと動かないみたいです。これはCypressの問題というよりは、JavaScriptの割と基礎の仕様ですね。私の理解不足でした・・・orz Software/Designの2022年2月号にも解説があります。

以上、Cypressを使ってみた雑感でした。

あれこれ悩むより実際に手を動かした方が早い！ と思わしてくれるぐらい、わかりやすくいいツールだと思いました。

RELATED POST