Cypress タグの記事

[Software Design 2022年1月号]に短期連載「Cypressで作る消耗しないE2Eテスト環境」を寄稿しました！

フューチャー技術ブログでも何度か取り上げているCypressですが、私も最近触り始めました。今回取り上げたいテーマは、フロントエンドアプリケーションで、特定の画面に表示する情報をサーバーから取得する機能や、ボタンを押すとバックエンドサーバーなどにHTTPリクエストを送信するような機能が実装されている場合の話です。

お仕事コードで、「Cypressで頑張ったけどドラッグアンドドロップのテストができない」という相談を受けました。僕も試行錯誤してみたのですが、どうもうまくいかず・・・CypressとかのE2Eテストは、完全なユーザーの入力をエミュレーションするわけではなくて、ユーザーが入力したときに発生するであろうイベントを擬似的に作って投げているにすぎません。実際に発生するイベントよりも少ないです。例えば...

@testing-library/cypressの存在を知らずに、それっぽいものを作ろうとしたときにいろいろ調査した記録です。Cypressにはテストコードが縦と横に短くなる工夫がされており、そのメカニズムにしたがった独自コマンドを実装するにはコツが必要です。実装は次のところにありますが、@testing-library/cypressの方がメンテされているので、こちらは実際には使わないのをお勧めします。https://gitlab.com/osaki-lab/cypress-aria

Future Tech Night #8というイベントで、E2EテストをCypressで快適に行う方法を紹介しました。文字起こし兼補足として投稿します。壊れやすい上に読みにくくなりがちなE2Eテストは、cypressのCustom Commandsなどでカプセル化すると読みやすくなおしやすい。

Cypressの設定周りについて紹介します。何も手を加えないデフォルトでも動作はする

皆さんは普段どのようにE2Eテストを行っていますか？忍耐強く手動でポチポチ画面を触って...というのはなかなかにしんどいですよね。自動化ツールを使って楽したいけど難しくてよくわからない、という方もいらっしゃると思います。本記事では、テスト自動化ツールを全く使ったことのなかった私が、テスト自動化ツールである[Cypress]の導入から基本的な使い方までをご紹介していきます。

E2Eテストはみんなしていますか？正直言うと、僕はあんまり好きじゃなかったです。お仕事では他の人が入れてくれたものが回っていたりしますが。前職で、SikuliXを使って社内向けのデスクトップアプリケーションのE2Eテストにトライしたことがあるんですが、すぐに壊れて動かなくなるので、費用対効果が出せなくてあきらめました（一人プロジェクトだったのもあります）。* 絵でマッチングを行うのでボタン画像をいっぱいスクショをとっていく必要がある