Cypress によるインターネット: Heroku の「インターネット」プレイグラウンドからの現実世界のシナリオ

私は最近、chatGPT に行って、同じシステムでしばらく作業したり、特定の種類のユーザー フローのみに自動化を提供したりした後、何か良い自動化の実践方法はないかと尋ねました。何かを忘れてしまうことがあるので、練習できるサイトをいくつか探したところ、インターネットを見つけました。
このサイトは初歩的なように見えますが、自動化を試すための場所を提供しており、現時点ではこれが私に必要なすべてでした。私は時間をかけて、Cypress を使用していくつかの古典的な Web の課題に取り組みました。
それでは、早速、私が自動化したいくつかのシナリオを見ていきましょう。魔法のように行き来するボタン、奇妙なドラッグ アンド ドロップ、ファイル関連の自動化、簡単な Shadow DOM 作業まで、すべてをカバーしています。

1. ドラッグ アンド ドロップ: ドラッグ アンド ドロップを自動化しようとしたことがあるなら、それが思ったほど簡単ではないことをご存知でしょう。 Cypress は特定のインタラクションをネイティブでサポートしていますが (私は実際にそれを試しました (笑))、ここでドラッグ アンド ドロップ テストを適切に実行するには、まだいくらかの創造性が必要です。

この場合、trigger('mousedown')、trigger('dragover')、およびtrigger('mouseup')を使用して、カスタムのdragAndDropコマンドを実験しました。このサイトでの機能の実装方法により、このテストを機能させるにはもう少し深く掘り下げる必要がありましたが、最近のアプリのほとんどでは、(ありがたいことに) cypress プラグインで十分なようです。

1. 要素の追加/削除:

この演習の [要素の追加] ボタンは理論的には簡単ですが、このプレイグラウンドが時々あなたの期待を台無しにしようとするのは面白いです (笑)。一度クリックすると...削除ボタンが表示されます (これはあまり直感的ではありませんが、操作するだけです)。重要なのは、テストで安定して再現可能な方法で追加と削除のダンスを確実に処理することです。 Cypress では、ボタンが表示されるかどうかを確認し、ボタンをさらにいくつか追加して、シーケンスが乱れないように 1 つずつ削除します。

プロのヒント:
現れたり消えたりする要素を追跡するのは難しい場合がありますが、Cypress の .Should('exist') および .Should('not.exist') アサーションはこれをうまく処理します。さらに、毎回素晴らしい視覚的な確認が得られます。

1. 動的コンテンツ:

これはこの記事の例の中で最も単純だと思いますが、それでも興味深いものになる可能性があります。アイデアは、コンテンツの形式が定数であることを確認するテストを作成することだけでした。常に変化します...それでも学習には役立ちます。

Cypress は、実際のコンテンツにこだわりすぎずに、要素が期待どおりにロードされることを確認できるため、テストの回復力が維持されます。

1. 動的コントロール:

この場合、チェックボックスやボタンなどのコントロールは、ユーザーの操作に基づいて表示または非表示になります。読み込みインジケーターが消えるまで待つ必要があるものもあります。ここで、Cypress の cy.wait と .Should('be.visible') が重要です。

簡単なヒント:

ハードコーディングされた待機の代わりに、.Should('exist') や .Should('be.disabled') などのアサーションを使用して、ページのステータスに反応します。これにより、テストがより堅牢で適応性のあるものになります。

1. ファイルのダウンロード:

ファイルのダウンロードは、それが実際に行われたことを証明するまでは簡単に思えるかもしれません。 Cypress では、ファイルが実際にダウンロードされたことを確認するためにさまざまなことができます。

ダウンロードが完了したことを確認するためにさまざまなことができますが、このアプリケーションでは、リンクをクリックした後にダウンロード フォルダーにファイルがあることを確認しました。それは非常に簡単で、ファイルがそこに存在すると、テストは自動的にパスします。たとえば、cy.intercept を使用してダウンロード リクエストが発行されたことを確認するなど、他の戦略を適用することもできます。

1. ファイルのアップロード: ファイルのダウンロードと同様に、ファイルのアップロードも Cypress を使用すると驚くほどスムーズです。

このタイプのシナリオでは、cypress-file-upload のようなものを使用できます
これは非常に優れた便利なプラグインであり、ファイルがアプリによって処理されていることを確認します。

私の例では、行われたのはすべて .selectFile コマンドであり、実際のファイルを送信せずにそれを実行する方法があります。Cypress.Buffer を使用するだけでうまくいくはずです (内部の実装を見ることができます)以下にリンクされているリポジトリ)。

これは、ボタンのクリックによるアップロードだけでなく、ドラッグ アンド ドロップによるアップロードでも機能しました。非常に簡単です...ありがとう、サイプレス ?.

1. シャドウ DOM:

Shadow DOM の謎は、要素がメイン DOM 内の秘密のようなものであることです。これらは隠れた場所にあり、通常の CSS 表示ルールに従っていないため、自動化を実行する方法によっては少し難しい場合があります。ありがたいことに、Cypress はこのベールを突き破り、隠された要素を見つけるシャドウ コマンドをサポートしています。

これらのテストでは、cy.get('element').shadow() を使用して Shadow DOM 内の要素にアクセスしました。その後、問題や困難はなくなり、通常と同じように要素にアクセスしてアサーションを実行できます。通常のものと。

---

これで今は終わりです。Cypress を使用して基本的なブラウザ自動化の使用法に対処する方法と、そのようなケースに対処するときにそれを活用して作業を容易にする方法についての簡単な 6 つの例です。 .

試してみる準備はできましたか?

これらのテストを試してみたり、プロジェクトに適用したりすることに興味がある場合は、私の GitHub リポジトリでコードを利用できるようにしました。テスト スイートは非常に軽量なので、疑問点はあまり多くありません。また、GitHub Actions フローが用意されているので、これを使用すると、実際にすべてがどのように機能するかを確認できます。ありがとう、また会いましょう!

以上がCypress によるインターネット: Heroku の「インターネット」プレイグラウンドからの現実世界のシナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。