サイプレスの
第一印象と遭遇した問題の自動テスト
リードソフトウェア開発者Luxoft、Dmitry Kochergin
まず、私はプロの自動テスターではなく、Javaプログラマーであることに注意してください。しかし、ある日、依存サービスAPIの変更によって警告なしに最近壊れたアプリケーションの主な機能の基本的な検証のために、スモークテストを行うことがタスクになりました。
この記事は、JSで最初から自動テストを行うことに興味を持っていたが、質問することを恐れていたすべての人にとって興味深いものになるでしょう。
そもそも、自動テストについては何も読んだことがありません。主な先入観は、自動テストは難しいということでした。レビューによると、このSeleniumをセットアップできるからです...さらに、XPathとPageObjectを学ぶ必要がありますが、これはまったくやりたくありませんでした。
インターネットですばやく検索すると、WebDriver.IO、Pupeteer（現在はPlaywrightの方が優れています）、Cypressなどの若くて有望なツールが見つかりました。私は後者を選び、自動テストに最適なツールについて、美しい約束とホリバーからのいくつかのコメントを取り入れました。
実行中のテストのブラウザウィンドウは次のようになります。左側は実行されたテストコマンドとステータス、右側はテスト実行中のアプリケーションのビューです。
これはテストコードの外観です（サイプレスでは、すべてのコードはJSにあり、セレクターは通常のCSSセレクターです）：
実行時は次のようになります。
自動テスト用のツールを探していたとき（頭の中には、ブラウザで直接テストを作成できるという画像があったので、単に「スクリプトレコードをクリック」しただけでした）、システムがアクションを記録しました（クリックした要素のCSSセレクター）。次に、生成されたテストを確認し、必要に応じてセレクターを微調整して、テストスイートに保存します。ええと...
その時、物語は達成不可能であることが判明し、私はそのようなツールを見つけられませんでした（多分誰かがコメントであなたに正しい方法を教えてくれるでしょう）。しかし、サイプレスは、テストが実際のブラウザで実行されるという事実に恵まれており、お気に入りのChrome開発者ツールを使用してテストの実行と並行してDOMを探索することもできます（たとえば、セレクタが機能しなかった場合は、コンソールを開いて、テストが実行された理由をすぐに確認できます）。
私にとって重要な他のパラメーターの中で、私は、書き込み（ここでも、ブラウザーでのテストの作成について）にも、テストの保守にも多くの時間を費やしたくありませんでした。これは私の目的には十分でした。サイプレスについての情報です。サイプレスのWebサイトを最初に開いてから、アプリケーションにログインする最初のテストまで1時間かかりました。
したがって、フレームワークの最初のページであるサイプレスは、これがJavaScriptエンドツーエンドテストフレームワーク（cypress.io）であることを示しています。次に、ドキュメントをすばやく読みます。これは本当に完全で、ほとんどすべての質問に対する回答を見つけることができます（StackOverflowで他のすべてをすぐに見つけました）：
サイトの機能のリストに沿って：
- Time travel – – , . , DOM, Chrome devtools.
- Real time reloads – JS , – (hot reload).
- Automatic waiting – , , Cypress . , .
- Network traffic control – Cypress / , .
- スクリーンショットとビデオ-サイプレスは、テスト中のブラウザ画面（MP4）のビデオを、ウィンドウの指示とともに記録します。
もちろん、これらすべてのものは、CIでブラウザを開かなくても実行でき、ヘッドレスChromeまたはElectronが使用されます。
しかし、いくつかの問題もありました。
最初は、サーバーへのXHR要求が終了するのを待つことができ、代わりにタイムアウトを挿入できることを知りませんでした。テストはランダムに失敗しました。修正しました。
その後、Hot Reloadが1回おきに機能し、変更が適用されたかどうかわからなかったため、サイプレス全体を常に再起動する必要がありました。私のIDE（IntelliJ IDEA）には、このような不正なチェックボックスがあり、デフォルトでも有効になっていることが判明しました。そのため、ファイルの保存は保存ではなく、最終的には保存されることがわかりました。
次の問題は、私のアプリケーションがサーバーへの要求にウィンドウフェッチを使用していて、サイプレスがXHR要求しか認識しないことでした。 StackOverflowからのダーティハックが役立ちました（フェッチメソッドがウィンドウから削除され、ブラウザがフェッチではなくXHRでフォールバックすることを理解しています）：
次に、モバイルブラウザをエミュレートする問題が発生しました。これは、ユーザーエージェントのテストコードでは機能しませんでしたが、別の特別なファイルで機能しました-すべてがうまくいった。
次に、CORSの問題が解決されました。
次に、ファイルのアップロードが突然機能せず、標準のソリューションは機能しませんでしたが、cypress-file-uploadライブラリが役立ちました。
私が解決できなかった唯一の問題は、テストの再現性でした。つまり、テスト（フィクスチャ）を実行するための安定した同一の初期データです。これは、サイプレスではなく構成タスクですが、まだ解決されていません。
その結果、サイプレスは、次の場合にプロジェクトに自動テストを導入するための優れたツールのように見えます。
- JSの知識がある
- IE6以降、すべての種類のブラウザーでテストする必要はありません（Cypressは現在、 Chrome、Chromium、Edge、Electron、Firefoxをサポートしています）。これがトピックの議論です。しかし、1年前にサイプレスを使い始めたときは、UIなしの起動で最新バージョンのChromeとElectronしかサポートしていなかったと言えます。
- すぐにテストを行い、誰かがアプリケーションを壊すまでそれらを忘れたい:)
サイプレス：それを持って使ってください！