Cara Mengendalikan Dropdown Dinamik dalam Cypress

소개

동적 드롭다운을 처리하는 것은 최신 웹 애플리케이션에서 일반적인 과제이며, 특히 드롭다운 옵션이 API에서 동적으로 가져오거나 사용자 상호 작용에 따라 로드되는 경우 더욱 그렇습니다. Cypress를 사용하여 이러한 드롭다운에 대한 테스트를 자동화할 때는 약간의 지연 후에 렌더링되더라도 올바른 옵션이 선택되었는지 확인해야 합니다.

이 블로그에서는 Cypress에서 동적 드롭다운과 상호 작용하는 프로세스를 안내하고 API 응답으로 채워진 드롭다운과 사용자 입력에 따라 변경되는 드롭다운을 비롯한 일반적인 시나리오에 대한 예를 제공합니다.

동적 드롭다운이 어려운 이유는 무엇입니까?

동적 드롭다운은 종종 다음과 같은 이유로 테스트 문제를 야기합니다.

• 처음에는 옵션이 없습니다. 드롭다운 옵션은 사용자 작업 또는 API 호출 후에 비동기적으로 로드될 수 있습니다.
• 드롭다운 콘텐츠 변경: 사용자 입력이나 상호 작용에 따라 드롭다운 옵션이 동적으로 변경될 수 있습니다.
• DOM 업데이트: Cypress는 드롭다운과 상호작용하기 전에 DOM이 업데이트될 때까지 기다려야 합니다.

Cypress는 이러한 과제를 처리하기 위한 여러 가지 강력한 명령을 제공하므로 동적 드롭다운에서 올바른 옵션을 안정적으로 선택할 수 있습니다.

동적 드롭다운 처리에 대한 단계별 가이드

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!

Atas ialah kandungan terperinci Cara Mengendalikan Dropdown Dinamik dalam Cypress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!