Cypress を使用して要素が存在するかどうかを確認するにはどうすればよいですか?

Cypress は、Web 開発者やテスターが Web サイトが適切に動作することを確認するのに役立つツールです。 Web サイトの特定の部分が存在するかどうかを確認できます。これは、ユーザーが問題を発見する前に問題を発見するのに役立つため便利です。要素の存在は、プロジェクトで Cypress を使用して最初にテストする必要があるものの 1 つです。この記事では、要素が存在するかどうかをテストする方法を見ていきます。また、存在する場合、表示されているかどうかをどのように確認しますか?

サイプレスエレメントとは何ですか?

• Web アプリケーションの要素は、Web ページの構造とコンテンツを構成する個々の HTML 要素を指します。
• 要素の例には、ボタン、テキスト ボックス、リンク、画像が含まれ、それぞれに ID、クラス、スタイルなどの独自の属性があります。
• これらの属性は、CSS または JavaScript セレクターと対話するために使用できます。

要素はページの構造と動作を定義するため重要です。
要素を選択して操作することで、Web アプリケーションがすべてのユーザーに対して期待どおりに動作することを確認する自動テストを作成できます。
Cypress では、要素とは、操作またはテストする Web サイトの HTML 要素です。
これらの要素を操作またはテストするには、CSS と同様のセレクターを使用して要素を選択するだけです。

Cypress ではなぜ要素の存在が重要なのでしょうか?

ウェブサイトは、ボタンやフォームなどのインタラクティブなピースを備えたパズルのようなものです。テストには、これらの部品が正しい場所に配置され、適切に機能することを確認することが含まれます。 Web サイトのさまざまな部分はユーザーのアクションに基づいて変更される可能性があるため、要素が存在するかどうかを確認することが重要です。

たとえば、フォームに記入した後に「送信」ボタンが表示される場合があるため、それが表示されたかどうかを確認する必要があります。これにより、ユーザーが問題に遭遇する前に問題を特定し、よりスムーズなエクスペリエンスを実現できます。

Cypress を使用して要素の存在を確認するにはどうすればよいですか?

Cypress は、Web ページ上の要素の存在を確認するためのいくつかの方法を提供します。それぞれのアプローチを詳しく見て、それらを効果的に実装する方法を理解しましょう。

1. cy.get() メソッド

real-device-cloud-cta.jpg
Cypress の cy.get() メソッドは、クラス名、ID、属性などのさまざまなセレクターに基づいてページ上の要素を選択および取得するために使用されます。要素が存在するかどうかを確認するには、開発者は cy.get() メソッドとともに should() コマンドを使用できます。

cy.get() で .Should('exist') アサーションを使用すると、選択した要素がページ上に存在することが保証されます。

2. cy.contains() メソッド

cy.contains() メソッドは、テキスト コンテンツに基づいて要素を検索するために使用されます。このメソッドは、特定のテキストを含む要素がページ上に存在するかどうかを確認するために利用することもできます。

3. cy.find() メソッド

cy.find() メソッドは、親要素内のネストされた要素を処理する場合に便利です。これにより、別の要素のコンテキスト内で要素を検索できるため、より焦点を絞った検索が可能になります。

4.カスタム アサーション

を使用した cy.get().Should()

Cypress を使用すると、開発者は cy.Should() メソッドを使用してカスタム アサーションを作成できます。これは、要素の存在だけを超えて、より具体的なチェックを実装したい場合に特に便利です。

5.タイムアウトを指定した .Should() の使用

場合によっては、要素が非同期で読み込まれるか、わずかに遅延して読み込まれることがあります。このような場合、タイムアウトを指定して .Should() アサーションを使用すると、Cypress が要素が表示されるまで待機するようになります。

Cypress を使用した条件付きテスト:
Cypress の条件付きテストは、条件付きロジックをテスト スクリプトに統合して、テスト実行中に特定の条件や結果に基づいて意思決定を行い、アクションを実行することです。この方法を使用すると、さまざまなシナリオを処理し、それに応じて応答できる、より柔軟で適応性のあるテストを設計できます。 Cypress は、効果的な条件付きテストを実現するために利用できるさまざまなコマンドと API を提供します。以下は、条件付きテストに Cypress を使用する方法を示しています。

例-1

この例では、テスト スクリプトは Web ページにアクセスし、要素の存在とページのタイトルに対して条件付きテストを実行します。条件が満たされるかどうかに応じて、スクリプトは対応するメッセージを Cypress テスト出力に記録します。

real-device-cloud-cta.jpg
Cypress は、テスト スクリプト内で条件付きテストを実行するための流暢で直感的な構文を提供します。アサーション、プロミス、および通常の JavaScript ロジックを使用して、複雑な条件と、それらの条件の結果に基づいたアクションを構築できます。

Cypress の条件付きテストは、他のテスト フレームワークと同様に、さまざまなシナリオに適応できる、より多用途で効果的なテストを作成するのに役立ち、テスト プロセスをより堅牢で信頼性の高いものにします。

例 2:

このコード スニペットでは、Cypress はまず .Should(‘exist’) を使用してボタン要素の存在を確認します。次に、.then() を使用して要素を取得し、その後の条件チェックでボタンが存在するかどうかを判断します。条件が満たされ、ボタンが存在することを示す場合、Cypress は cy.wrap(button).click() を使用してボタンをクリックします。条件が失敗した場合、else ブロックにより代替アクションの実行が容易になります。

要素の存在チェックの実世界への応用:

要素の存在をチェックすることが非常に役立つ日常の状況について考えてみましょう:

1.フォーム成功メッセージ

ユーザーがフォームを送信すると、成功メッセージが表示される場合があります。 Cypress を使用すると、そのメッセージが表示されるかどうかを確認でき、ユーザーはフォームが正常に送信されたことを確認できます。

2.メニューナビゲーション

ユーザーがボタンの上にマウスを移動すると、ドロップダウン メニューが表示されます。ユーザーがホバー操作を行ったときにメニューが表示されることを確認したいとします。

3.レスポンシブデザイン

サイトのモバイル版とデスクトップ版では、異なる要素が表示されたり消えたりする場合があります。 Cypress を使用すると、これらの要素が意図したとおりに表示または非表示になるようにすることができます。

4.ユーザーアクセス制御

特定のボタンやリンクは、特定のタイプのユーザーにのみ表示される場合があります。 Cypress は、これらの要素が適切な人に表示されるかどうかを検証するのに役立ちます。

こちらもお読みください: Cypress 並列テスト: コード例を含むステップバイステップのチュートリアル

結論

Cypress のようなツールのおかげで、Web テストはもはや難しくて時間のかかる作業ではなくなりました。 「要素が存在する場合」機能は条件付きテストの本質をカプセル化しており、開発者とテスターは実際のユーザーの操作を忠実に模倣したテストを作成できます。この機能はテストを簡素化するだけでなく、アプリケーションの動作に対するより思慮深いアプローチを促進します。 Cypress の直感的なコマンドと強力なアサーションを活用することで、開発者はテスト スイートを合理化し、冗長性を減らし、より堅牢な Web アプリケーションを構築できます。したがって、Cypress のパワーを活用して、Web 開発プロジェクトの品質を向上させる旅に乗り出しましょう。

出典: このブログはもともと testgrid.io

で公開されました。

以上がCypress を使用して要素が存在するかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。