Umgang mit dynamischem Dropdown in Cypress

pengenalan

Mengendalikan lungsur turun dinamik ialah cabaran biasa dalam aplikasi web moden, terutamanya apabila pilihan lungsur turun diambil secara dinamik daripada API atau dimuatkan berdasarkan interaksi pengguna. Apabila mengautomasikan ujian untuk menu lungsur seperti itu menggunakan Cypress, anda perlu memastikan bahawa pilihan yang betul dipilih, walaupun ia diberikan selepas beberapa kelewatan.

Blog ini akan membimbing anda melalui proses berinteraksi dengan menu lungsur dinamik dalam Cypress dan memberikan contoh untuk senario biasa, termasuk menu lungsur yang diisi oleh respons API dan menu lungsur yang berubah berdasarkan input pengguna.

Mengapa Dropdown Dinamik Mencabar?

Tinting turun dinamik sering menimbulkan cabaran ujian kerana:

• Pilihan tidak hadir pada mulanya: Pilihan lungsur turun mungkin dimuatkan secara tidak segerak selepas tindakan pengguna atau panggilan API.
• Perubahan kandungan lungsur turun: Berdasarkan input atau interaksi pengguna, pilihan lungsur turun mungkin berubah secara dinamik.
• Kemas kini DOM: Cypress perlu menunggu sehingga DOM dikemas kini sebelum berinteraksi dengan menu lungsur.

Cypress menyediakan beberapa arahan yang berkuasa untuk menangani cabaran ini, memastikan anda boleh memilih pilihan yang betul daripada menu lungsur dinamik dengan pasti.

Panduan Langkah demi Langkah untuk Mengendalikan Dropdown Dinamik

Mari kita lihat contoh asas untuk memahami cara Cypress boleh mengendalikan dropdown dinamik.

Langkah 1: Berinteraksi dengan Pencetus Jatuh Turun
Kebanyakan dropdown dinamik pada mulanya tersembunyi dan hanya muncul apabila pengguna mengklik butang atau medan input. Untuk bermula, anda perlu berinteraksi dengan elemen pencetus.

Contoh HTML:

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

Untuk mensimulasikan interaksi pengguna:

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
});

Ini mengklik butang, yang dalam contoh ini mencetuskan panggilan API atau proses lain untuk mengisi pilihan lungsur turun secara dinamik.

Langkah 2: Tunggu Dropdown Mengisi
Dalam menu lungsur dinamik, pilihan mungkin tidak tersedia serta-merta. Cypress boleh menggunakan pernyataan seperti should('wujud') atau menunggu elemen tersedia.

Contoh pengendalian dropdown selepas populasi:

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);
});

Di sini, Cypress menunggu sehingga pilihan lungsur turun tersedia sebelum meneruskan.

Langkah 3: Pilih Pilihan Secara Dinamik
Setelah menu lungsur diisi, anda boleh memilih pilihan yang diingini menggunakan cy.select() atau dengan berinteraksi terus dengan elemen DOM.

Contoh memilih negara:

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

Jika lungsur turun anda tidak menggunakan elemen (cth., komponen lungsur turun tersuai), anda boleh mengklik pilihan lungsur turun secara manual:

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(); 
});

Mengendalikan Jenis dan Carian Drop Dinamik

Banyak aplikasi moden menggunakan jenis-dan-carian lungsur turun di mana pengguna menaip ke dalam medan input dan pilihan lungsur turun ditapis secara dinamik berdasarkan teks yang dimasukkan. Mari lihat cara mengendalikan senario sedemikian dalam Cypress.

Turun Turun Dinamik Jenis dan Carian Contoh
Contoh struktur 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>

Dalam kes ini, pilihan dalam menu lungsur ditapis berdasarkan input pengguna.

Langkah 1: Jenis dan Pilihan Penapis
Apabila menaip ke dalam medan input, Cypress boleh mensimulasikan penaipan pengguna dan menapis pilihan secara dinamik.

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();
});

Dalam kes ini, pilihan dalam menu lungsur ditapis berdasarkan input pengguna.

Langkah 1: Jenis dan Pilihan Penapis
Apabila menaip ke dalam medan input, Cypress boleh mensimulasikan penaipan pengguna dan menapis pilihan secara dinamik.

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();
});

Kod ini mensimulasikan menaip Can ke dalam kotak carian, mengesahkan bahawa lungsur turun ditapis untuk menunjukkan "Kanada" sahaja dan kemudian memilih pilihan itu.

Langkah 2: Tunggu Pilihan Jatuh Turun Dimuatkan Secara Dinamik (didorong API)
Kadangkala, lungsur jenis dan carian disokong oleh API yang mengembalikan pilihan berdasarkan input pengguna. Cypress boleh menunggu respons API dan mengesahkan pilihan.

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();
});

Di sini, kami menggunakan cy.intercept() untuk memintas dan mengejek permintaan API yang mengambil pilihan yang ditapis berdasarkan input yang ditaip.

Mengendalikan Dropdown Diisi oleh Panggilan API

Turun turun dinamik selalunya diisi oleh panggilan API, bermakna data tidak tersedia sehingga pelayan bertindak balas. Untuk mengendalikan menu lungsur ini, Cypress menyediakan cy.intercept() untuk mengejek atau memintas panggilan rangkaian.

Berikut ialah contoh memintas respons API dan memilih nilai daripada menu lungsur yang diisi secara dinamik:

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!

Das obige ist der detaillierte Inhalt vonUmgang mit dynamischem Dropdown in Cypress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json ajax html angular if for select require try Filter using class Generic dom this input li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：WebSockets, Socket.IO und Echtzeitkommunikation mit Node.jsNächster Artikel：WebSockets, Socket.IO und Echtzeitkommunikation mit Node.js

In Verbindung stehende Artikel

Mehr sehen

• Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
• Detaillierte Erläuterung des JavaScript-Funktions-Curryings
• Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
• Angularjs integriert WeChat UI (weui)
• Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über unsHaftungsausschlussSitemap

© php.cn All rights reserved