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.
Tinting turun dinamik sering menimbulkan cabaran ujian kerana:
Cypress menyediakan beberapa arahan yang berkuasa untuk menangani cabaran ini, memastikan anda boleh memilih pilihan yang betul daripada menu lungsur dinamik dengan pasti.
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
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();
});
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.
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.
Many modern frameworks (like React, Angular, or Vue) use custom dropdown components that don’t use native
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
});
Use Proper Selectors: Always use specific selectors to avoid flaky tests. Prefer data-* attributes or IDs over generic class selectors.
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.
Mock API Responses: Use cy.intercept() to mock API calls when testing dropdowns populated by dynamic data.
Check Dropdown State: Ensure you verify both the closed and open states of the dropdown, especially when dealing with custom components.
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.
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!
Wie ist die Leistung von thinkphp?
Was soll ich tun, wenn meine Windows-Lizenz bald abläuft?
Unetbootin-Nutzung
Der Unterschied zwischen Sass und weniger
Windows Boot Manager
So lösen Sie das Problem, dass die Datei msxml6.dll fehlt
So beheben Sie einen Skriptfehler
So sperren Sie den Bildschirm auf oppo11
