前に記事、サイプレスでの構成と、JSONファイルで構成できるさまざまなオプションを見ました。この記事は理解します サイプレスプロミス 及び サイプレス非同期 私たちのプロジェクトでの実践的な実装と例による行動。また、非同期コードに待機を組み込む方法や、次のようないくつかの重要な関数についても説明します。 wrap() 及び task()。始めましょう！

サイプレスプロミスとサイプレス非同期：

サイプレスプロミス 及び サイプレス非同期 自然は本質的な概念のいくつかです。他のJavascriptフレームワークと同様に、サイプレスも非同期とプロミスを中心に展開しています。サイプレスはすべての非同期動作を内部で処理し、ユーザーには表示されません。我々は使用するだろう .then() コードでpromiseを手動で処理します。サイプレスの非同期動作を操作できるnpmのCypress-promiseのような外部パッケージがあります。これらの各トピックについて詳しく説明します。

サイプレスプロミス

サイプレス非同期

私たちが知っているように、サイプレスはに基づいています ノードJS。 Node.jsからビルドされたフレームワークはすべて 非同期。サイプレスの非同期動作を理解する前に、同期と非同期の性質の違いを知っておく必要があります。

同期の性質

同期プログラムでは、コードの実行中に、最初の行が正常に実行された場合にのみ、XNUMX番目の行が実行されます。最初の行が実行されるまで待機します。順次実行されます。

非同期の性質

コードは同時に実行され、前のコマンドの状態を気にすることなく、各ステップが実行されるのを待ちます。コードを順番に記述しましたが、非同期コードはステップが完了するのを待たずに実行され、前のコマンド/コードから完全に独立しています。

サイプレスの非同期とは何ですか？

すべてのサイプレスコマンドは本質的に非同期です。 サイプレスには、私たちが書いたシーケンシャルコードを理解し、それらをラッパーにエンキューし、後でコードを実行するときに実行するラッパーがあります。したがって、サイプレスは、非同期の性質と約束に関連するすべての作業を行います！

その例を理解しましょう。

 it（'テクノロジーオプションをクリックしてテクノロジーURLに移動します'、function（）{cy.visit（'https://lambdageeks.com/'）//コマンドは実行されません//テクノロジーオプションcyをクリックします。 get（'。fl-node-5f05604c3188e>.fl-col-content> .fl-module> .fl-module-content> .fl-photo> .fl-photo-content> a> .fl-photo-img' ）//ここでも何も実行されません.click（）//まだ何も起こりませんcy.url（）//ここでもコマンドは実行されません.should（'include'、'/ technology'）//いいえ、何もありません。}）; //これで、すべてのテスト関数の実行が完了しました//サイプレスはすべてのコマンドをキューに入れました、そして今、それらは順番に実行されます

それはとてもシンプルで楽しかったです。これで、サイプレスの非同期コマンドがどのように機能するかがわかりました。同期コードと非同期コードを混在させようとしている場所について詳しく見ていきましょう。

サイプレスの同期コマンドと非同期コマンドの混合

ご覧のとおり、サイプレスコマンドは非同期です。同期コードを挿入する場合、サイプレスは同期コードが実行されるのを待ちません。したがって、同期コマンドは、前のサイプレスコマンドを待たなくても最初に実行されます。理解を深めるために、短い例を見てみましょう。

 it（'テクノロジーオプションをクリックしてテクノロジーURLに移動します'、function（）{cy.visit（'https://lambdageeks.com/'）//テクノロジーオプションをクリックしますcy.get（'。fl- node-5f05604c3188e> .fl-col-content> .fl-module> .fl-module-content> .fl-photo> .fl-photo-content> a> .fl-photo-img'）.click（）cy .url（）//ここでもコマンドは実行されません.should（'include'、'/ technology'）//いいえ、何もありません。console.log（ "これはログをチェックするためです"）//非同期動作をチェックするためのログ}）; }）;

ログは、同期コマンドであるコードの最後に追加されます。テストを実行すると、ページが読み込まれる前でもログが印刷されていることがわかります。このように、サイプレスは同期コマンドを待たずに、コマンドを実行する前でも実行します。

期待どおりに実行したい場合は、 .then() 関数。例を挙げて理解しましょう。

it（'テクノロジーオプションをクリックしてテクノロジーURLに移動します'、function（）{cy.visit（'https://lambdageeks.com/'）//テクノロジーオプションをクリックしますcy.get（'。fl- node-5f05604c3188e> .fl-col-content> .fl-module> .fl-module-content> .fl-photo> .fl-photo-content> a> .fl-photo-img'）.click（）cy .url（）//ここでもコマンドは実行されません.should（'include'、'/ technology'）//いいえ、何もありません。.then（（）=> {console.log（ "これはログをチェックするためです"） //非同期動作を確認するためにログを記録します}）;}）;

サイプレスプロミスとは？

上で見たように、サイプレスは実行前にすべてのコマンドをキューに入れます。詳細に言い換えると、次のように言えます。 サイプレスは、promise（コマンド）をpromiseのチェーンに追加します。 サイプレスは、すべてのコマンドをチェーン内の約束として合計します。

Promiseを理解するには、それらを実際のシナリオと比較します。説明は、非同期の性質でもPromiseを定義します。誰かがあなたに約束した場合、彼らはどちらか 拒否する or 満たす 彼らが行った声明。同様に、非同期では、次のいずれかを約束します 拒否する or 満たす 約束で包むコード。

ただし、サイプレスはすべての約束を処理し、カスタムコードでそれらを操作する必要はありません。 Javascriptプログラマーとして、私たちは使用することに興味を持っています待つ私たちのコマンドで。サイプレスAPIは、私たちが一般的に使用しているものとは完全に異なります。これについては、このチュートリアルの後半で詳しく説明します。

サイプレスの約束の状態

Promiseには、サイプレスコマンドに基づいてXNUMXつの異なる状態があります。彼らです

解決済み – step /コマンドが正常に実行されたときに発生します。
掲載予定の求人 –実行が開始されたが、結果が不確実な状態。
拒絶 –ステップが失敗したときに発生します。

Javascriptプログラマーとして、私たちはコードにpromiseを記述して返す傾向があります。例えば、

//このコードはデモンストレーション専用ですdescribe（'Cypress Example'、function（）{it（'テクノロジーオプションをクリックしてテクノロジーURLに移動します'、function（）{cy.visit（'https：//lambdageeks。 com /'）//テクノロジーオプションをクリックしますcy.get（'。fl-node-5f05604c3188e> .fl-col-content> .fl-module> .fl-module-content> .fl-photo> .fl- photo-content> a> .fl-photo-img'）.then（（）=> {return cy.click（）;}）cy.url（）.then（（）=> {return cy.should（' include'、' / technology'）}）}）;}）;

ここでは、各コマンドにpromiseを返します。これはサイプレスでは必要ありません。幸い、サイプレスはすべてのプロミスを内部で処理するため、各ステップでプロミスを追加する必要はありません。サイプレスには 再試行可能性 オプション。コマンドを実行するために特定の時間再試行します。手動でpromiseを含めないコードの例を示します。

    it（'テクノロジーオプションをクリックしてテクノロジーURLに移動します'、function（）{cy.visit（'https://lambdageeks.com/'）//テクノロジーオプションをクリックしますcy.get（'。fl- node-5f05604c3188e> .fl-col-content> .fl-module> .fl-module-content> .fl-photo> .fl-photo-content> a> .fl-photo-img'）.click（）cy .url（）.should（'include'、'/ technology'）}）; }）;

上記のコードは不器用ではなく、読みやすく、理解しやすいものです。サイプレスはすべての約束の仕事を処理し、それはユーザーから隠されています。したがって、約束の処理や返却について心配する必要はありません。

サイプレスでawaitをどのように使用しますか？

上で説明したように、サイプレスには、コマンドキューを作成し、それらを順番に実行することによって非同期コードを処理する方法があります。追加する awaits コマンドへのは期待どおりに機能しません。サイプレスはすべてを内部で処理しているので、追加しないことをお勧めします awaits コードに。

待機を追加する必要がある場合は、次のようなサードパーティライブラリを使用できます。サイプレス-約束それはサイプレスの働き方を変えます。このライブラリを使用すると、約束コマンドで、を使用します待つコード内

awaitsの使い方と使わない方法を理解しましょう。

このような待機は使用しないでください

//この方法でawaitを使用しないdescribe（'Visit the page'、（）=> {（async（）=> {cy.visit（'https://lambdageeks.com/'）await cy.url（）。 should（'include'、'/ technology'）;}）（）}）

代わりに、このように使用できます

describe（'Visit the page'、（）=> {cy.visit（'https://lambdageeks.com/').then(async（）=> await cy.url（）。should（'include'、 ' /テクノロジー'） （）） }）

これは、すべてのサイプレスコマンドで機能します。

サイプレスラップ

wrap() は、引数として渡されるオブジェクトを生成するサイプレスの関数です。

構文

cy.wrap(subject)
cy.wrap(subject, options)

アクセス方法の例を見てみましょう wrap() 私たちのコードで。

const getName =（）=> {return'Horse'} cy.wrap（{name：getName}）。invoke（'name'）。should（'eq'、'Horse'）// true

この例では、 getName 次に、その名前を呼び出します。

サイプレスラッププロミス

コードによって返されるpromiseをラップできます。コマンドは、生成された値とにアクセスする前に、promiseが解決されるのを待ちます。次に、次のコマンドまたはアサーションに進みます。

const customPromise = new Promise（（resolve、reject）=> {// setTimeout（）関数を使用して非同期コードにアクセスします。setTimeout（（）=> {resolve（{type：'success'、message：'Apples and Oranges' 、}）}、2500）}）it（'promiseが解決するのを待つ必要があります'、（）=> {cy.wrap（customPromise）.its（'message'）。should（'eq'、'Apples and Oranges' ）}）;

の議論が cy.wrap() は約束です、それは約束が解決するのを待ちます。約束が拒否された場合、テストは失敗します。

サイプレス-promisenpm

サイプレスの約束を操作したい場合は、ライブラリまたはパッケージを追加で使用できます。サイプレス-約束それをコードに組み込みます。このパッケージを使用すると、サイプレスコマンド約束に入れて、コードを待つか非同期にすることができます。ただし、これらの条件は機能しません before or beforeEach ブロック。最初に、ターミナルで次のコマンドを渡して、プロジェクトにパッケージをインストールする必要があります。

npm i cypress-promise

インストールすると、端末は次のようになります。

インストール後、ライブラリをテストファイルにインポートする必要があります。

import promisify from 'cypress-promise'

このライブラリを使用すると、ネイティブサイプレスプロミスを作成してオーバーライドし、コードでawaitsとasyncを使用できます。あなたは約束にアクセスする必要があります promisify キーワード。同じ例を見てみましょう。

import promisify from'cypress-promise' it（'should run tests with async / await'、async（）=> {const apple = await promisify（cy.wrap（'apple'））const oranges = await promisify（cy.wrap （'oranges'））expect（apple）.to.equal（'apple'）expect（oranges）.to.equal（'oranges'）}）;

これはとてもシンプルで楽しく学ぶことができました！このようにして、サイプレスで非同期コードを割り当てることができます。

サイプレス非同期タスク

task() Nodeでコードを実行するサイプレスの関数です。このコマンドを使用すると、結果をコードに返す前に、ブラウザーからノードに切り替えてノードでコマンドを実行できます。

構文

cy.task(event)
cy.task(event, arg)
cy.task(event, arg, options)

task() 値またはpromiseのいずれかを返します。 task() 約束が次のように返される場合は失敗します undefined。このようにして、一部のシナリオでイベントが処理されない場合のタイプミスをユーザーが把握するのに役立ちます。値を返す必要がない場合は、 null 値。

よくあるご質問

サイプレスは同期ですか、それとも非同期ですか？

サイプレスは 非同期 コマンドの実行が完了するのを待つのではなく、キューに入れられたコマンドを返すことによって。非同期ですが、それでもすべてのテストステップを順番に実行します。サイプレスエンジンはこのすべての動作を処理します。

サイプレスでプロミスチェーンをキャッチすることは可能ですか？

サイプレスは、約束を果たせないように設計されています。これらのコマンドは正確にはPromiseではありませんが、Promiseのように見えます。このように、次のような明示的なハンドラーを追加することはできません catch.

サイプレスの約束とサイプレスの非同期：13の重要な事実