Cypress で動的ドロップダウンを処理する方法

導入

動的なドロップダウンの処理は、特にドロップダウン オプションが API から動的にフェッチされる場合、またはユーザー インタラクションに基づいて読み込まれる場合に、最新の Web アプリケーションでよくある課題です。 Cypress を使用してこのようなドロップダウンのテストを自動化する場合は、たとえ遅延が発生してからレンダリングされるとしても、適切なオプションが選択されていることを確認する必要があります。

このブログでは、Cypress で動的ドロップダウンを操作するプロセスを説明し、API 応答によって設定されるドロップダウンやユーザー入力に基づいて変化するドロップダウンなどの一般的なシナリオの例を示します。

動的ドロップダウンが難しいのはなぜですか?

動的ドロップダウンは、次の理由からテストの課題を引き起こすことがよくあります。

• オプションは最初は存在しません: ドロップダウン オプションは、ユーザー アクションまたは API 呼び出しの後に非同期で読み込まれる可能性があります。
• ドロップダウン コンテンツの変更: ユーザー入力または操作に基づいて、ドロップダウン オプションは動的に変更される場合があります。
• DOM の更新: Cypress は、ドロップダウンを操作する前に、DOM が更新されるのを待つ必要があります。

サイプレスは、これらの課題に対処するためのいくつかの強力なコマンドを提供し、動的なドロップダウンから適切なオプションを確実に選択できるようにします。

動的ドロップダウンを処理するためのステップバイステップ ガイド

Cypress が動的ドロップダウンをどのように処理できるかを理解するために、基本的な例を見てみましょう。

ステップ 1: ドロップダウン トリガーを操作する
ほとんどの動的ドロップダウンは最初は非表示になっており、ユーザーがボタンまたは入力フィールドをクリックしたときにのみ表示されます。まず、トリガー要素を操作する必要があります。

HTML の例:

<select id="country-dropdown">
  <option value="" disabled selected>Select a country</option>
</select>
<button id="load-countries">Load Countries</button>

ユーザー操作をシミュレートするには:

it('should click the button to load dropdown options', () => {
  cy.visit('/dropdown-page'); // Visit the page with the dynamic dropdown
  cy.get('#load-countries').click(); // Click the button to load the dropdown options
});

これによりボタンがクリックされ、この例では API 呼び出しまたは別のプロセスがトリガーされ、ドロップダウン オプションが動的に設定されます。

ステップ 2: ドロップダウンが表示されるまで待ちます
動的ドロップダウンでは、オプションがすぐに使用できない場合があります。 Cypress は should('exist') のようなアサーションを使用したり、要素が利用可能になるのを待つことができます。

入力後のドロップダウンの処理例:

it('should wait for dropdown options to be populated', () => {
  cy.get('#country-dropdown').should('exist').click(); // Click to open the dropdown

  // Wait for the dropdown options to populate
  cy.get('#country-dropdown option').should('have.length.greaterThan', 1);
});

ここで、Cypress はドロップダウン オプションが利用可能になるまで待ってから続行します。

ステップ 3: オプションを動的に選択します
ドロップダウンに値が入力されたら、cy.select() を使用するか、DOM 要素を直接操作して、目的のオプションを選択できます。

国の選択例:

it('should select a country from the dynamic dropdown', () => {
  cy.get('#country-dropdown').select('India'); // Select by visible text
});

ドロップダウンでネイティブの が使用されていない場合は、要素 (例: カスタム ドロップダウン コンポーネント) では、ドロップダウン オプションを手動でクリックできます:

it('should manually select a country from a custom dropdown', () => {
  cy.get('#country-dropdown').click(); // Open the dropdown

  // Select the desired option by clicking on the visible text
  cy.contains('li', 'India').click(); 
});

タイプおよび検索の動的ドロップダウンの処理

最近のアプリケーションの多くは、入力して検索するドロップダウンを使用しており、ユーザーは入力フィールドに入力し、入力されたテキストに基づいてドロップダウン オプションが動的にフィルターされます。 Cypress でこのようなシナリオを処理する方法を見てみましょう。

入力して検索する動的ドロップダウンの例
HTML 構造の例:

<div class="search-dropdown">
  <input type="text" id="search-input" placeholder="Search countries...">
  <ul id="dropdown-options">
    <li>USA</li>
    <li>Canada</li>
    <li>Australia</li>
  </ul>
</div>

この場合、ドロップダウンのオプションはユーザーの入力に基づいてフィルタリングされます。

ステップ 1: オプションの入力とフィルター
入力フィールドに入力するとき、Cypress はユーザーの入力をシミュレートし、オプションを動的にフィルタリングできます。

it('should filter and select a country from a type-and-search dropdown', () => {
  cy.get('#search-input').type('Can'); // Type into the input field to filter options

  // Verify that the filtered result appears
  cy.get('#dropdown-options li').should('have.length', 1);

  // Verify that the option matches the search term
  cy.get('#dropdown-options li').first().should('contain.text', 'Canada');

  // Click to select the filtered option
  cy.get('#dropdown-options li').first().click();
});

この場合、ドロップダウンのオプションはユーザーの入力に基づいてフィルタリングされます。

ステップ 1: オプションの入力とフィルター
入力フィールドに入力するとき、Cypress はユーザーの入力をシミュレートし、オプションを動的にフィルターできます。

it('should filter and select a country from a type-and-search dropdown', () => {
  cy.get('#search-input').type('Can'); // Type into the input field to filter options

  // Verify that the filtered result appears
  cy.get('#dropdown-options li').should('have.length', 1);

  // Verify that the option matches the search term
  cy.get('#dropdown-options li').first().should('contain.text', 'Canada');

  // Click to select the filtered option
  cy.get('#dropdown-options li').first().click();
});

このコードは、検索ボックスに「Can」と入力することをシミュレートし、ドロップダウンがフィルターされて「カナダ」のみが表示されていることを確認し、そのオプションを選択します。

ステップ 2: ドロップダウン オプションが動的に読み込まれるまで待ちます (API 主導)
場合によっては、入力して検索するドロップダウンは、ユーザーの入力に基づいてオプションを返す API によってサポートされています。 Cypress は API 応答を待ってオプションを検証できます。

it('should handle type-and-search dropdown populated by API', () => {
  // Intercept the API call triggered by typing
  cy.intercept('GET', '/api/countries?search=Can', {
    fixture: 'filtered-countries.json'  // Mocked API response with filtered data
  }).as('searchCountries');

  // Type into the input to trigger the API call
  cy.get('#search-input').type('Can');

  // Wait for the API response
  cy.wait('@searchCountries');

  // Validate the filtered results
  cy.get('#dropdown-options li').should('have.length', 1);
  cy.get('#dropdown-options li').first().should('contain.text', 'Canada');

  // Select the option
  cy.get('#dropdown-options li').first().click();
});

ここでは、cy.intercept() を使用して、型指定された入力に基づいてフィルターされたオプションを取得する API リクエストをインターセプトし、モックします。

API 呼び出しによって入力されたドロップダウンの処理

動的ドロップダウンは API 呼び出しによって設定されることが多く、サーバーが応答するまでデータは利用できません。これらのドロップダウンを処理するために、Cypress はネットワーク呼び出しをモックまたはインターセプトする cy.intercept() を提供します。

API レスポンスをインターセプトし、動的に入力されたドロップダウンから値を選択する例を次に示します。

it('should handle dropdown populated by API', () => {
  // Intercept the API call
  cy.intercept('GET', '/api/countries', { fixture: 'countries.json' }).as('getCountries');

  cy.get('#load-countries').click(); // Trigger the API call

  // Wait for the API call to complete
  cy.wait('@getCountries');

  // Now select an option from the populated dropdown
  cy.get('#country-dropdown').select('Australia');
});

In this case, we use cy.intercept() to mock the /api/countries endpoint and provide a fixture (countries.json) with predefined data. This ensures that the dropdown is populated with the expected values, even in a test environment.

Handling Custom Dropdown Components

Many modern frameworks (like React, Angular, or Vue) use custom dropdown components that don’t use native

elements. These components often have their own structure and require custom handling.

Here’s an example with a custom dropdown built using div and li elements:

<div class="dropdown">
  <div class="dropdown-trigger">Select a country</div>
  <ul class="dropdown-options">
    <li>USA</li>
    <li>Canada</li>
    <li>Australia</li>
  </ul>
</div>

Here’s how to interact with this type of custom dropdown in Cypress:

it('should select an option from a custom dropdown', () => {
  cy.get('.dropdown-trigger').click(); // Open the custom dropdown
  cy.contains('.dropdown-options li', 'Canada').click(); // Select the option
});

Best Practices for Handling Dynamic Dropdowns in Cypress

1. Use Proper Selectors: Always use specific selectors to avoid flaky tests. Prefer data-* attributes or IDs over generic class selectors.

2. Handle Delays and Dynamic Content: Cypress automatically waits for elements to appear, but you may still need to use .should() or cy.wait() for AJAX-based dropdowns.

3. Mock API Responses: Use cy.intercept() to mock API calls when testing dropdowns populated by dynamic data.

4. Check Dropdown State: Ensure you verify both the closed and open states of the dropdown, especially when dealing with custom components.

5. Avoid Hard-Coding Delays: Instead of using cy.wait(time), leverage cy.intercept() and cy.wait() for API responses to ensure that tests wait for the actual data rather than arbitrary timeouts.

Conclusion

Handling dynamic dropdowns in Cypress doesn’t have to be complicated. With Cypress’s built-in commands like cy.get(), cy.select(), and cy.intercept(), you can easily interact with both native and custom dropdowns, regardless of whether the content is rendered dynamically. By following best practices and using appropriate selectors and waits, you can make your tests more robust, reliable, and maintainable.

Try out these techniques in your Cypress tests to handle dynamic dropdowns effortlessly!

以上がCypress で動的ドロップダウンを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。