Cypress - Choosing an option within a dropdown menu - html

Question

Trying to use the bn.com to run a simple test to search for a book and sort by Lowest Price first. The HTML of that dropdown section after searching the bookstore for "left hand of darkness" is as follows:
<div class="sort-by">
<select name="sorter" id="sortProducts1" class="hidden selectBox" title="Sort by:" data-selectbox="" style="display: none;">
<option value="/s/left+hand+of+darkness" selected="selected">Top Matches</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</option>
<option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</option>
<option value="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</option>
<option value="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</option>
<option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</option>
<option value="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</option>
</select>
<div class="selectBox-container">
<a class="selectBox hidden selectBox-dropdown selectBox--filled" title="Sort by:" tabindex="0" style="display: inline-block;" aria-labelledby="sortProducts1-button-label" id="sortProducts1-replacement" aria-expanded="false" aria-owns="selectBox-2">
<span class="selectBox-title">Sort by:</span>
<span class="selectBox-label" id="sortProducts1-button-label">Top Matches</span>
<span class="selectBox-arrow"></span>
</a>
<ul class="selectBox-dropdown-menu selectBox-options hidden-selectBox-dropdown-menu" style="display: none;" id="selectBox-2" role="listbox">
<li id="sortProducts1-option-0" role="option">
<a rel="/s/left+hand+of+darkness">Top Matches</a>
</li>
<li id="sortProducts1-option-1" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sales_Rank%7C0">Best Sellers</a>
</li>
<li id="sortProducts1-option-2" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C1">Newest to Oldest</a>
</li>
<li id="sortProducts1-option-3" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Publication_Date%7C0">Oldest to Newest</a>
</li>
<li id="sortProducts1-option-4" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C0">Price - Low to High</a>
</li>
<li id="sortProducts1-option-5" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Sale_Price%7C1">Price - High to Low</a>
</li>
<li id="sortProducts1-option-6" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C0">Title - A to Z</a>
</li>
<li id="sortProducts1-option-7" role="option">
<a rel="/s/left+hand+of+darkness?Ns=P_Display_Name%7C1">Title - Z to A</a>
</li></ul></div>
</div>
I can't seem to get the option in the dropdown selected.
My most recent attempt looks like this:
describe('Visits book store and finds cheapest book', () => {
it('Visits book store and finds cheapest book', () => {
cy.visit('https://www.barnesandnoble.com/');
cy.get(`[id="searchBarBN"]`).type('Left Hand of Darkness');
cy.get('.icon-search-2').click();
cy.get(`[id="sortProducts1-replacement"]`).find(`[id="sortProducts1-option-4"]`)
.click({ force: true });
There are no failures, but the sort option nevertheless remains unselected since the DOM does not have the book results sorted by price ascending.
Looking for some help in making sure I'm correctly selecting the dropdown choice that's needed.

Answer 1

You most likely need to wait for the results to be returned after the click (cy.get('.icon-search-2').click()) before trying to select any elements or make assertions. Cypress is trying to select elements that have not been rendered.
This can be done using cy.wait against the route for the results.
There are several examples in the Cypress Real World App, a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows of waiting on network requests that demonstrate this concept.